@selfcommunity/react-ui 0.11.0-alpha.8 → 0.11.0-alpha.81

package/lib/cjs/components/UserProfileEdit/Section/AccountCredentials.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_intl_1 = require("react-intl");
@@ -14,7 +13,6 @@ const BaseDialog_1 = tslib_1.__importDefault(require("../../../shared/BaseDialog
 const PasswordTextField_1 = tslib_1.__importDefault(require("../../../shared/PasswordTextField"));
 const EmailTextField_1 = tslib_1.__importDefault(require("../../../shared/EmailTextField"));
 const lab_1 = require("@mui/lab");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const notistack_1 = require("notistack");
 const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
@@ -38,11 +36,11 @@ const classes = {
     password: `${constants_1.PREFIX}-password`,
     confirmChangeButton: `${constants_1.PREFIX}-confirm-change-button`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'AccountCredentialsRoot'
 })(() => ({}));
-const PasswordDialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const PasswordDialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'PasswordDialogRoot'
 })(() => ({}));
@@ -159,9 +157,9 @@ function AccountCredentials(props) {
         return;
     }
     return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.email }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.email", defaultMessage: "ui.userProfileEditAccountCredentials.email" }) })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isSubmitting ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, {})) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(EmailTextField_1.default, { name: "email", disabled: !isEditing || isSubmitting, size: "small", value: field.email, onChange: handleChange, onBlur: handleEmailBlur, error: Boolean(error.email), helperText: error.email && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.email.error.${error.email}`, defaultMessage: `ui.userProfileEditAccountCredentials.email.error.${error.email}` })), InputProps: {
-                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: !isEditing ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setIsEditing(true), edge: "end" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "edit" }) }))) : error.email ? ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ color: "error" }, { children: "error" }))) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email || error.email }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "check" }) }))) })))
+                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: !isEditing ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => setIsEditing(true), edge: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }))) : error.email ? ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "error" }, { children: "error" }))) : ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleSubmitEmail, edge: "end", color: "primary", disabled: !field.email || error.email }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" }) }))) })))
                                 } }) })) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.password }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.passwordLabel", defaultMessage: "ui.userProfileEditAccountCredentials.passwordLabel" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", onClick: () => setOpenChangePasswordDialog(true), sx: { mb: 1 } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.changePassword", defaultMessage: "ui.userProfileEditAccountCredentials.changePassword" }) }))] }), openChangePasswordDialog && ((0, jsx_runtime_1.jsxs)(PasswordDialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.changePasswordTitle), open: openChangePasswordDialog, onClose: handleCloseDialog }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { className: classes.formField, name: "password", disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.password", defaultMessage: "ui.userProfileEditAccountCredentials.password" }), size: "medium", value: field.password, onChange: handleChange, error: Boolean(error.password), helperText: error.password && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.password.error.${error.password}`, defaultMessage: `ui.userProfileEditAccountCredentials.password.error.${error.password}` })) }), (0, jsx_runtime_1.jsx)(PasswordTextField_1.default, { name: "newPassword", className: classes.formField, disabled: isSubmittingPassword, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditAccountCredentials.newPassword", defaultMessage: "ui.userProfileEditAccountCredentials.newPassword" }), size: "medium", value: field.newPassword, onChange: handleChange, error: Boolean(error.newPassword), helperText: error.newPassword && ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}`, defaultMessage: `ui.userProfileEditAccountCredentials.newPassword.error.${error.newPassword}` })), InputProps: {
-                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "info", onClick: handlePopoverOpen, edge: "end" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "info" }) })) })))
+                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ "aria-label": "info", onClick: handlePopoverOpen, edge: "end" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) })))
                                 } }), (0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: open, anchorEl: anchorEl, anchorOrigin: {
                                     vertical: 'center',
                                     horizontal: 'left'

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

@@ -3,9 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_intl_1 = require("react-intl");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
@@ -44,7 +42,7 @@ const classes = {
     field: `${constants_1.PREFIX}-field`,
     btnSave: `${constants_1.PREFIX}-btn-save`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'PublicInfoRoot'
 })(() => ({}));
@@ -202,7 +200,7 @@ function PublicInfo(props) {
                                 variant: 'outlined',
                                 helperText: _error || null,
                                 InputProps: {
-                                    endAdornment: isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: !isEditing }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }) })), isSaving ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 10 }) : null] }))
+                                    endAdornment: isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: !isEditing }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) })), isSaving ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 10 }) : null] }))
                                 }
                             }
                         } }) }), field));

package/lib/cjs/components/UserProfileEdit/Section/Settings.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -17,7 +16,7 @@ const classes = {
     root: `${constants_1.PREFIX}-settings-root`,
     control: `${constants_1.PREFIX}-control`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SettingsRoot'
 })(() => ({}));
@@ -30,6 +29,7 @@ function Settings(props) {
     const [_settings, setSetting] = (0, react_1.useState)(null);
     // HOOKS
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
+    const privateMessagingEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.ADDONS_PRIVATE_MESSAGES_ENABLED);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         if (scUserContext.user) {
@@ -70,6 +70,8 @@ function Settings(props) {
             case types_1.SCUserProfileSettings.INTERACTION:
                 return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ gutterBottom: true, variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditSettings.interaction.title", defaultMessage: "ui.userProfileEditSettings.interaction.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.control }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditSettings.interaction.label", defaultMessage: "ui.userProfileEditSettings.interaction.label" }) }), (0, jsx_runtime_1.jsxs)(material_1.RadioGroup, Object.assign({ "aria-labelledby": "email notification settings", value: _settings.qa_frequency, name: react_core_1.SCNotification.NOTIFICATIONS_SETTINGS_QA_FREQUENCY, onChange: handleChange }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: -1, control: (0, jsx_runtime_1.jsx)(material_1.Radio, { size: "small" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditSettings.interaction.immediatly", defaultMessage: "ui.userProfileEditSettings.interaction.immediatly" }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: 1, control: (0, jsx_runtime_1.jsx)(material_1.Radio, { size: "small" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditSettings.interaction.daily", defaultMessage: "ui.userProfileEditSettings.interaction.daily" }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: 0, control: (0, jsx_runtime_1.jsx)(material_1.Radio, { size: "small" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditSettings.interaction.never", defaultMessage: "ui.userProfileEditSettings.interaction.never" }) })] }))] }) }))] }, setting));
             case types_1.SCUserProfileSettings.PRIVATE_MESSAGE:
+                if (!privateMessagingEnabled)
+                    return null;
                 return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ gutterBottom: true, variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.title", defaultMessage: "ui.userProfileEditSettings.privateMessage.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.control }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.label", defaultMessage: "ui.userProfileEditSettings.privateMessage.label" }) }), (0, jsx_runtime_1.jsxs)(material_1.RadioGroup, Object.assign({ "aria-labelledby": "email notification settings", value: _settings.email_notification_not_qa, name: react_core_1.SCNotification.NOTIFICATIONS_SETTINGS_EMAIL_NOT_QA, onChange: handleChange }, { children: [(0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: 1, control: (0, jsx_runtime_1.jsx)(material_1.Radio, { size: "small" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.email", defaultMessage: "ui.userProfileEditSettings.privateMessage.email" }) }), (0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { value: 0, control: (0, jsx_runtime_1.jsx)(material_1.Radio, { size: "small" }), label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.frontend", defaultMessage: "ui.userProfileEditSettings.privateMessage.frontend" }) })] }))] }) }))] }, setting));
             default:
                 return null;

package/lib/cjs/components/UserProfileEdit/Section/SettingsSkeleton.js

@@ -1,15 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const PREFIX = 'SCUserProfileEditSectionSettingsSkeleton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -35,6 +32,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function SettingsSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, {}), (0, jsx_runtime_1.jsx)(Skeleton_1.default, {}), (0, jsx_runtime_1.jsx)(Skeleton_1.default, {})] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, {}), (0, jsx_runtime_1.jsx)(material_1.Skeleton, {}), (0, jsx_runtime_1.jsx)(material_1.Skeleton, {})] })));
 }
 exports.default = SettingsSkeleton;

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

@@ -1,15 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -34,6 +31,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function UserProfileEditSkeleton() {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, md: 12, sm: 12 }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: '100%' } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: '100%' } })] })) })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, md: 12, sm: 12 }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } })] })) })) })));
 }
 exports.default = UserProfileEditSkeleton;

package/lib/cjs/components/UserProfileEdit/UserProfileEdit.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const UserProfile_1 = require("../../constants/UserProfile");
@@ -21,7 +20,7 @@ const classes = {
     account: `${constants_1.PREFIX}-account`,
     settings: `${constants_1.PREFIX}-settings`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

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

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
@@ -14,7 +11,7 @@ const classes = {
     section: `${constants_1.PREFIX}-section`,
     username: `${constants_1.PREFIX}-username`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -45,6 +42,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  */
 function UserProfileHeaderSkeleton() {
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.cover, animation: "wave", variant: "rectangular" }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeXLarge, height: theme.selfcommunity.user.avatar.sizeXLarge }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.section }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.username }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 30, width: 100, margin: '0 auto' } }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", disabled: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: 60 } }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) }))] }))] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.cover, animation: "wave", variant: "rectangular" }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeXLarge, height: theme.selfcommunity.user.avatar.sizeXLarge }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.section }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.username }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 30, width: 100, margin: '0 auto' } }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", disabled: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, width: 60 } }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ disabled: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) }))] }))] }))] })));
 }
 exports.default = UserProfileHeaderSkeleton;

package/lib/cjs/components/UserProfileHeader/UserProfileHeader.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const ChangeCover_1 = tslib_1.__importDefault(require("../ChangeCover"));
 const ChangePicture_1 = tslib_1.__importDefault(require("../ChangePicture"));
@@ -26,7 +25,7 @@ const classes = {
     changePicture: `${constants_1.PREFIX}-change-picture`,
     changeCover: `${constants_1.PREFIX}-change-cover`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

package/lib/cjs/components/UserSocialAssociation/UserSocialAssociation.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -38,7 +37,7 @@ const classes = {
     providerName: `${PREFIX}-provider-name`,
     providerAction: `${PREFIX}-provider-action`
 };
-const Root = (0, styles_1.styled)(material_1.Stack, {
+const Root = (0, material_1.styled)(material_1.Stack, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

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

@@ -3,16 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const Skeleton_1 = tslib_1.__importDefault(require("../Group/Skeleton"));
 const PREFIX = 'SCUserSubscribedGroupsWidgetSkeleton';
 const classes = {
     root: `${PREFIX}-skeleton-root`,
     list: `${PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -37,6 +35,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function UserSubscribedGroupsWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsxs)(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(3)].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.jsxs)(Root, Object.assign({ className: classes.root }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(3)].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 = UserSubscribedGroupsWidgetSkeleton;

package/lib/cjs/components/UserSubscribedGroupsWidget/UserSubscribedGroupsWidget.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
@@ -29,11 +27,11 @@ const classes = {
     dialogRoot: `${constants_1.PREFIX}-dialog-root`,
     endMessage: `${constants_1.PREFIX}-end-message`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(() => ({}));
@@ -167,7 +165,7 @@ function UserSubscribedGroupsWidget(inProps) {
     }
     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.userSubscribedGroupsWidget.title", defaultMessage: "ui.userSubscribedGroupsWidget.title", values: {
                         total: isMe ? state.results.filter((g) => g.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED).length : state.count
-                    } }) })), !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.userSubscribedGroupsWidget.subtitle.noResults", defaultMessage: "ui.userSubscribedGroupsWidget.subtitle.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, limit).map((group) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Group_1.default, Object.assign({ elevation: 0, group: group, groupSubscribeButtonProps: { onSubscribe: handleOnSubscribe } }, GroupProps)) }, group.id))) }), limit < state.count && ((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.userSubscribedGroupsWidget.button.showAll", defaultMessage: "ui.userSubscribedGroupsWidget.button.showAll" }) }))), openDialog && ((0, jsx_runtime_1.jsxs)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userSubscribedGroupsWidget.title", defaultMessage: "ui.userSubscribedGroupsWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog, scroll: "paper" }, DialogProps, { children: [(0, jsx_runtime_1.jsxs)(List_1.default, { children: [state.results.map((g) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Group_1.default, Object.assign({ elevation: 0, group: g, groupSubscribeButtonProps: { onSubscribe: handleOnSubscribe } }, GroupProps)) }, g.id))), state.isLoadingNext && ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Group_1.GroupSkeleton, Object.assign({ elevation: 0 }, GroupProps)) }))] }), (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.userSubscribedGroupsWidget.noMoreResults", defaultMessage: "ui.userSubscribedGroupsWidget.noMoreResults" }) }))] })))] }))] }));
+                    } }) })), !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.userSubscribedGroupsWidget.subtitle.noResults", defaultMessage: "ui.userSubscribedGroupsWidget.subtitle.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, limit).map((group) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Group_1.default, Object.assign({ elevation: 0, group: group, groupSubscribeButtonProps: { onSubscribe: handleOnSubscribe } }, GroupProps)) }, group.id))) }), limit < state.count && ((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.userSubscribedGroupsWidget.button.showAll", defaultMessage: "ui.userSubscribedGroupsWidget.button.showAll" }) }))), openDialog && ((0, jsx_runtime_1.jsxs)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userSubscribedGroupsWidget.title", defaultMessage: "ui.userSubscribedGroupsWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog, scroll: "paper" }, DialogProps, { children: [(0, jsx_runtime_1.jsxs)(material_1.List, { children: [state.results.map((g) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Group_1.default, Object.assign({ elevation: 0, group: g, groupSubscribeButtonProps: { onSubscribe: handleOnSubscribe } }, GroupProps)) }, g.id))), state.isLoadingNext && ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Group_1.GroupSkeleton, Object.assign({ elevation: 0 }, GroupProps)) }))] }), (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.userSubscribedGroupsWidget.noMoreResults", defaultMessage: "ui.userSubscribedGroupsWidget.noMoreResults" }) }))] })))] }))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = UserSubscribedGroupsWidget;

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("../User/Skeleton"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const material_1 = require("@mui/material");
@@ -11,7 +10,7 @@ const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/UserSuggestionWidget/UserSuggestionWidget.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -28,11 +27,11 @@ const classes = {
     dialogRoot: `${constants_1.PREFIX}-dialog-root`,
     endMessage: `${constants_1.PREFIX}-end-message`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(() => ({}));
@@ -86,8 +85,10 @@ function UserSuggestionWidget(inProps) {
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scPreferencesContext = (0, react_core_1.useSCPreferences)();
-    const followEnabled = (0, react_1.useMemo)(() => react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED in scPreferencesContext.preferences &&
-        scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value, [scPreferencesContext.preferences]);
+    const followOrConnectionEnabled = (0, react_1.useMemo)(() => (react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED in scPreferencesContext.preferences &&
+        scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_FOLLOW_ENABLED].value) ||
+        (react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED in scPreferencesContext.preferences &&
+            scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONNECTION_ENABLED].value), [scPreferencesContext.preferences]);
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
@@ -111,13 +112,13 @@ function UserSuggestionWidget(inProps) {
     // EFFECTS
     (0, react_1.useEffect)(() => {
         let _t;
-        if (scUserContext.user) {
+        if (scUserContext.user && followOrConnectionEnabled) {
             _t = setTimeout(_initComponent);
             return () => {
                 _t && clearTimeout(_t);
             };
         }
-    }, [scUserContext.user]);
+    }, [scUserContext.user, followOrConnectionEnabled]);
     (0, react_1.useEffect)(() => {
         if (openDialog && state.next && state.results.length <= limit && state.initialized) {
             dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
@@ -161,7 +162,7 @@ function UserSuggestionWidget(inProps) {
         setOpenDialog((prev) => !prev);
     };
     // RENDER
-    if ((autoHide && !state.count && state.initialized) || !scUserContext.user) {
+    if ((autoHide && !state.count && state.initialized) || !scUserContext.user || !followOrConnectionEnabled) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
     if (!state.initialized) {

package/lib/cjs/components/VoteAudienceButton/VoteAudienceButton.js

@@ -3,11 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const lab_1 = require("@mui/lab");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -23,16 +21,16 @@ const classes = {
     dialogTabs: `${PREFIX}-dialog-tabs`,
     dialogVoteBadge: `${PREFIX}-dialog-vote-badge`
 };
-const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(lab_1.LoadingButton, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => [styles.root, styles.voted]
-})(({ theme }) => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+    overridesResolver: (_props, styles) => [styles.root, styles.voted]
+})(() => ({}));
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.dialogRoot
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Vote Audience Button component. Learn about the available props and the CSS API.
 
@@ -71,13 +69,13 @@ function VoteAudienceButton(inProps) {
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     // HANDLERS
-    const handleOpen = (event) => {
+    const handleOpen = (_event) => {
         setOpen(true);
     };
-    const handleClose = (event) => {
+    const handleClose = (_event) => {
         setOpen(false);
     };
-    const handleChangeTab = (event, newValue) => {
+    const handleChangeTab = (_event, newValue) => {
         setTab(newValue);
     };
     // HOOKS
@@ -107,19 +105,19 @@ function VoteAudienceButton(inProps) {
     const audienceIcon = (0, react_1.useMemo)(() => {
         if (reactions.default && !isLoading && !error) {
             return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.reactionList }, { children: contributionReactionsCount &&
-                    contributionReactionsCount.slice(0, 3).map((count, i) => ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: (0, jsx_runtime_1.jsx)("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }, count.reaction.id))) })));
+                    contributionReactionsCount.slice(0, 3).map((count, _i) => ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }, count.reaction.id))) })));
         }
-        return scUserContext.user && contributionVoted ? (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "thumb_up" }) : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "thumb_up_off_alt" });
+        return scUserContext.user && contributionVoted ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up_off_alt" });
     }, [reactions.default, isLoading, error, contributionReactionsCount, scUserContext.user, contributionVoted]);
     const dialogTitle = (0, react_1.useMemo)(() => {
         if (reactions.default && !isLoading) {
             return ((0, jsx_runtime_1.jsxs)(material_1.Tabs, Object.assign({ className: classes.dialogTabs, value: tab, onChange: handleChangeTab, "aria-label": "reactions" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.voteAudienceButton.dialog.tab.all", id: "ui.voteAudienceButton.dialog.tab.all" }) }), contributionReactionsCount &&
-                        contributionReactionsCount.map((count) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { children: (0, jsx_runtime_1.jsx)("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) }), count.count] }) }, count.reaction.id)))] })));
+                        contributionReactionsCount.map((count) => ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "medium" }, { children: (0, jsx_runtime_1.jsx)("img", { alt: count.reaction.label, src: count.reaction.image, width: "100%", height: "100%" }) })), count.count] }) }, count.reaction.id)))] })));
         }
         else {
             return (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.voteAudienceButton.dialog.title", id: "ui.voteAudienceButton.dialog.title" });
         }
     }, [tab, reactions, contributionReactionsCount]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ onClick: handleOpen, disabled: isLoading || Boolean(error) || contributionVoteCount === 0, loading: isLoading, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [audienceIcon, "\u00A0", scUserContext.user && contributionVoted ? (contributionVoteCount === 1 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteAudienceButton.votedOnlyByMe", defaultMessage: "ui.voteAudienceButton.votedOnlyByMe" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteAudienceButton.votedByMe", defaultMessage: "ui.voteAudienceButton.votedByMe", values: { total: contributionVoteCount - 1 } }))) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteAudienceButton.votes", defaultMessage: "ui.voteAudienceButton.votes", values: { total: contributionVoteCount } }))] })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ title: dialogTitle, onClose: handleClose, open: open, DialogContentProps: {} }, { children: isLoadingVoteList && !voteList ? ((0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 50 })) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: voteList.length, next: () => handleFetchVoteList({}), hasMoreNext: voteListHasNext, loaderNext: (0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 30 }), height: 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteAudienceButton.dialog.end", defaultMessage: "ui.voteAudienceButton.dialog.end" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: voteList.map((vote) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: vote.user, badgeContent: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ className: classes.dialogVoteBadge }, { children: vote.reaction ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: (0, jsx_runtime_1.jsx)("img", { alt: vote.reaction.label, src: vote.reaction.image, width: "100%", height: "100%" }) })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: "thumb_up" })) })), onClick: handleClose }) }, vote.user.id))) }) }))) })))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ onClick: handleOpen, disabled: isLoading || Boolean(error) || contributionVoteCount === 0, loading: isLoading, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [audienceIcon, "\u00A0", scUserContext.user && contributionVoted ? (contributionVoteCount === 1 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteAudienceButton.votedOnlyByMe", defaultMessage: "ui.voteAudienceButton.votedOnlyByMe" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteAudienceButton.votedByMe", defaultMessage: "ui.voteAudienceButton.votedByMe", values: { total: contributionVoteCount - 1 } }))) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteAudienceButton.votes", defaultMessage: "ui.voteAudienceButton.votes", values: { total: contributionVoteCount } }))] })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ title: dialogTitle, onClose: handleClose, open: open, DialogContentProps: {} }, { children: isLoadingVoteList && !voteList ? ((0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 50 })) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: voteList.length, next: () => handleFetchVoteList({}), hasMoreNext: voteListHasNext, loaderNext: (0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 30 }), height: 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteAudienceButton.dialog.end", defaultMessage: "ui.voteAudienceButton.dialog.end" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: voteList.map((vote) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: vote.user, badgeContent: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ className: classes.dialogVoteBadge }, { children: vote.reaction ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: vote.reaction.label, src: vote.reaction.image, width: "100%", height: "100%" }) })) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up" })) })), onClick: handleClose }) }, vote.user.id))) }) }))) })))] }));
 }
 exports.default = VoteAudienceButton;

package/lib/cjs/components/VoteButton/VoteButton.js

@@ -3,11 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const lab_1 = require("@mui/lab");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
@@ -21,15 +19,15 @@ const classes = {
     reactionList: `${PREFIX}-reaction-list`,
     reaction: `${PREFIX}-reaction`
 };
-const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(lab_1.LoadingButton, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => [styles.root, styles.voted]
-})(({ theme }) => ({}));
-const PopperRoot = (0, styles_1.styled)(material_1.Popper, {
+    overridesResolver: (_props, styles) => [styles.root, styles.voted]
+})(() => ({}));
+const PopperRoot = (0, material_1.styled)(material_1.Popper, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.popperRoot
+    overridesResolver: (_props, styles) => styles.popperRoot
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Vote Button component. Learn about the available props and the CSS API.
@@ -74,7 +72,7 @@ function VoteButton(inProps) {
         handleClearTimeout();
         timeoutRef.current = setTimeout(() => setAnchorEl(event.target), 1000);
     };
-    const handleMouseLeave = (event) => {
+    const handleMouseLeave = (_event) => {
         handleClearTimeout();
         timeoutRef.current = setTimeout(() => setAnchorEl(null), 500);
     };
@@ -143,9 +141,9 @@ function VoteButton(inProps) {
             ? handleMouseEnter
             : () => handleVoteAction(contributionReaction ? contributionReaction : reactions.default ? reactions.default : null), disabled: isLoading || Boolean(error), loading: isVoting, className: (0, classnames_1.default)(classes.root, className, {
             [classes.voted]: scUserContext.user && contributionVoted
-        }) }, rest, rootProps, { children: scUserContext.user && contributionVoted ? (contributionReaction ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: (0, jsx_runtime_1.jsx)("img", { alt: contributionReaction.label, src: contributionReaction.image, width: "100%", height: "100%" }) })) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: "thumb_up" }))) : ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: "thumb_up_off_alt" })) })));
+        }) }, rest, rootProps, { children: scUserContext.user && contributionVoted ? (contributionReaction ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: contributionReaction.label }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: contributionReaction.label, src: contributionReaction.image, width: "100%", height: "100%" }) }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up" }))) : ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "thumb_up_off_alt" })) })));
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [reactions.default ? (button) : ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: contributionVoted ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteButton.voteDown", defaultMessage: "ui.voteButton.voteDown" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.voteButton.voteUp", defaultMessage: "ui.voteButton.voteUp" })) }, { children: (0, jsx_runtime_1.jsx)("span", { children: button }) }))), reactions.default && Boolean(anchorEl) && !isVoting && !isLoading && ((0, jsx_runtime_1.jsx)(PopperRoot, Object.assign({ id: `vote_${contributionId}_${contributionType}_popper`, className: classes.popperRoot, open: true, anchorEl: anchorEl, placement: "top", keepMounted: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ className: classes.reactionList, onMouseEnter: handleClearTimeout, onMouseLeave: handleMouseLeave }, { children: reactions.reactions
                         .filter((reaction) => !contributionVoted || (contributionVoted && contributionReaction.id !== reaction.id) ? reaction.active : reaction)
-                        .map((reaction) => ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.reaction, onClick: () => handleVoteAction(reaction) }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: (0, jsx_runtime_1.jsx)("img", { alt: reaction.label, src: reaction.image, width: "100%", height: "100%" }) }) }), reaction.id))) })) })))] }));
+                        .map((reaction) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: reaction.label }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.reaction, onClick: () => handleVoteAction(reaction) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: (0, jsx_runtime_1.jsx)("img", { alt: reaction.label, src: reaction.image, width: "100%", height: "100%" }) }) })) }), reaction.id))) })) })))] }));
 }
 exports.default = VoteButton;

package/lib/cjs/components/Widget/index.js

@@ -3,14 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const PREFIX = 'SCWidget';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(material_1.Card, {
+const Root = (0, material_1.styled)(material_1.Card, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/constants/Billing.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Billing info mode
+ * READ: display info
+ * EDIT: edit form to change the info
+ */
+export declare enum UserBillingInfoMode {
+    READ = "read",
+    EDIT = "edit"
+}
+export declare const VAT_EXAMPLE: Record<string, string>;