@selfcommunity/react-ui 0.7.0-alpha.33 → 0.7.0-alpha.331

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

@@ -1,22 +1,12 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { useEffect, useMemo, useState } from 'react';
+import { __rest } from "tslib";
+import React, { useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, CircularProgress, IconButton, InputAdornment, MenuItem, TextField } from '@mui/material';
+import { Box, CircularProgress, IconButton, InputAdornment, MenuItem, TextField, useMediaQuery, useTheme } from '@mui/material';
 import Icon from '@mui/material/Icon';
-import { defineMessages, useIntl } from 'react-intl';
-import { http, Endpoints, formatHttpError } from '@selfcommunity/api-services';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Endpoints, formatHttpErrorCode, http } from '@selfcommunity/api-services';
 import { camelCase, Logger } from '@selfcommunity/utils';
-import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
+import { SCPreferences, useSCContext, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { DEFAULT_FIELDS } from '../../../constants/UserProfile';
 import classNames from 'classnames';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
@@ -27,6 +17,11 @@ import { useThemeProps } from '@mui/system';
 import { SCUserProfileFields } from '../../../types';
 import MetadataField from '../../../shared/MetadataField';
 import { SCOPE_SC_UI } from '../../../constants/Errors';
+import { format, isBefore, isValid, parseISO, startOfHour } from 'date-fns';
+import itLocale from 'date-fns/locale/it';
+import enLocale from 'date-fns/locale/en-US';
+import { LoadingButton } from '@mui/lab';
+import { useSnackbar } from 'notistack';
 const messages = defineMessages({
     genderMale: {
         id: 'ui.userProfileEditPublicInfo.genderMale',
@@ -44,7 +39,8 @@ const messages = defineMessages({
 const PREFIX = 'SCUserProfileEditSectionPublicInfo';
 const classes = {
     root: `${PREFIX}-root`,
-    field: `${PREFIX}-field`
+    field: `${PREFIX}-field`,
+    btnSave: `${PREFIX}-btn-save`
 };
 const Root = styled(Box, {
     name: PREFIX,
@@ -56,19 +52,25 @@ const Root = styled(Box, {
     },
     [`& .${classes.field} .MuiSelect-icon`]: {
         right: theme.spacing(5)
+    },
+    [`& .${classes.btnSave}`]: {
+        marginTop: theme.spacing(2),
+        marginBottom: theme.spacing()
     }
 }));
 const GENDERS = ['Male', 'Female', 'Unspecified'];
+const DATEPICKER_MINDATE = new Date(1000, 1, 1);
 export default function PublicInfo(inProps) {
-    var _a;
     // PROPS
     const props = useThemeProps({
         props: inProps,
         name: PREFIX
     });
-    const { id = null, className = null, fields = [...DEFAULT_FIELDS], onEditSuccess = null, editingField } = props, rest = __rest(props, ["id", "className", "fields", "onEditSuccess", "editingField"]);
+    const { id = null, className = null, fields = [...DEFAULT_FIELDS], onEditSuccess = null, onEditFailure = null, startActions = null, endActions = null } = props, rest = __rest(props, ["id", "className", "fields", "onEditSuccess", "onEditFailure", "startActions", "endActions"]);
     // CONTEXT
+    const scContext = useSCContext();
     const scUserContext = useSCUser();
+    const { enqueueSnackbar } = useSnackbar();
     // PREFERENCES
     const scPreferences = useSCPreferences();
     const metadataDefinitions = useMemo(() => {
@@ -78,72 +80,75 @@ export default function PublicInfo(inProps) {
             }
             catch (e) {
                 Logger.error(SCOPE_SC_UI, 'Error on parse user metadata.');
-                console.log(scPreferences.preferences[SCPreferences.CONFIGURATIONS_USER_METADATA_DEFINITIONS]);
                 return {};
             }
         }
         return null;
     }, [scPreferences.preferences]);
     // STATE
-    const [user, setUser] = useState(scUserContext.user);
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const [user, setUser] = useState();
     const [error, setError] = useState({});
-    const [editing, setEditing] = useState((_a = [editingField]) !== null && _a !== void 0 ? _a : []);
+    const [editing, setEditing] = useState([]);
     const [saving, setSaving] = useState([]);
-    const [editedField, setEditedField] = useState({});
     // INTL
     const intl = useIntl();
     // EFFECTS
     useDeepCompareEffectNoCheck(() => {
-        setUser(scUserContext.user);
+        if (scUserContext.user) {
+            setUser(Object.assign({}, scUserContext.user));
+            // eslint-disable-next-line @typescript-eslint/no-empty-function
+            return () => { };
+        }
     }, [scUserContext.user]);
     // HANDLERS
-    const handleEdit = (field) => {
-        return (event) => {
-            setEditing([...editing, editingField !== null && editingField !== void 0 ? editingField : field]);
-            if (error[`${camelCase(field)}Error`]) {
-                delete error[`${camelCase(field)}Error`];
-                setError(error);
-            }
-        };
+    const handleSave = () => {
+        setSaving([...editing]);
+        setError({});
+        const data = {};
+        editing.map((f) => {
+            data[f] = f === SCUserProfileFields.DATE_OF_BIRTH && user[f] ? format(user[f], 'yyyy-MM-dd') : user[f];
+        });
+        http
+            .request({
+            url: Endpoints.UserPatch.url({ id: user.id }),
+            method: Endpoints.UserPatch.method,
+            data
+        })
+            .then((res) => {
+            scUserContext.updateUser(res.data);
+            setEditing([]);
+            setSaving([]);
+            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.userInfo.save.success", defaultMessage: "ui.userInfo.save.success" }), {
+                variant: 'success',
+                autoHideDuration: 3000
+            });
+            onEditSuccess && onEditSuccess();
+        })
+            .catch((e) => {
+            setError(Object.assign(Object.assign({}, error), formatHttpErrorCode(e)));
+            setSaving([]);
+            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                variant: 'error',
+                autoHideDuration: 3000
+            });
+            onEditFailure && onEditFailure();
+        });
     };
-    const handleSave = (field) => {
+    const handleChange = (field) => {
         return (event) => {
-            if (user[field] === scUserContext.user[field]) {
-                setEditing(editing.filter((f) => f !== field));
-                return;
+            setUser(Object.assign(Object.assign({}, user), { [event.target.name]: event.target.value }));
+            setEditing([...editing, field]);
+            if (!event.target.value && event.target.name in metadataDefinitions && metadataDefinitions[event.target.name].mandatory) {
+                setError(Object.assign(Object.assign({}, error), { [`${camelCase(event.target.name)}Error`]: { error: 'invalid' } }));
+            }
+            else if (error[`${camelCase(event.target.name)}Error`]) {
+                delete error[`${camelCase(event.target.name)}Error`];
+                setError(error);
             }
-            setSaving([...saving, editingField !== null && editingField !== void 0 ? editingField : field]);
-            http
-                .request({
-                url: Endpoints.UserPatch.url({ id: user.id }),
-                method: Endpoints.UserPatch.method,
-                data: { [field]: user[field] }
-            })
-                .then((res) => {
-                scUserContext.updateUser(res.data);
-            })
-                .catch((error) => {
-                setError(Object.assign(Object.assign({}, error), formatHttpError(error)));
-            })
-                .then(() => {
-                setEditing(editing.filter((f) => f !== field));
-                setSaving(saving.filter((f) => f !== field));
-                if (onEditSuccess) {
-                    editingField ? onEditSuccess(editedField) : onEditSuccess();
-                }
-            });
         };
     };
-    const handleChange = (event) => {
-        setEditedField({ [event.target.name]: event.target.value });
-        setUser(Object.assign(Object.assign({}, user), { [event.target.name]: event.target.value }));
-    };
-    useEffect(() => {
-        if (editingField && typeof document !== 'undefined') {
-            const element = document.getElementById(editingField);
-            element && element.focus();
-        }
-    }, [editingField]);
     // RENDER
     const renderField = (field) => {
         const isEditing = editing.includes(field);
@@ -152,14 +157,12 @@ export default function PublicInfo(inProps) {
         const _error = error !== null && error[`${camelField}Error`] && error[`${camelField}Error`].error;
         const component = { element: TextField };
         let label = intl.formatMessage({
-            id: `ui.userProfileInfo.${camelField}`,
-            defaultMessage: `ui.userProfileInfo.${field}`
+            id: `ui.userInfo.${camelField}`,
+            defaultMessage: `ui.userInfo.${camelField}`
         });
         let props = {
             InputProps: {
-                endAdornment: (React.createElement(InputAdornment, { position: "end" }, !isEditing ? (React.createElement(IconButton, { onClick: handleEdit(field), edge: "end" },
-                    React.createElement(Icon, null, "edit"))) : isSaving ? (React.createElement(CircularProgress, { size: 10 })) : (React.createElement(IconButton, { onClick: handleSave(field), edge: "end", color: user[field] === scUserContext.user[field] ? 'default' : 'primary' },
-                    React.createElement(Icon, null, "check")))))
+                endAdornment: React.createElement(InputAdornment, { position: "end" }, isSaving && React.createElement(CircularProgress, { size: 10 }))
             }
         };
         let content = null;
@@ -170,16 +173,56 @@ export default function PublicInfo(inProps) {
             case SCUserProfileFields.DATE_JOINED:
                 return null;
             case SCUserProfileFields.DATE_OF_BIRTH:
-                return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, key: field },
+                return (React.createElement(LocalizationProvider, { dateAdapter: AdapterDateFns, key: field, adapterLocale: scContext.settings.locale.default === 'it' ? itLocale : enLocale },
                     React.createElement(DatePicker, { label: intl.formatMessage({
-                            id: `ui.userProfileInfo.${camelCase(field)}`,
-                            defaultMessage: `ui.userProfileInfo.${field}`
-                        }), value: user[field], onChange: (newValue) => {
-                            setUser(Object.assign(Object.assign({}, user), { [field]: newValue.toJSON().split('T')[0] })); // FIX for ensuring API format
-                        }, disableFuture: true, disabled: !isEditing || isSaving, renderInput: (params) => {
-                            const { InputProps } = params, rest = __rest(params, ["InputProps"]);
-                            InputProps.endAdornment = (React.createElement(React.Fragment, null, props.InputProps.endAdornment));
-                            return React.createElement(TextField, Object.assign({}, rest, { className: classes.field, fullWidth: true, InputProps: InputProps }));
+                            id: `ui.userInfo.${camelCase(field)}`,
+                            defaultMessage: `ui.userInfo.${field}`
+                        }), defaultValue: user[field] ? parseISO(user[field]) : null, minDate: DATEPICKER_MINDATE, onChange: (newValue) => {
+                            const u = user;
+                            const field = SCUserProfileFields.DATE_OF_BIRTH;
+                            const camelField = camelCase(field);
+                            if ((isValid(newValue) && isBefore(startOfHour(DATEPICKER_MINDATE), newValue) && isBefore(newValue, new Date())) || !newValue) {
+                                if (error[`${camelField}Error`]) {
+                                    const _error = Object.assign({}, error);
+                                    delete _error[`${camelField}Error`];
+                                    setError(_error);
+                                }
+                                u[field] = newValue;
+                            }
+                            else {
+                                u[field] = null;
+                                setError({
+                                    [`${camelField}Error`]: {
+                                        error: intl.formatMessage({ id: 'ui.publicInfo.dateOfBirth.error', defaultMessage: 'ui.publicInfo.dateOfBirth.error' })
+                                    }
+                                });
+                            }
+                            setUser(u);
+                            setEditing([...editing, field]);
+                        }, disableFuture: true, disabled: isSaving, slots: {
+                            inputAdornment: (params) => {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore,@typescript-eslint/ban-ts-comment
+                                // @ts-ignore
+                                const _a = params.children.props, { children } = _a, rest = __rest(_a, ["children"]);
+                                return (React.createElement(InputAdornment, { position: 'end' },
+                                    React.createElement(IconButton, Object.assign({}, rest), children),
+                                    isSaving && React.createElement(CircularProgress, { size: 10 })));
+                            }
+                        }, 
+                        // onAccept={isMobile ? handleSave(SCUserProfileFields.DATE_OF_BIRTH) : null}
+                        slotProps: {
+                            textField: {
+                                className: classes.field,
+                                fullWidth: true,
+                                variant: 'outlined',
+                                helperText: _error || null,
+                                InputProps: {
+                                    endAdornment: isMobile && (React.createElement(React.Fragment, null,
+                                        React.createElement(IconButton, { disabled: !isEditing },
+                                            React.createElement(Icon, null, "CalendarIcon")),
+                                        isSaving ? React.createElement(CircularProgress, { size: 10 }) : null))
+                                }
+                            }
                         } })));
             case SCUserProfileFields.BIO:
                 props.multiline = true;
@@ -197,17 +240,23 @@ export default function PublicInfo(inProps) {
                 return null;
             default:
                 if (metadataDefinitions && metadataDefinitions[field]) {
-                    return (React.createElement(MetadataField, Object.assign({ id: field, key: field }, props, { className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange, disabled: !isEditing || isSaving, error: _error, helperText: _error, metadata: metadataDefinitions[field] })));
+                    return (React.createElement(MetadataField, Object.assign({ id: field, key: field, className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange(field), disabled: isSaving, error: Boolean(_error), helperText: _error && React.createElement(FormattedMessage, { id: `ui.userInfo.metadata.error.${_error}`, defaultMessage: `ui.userInfo.metadata.error.${_error}` }), metadata: metadataDefinitions[field] }, props)));
                 }
                 break;
         }
-        return (React.createElement(component.element, Object.assign({ id: field, key: field }, props, { className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange, disabled: !isEditing || isSaving, error: _error, helperText: _error }), content));
+        return (React.createElement(component.element, Object.assign({ id: field, key: field }, props, { className: classes.field, name: field, fullWidth: true, label: label, value: user[field] || '', onChange: handleChange(field), disabled: isSaving, error: Boolean(_error), helperText: _error && React.createElement(FormattedMessage, { id: `ui.userInfo.${camelField}.error.${_error}`, defaultMessage: `ui.userInfo.${camelField}.error.${_error}` }) }), content));
     };
-    if (fields.length === 0 || !user) {
+    // FIELDS
+    const _fields = [...fields, ...Object.keys(metadataDefinitions)];
+    if (_fields.length === 0 || !user) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest), fields.map((field) => {
-        return renderField(field);
-    })));
+    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
+        startActions,
+        _fields.map((field) => {
+            return renderField(field);
+        }),
+        React.createElement(LoadingButton, { className: classes.btnSave, fullWidth: true, variant: "contained", color: "secondary", onClick: handleSave, loading: saving.length > 0, disabled: saving.length > 0 || !editing.length || Object.keys(error).length > 0 },
+            React.createElement(FormattedMessage, { id: 'ui.userInfo.button.save', defaultMessage: 'ui.userInfo.button.save' })),
+        endActions));
 }
-//# sourceMappingURL=PublicInfo.js.map

package/lib/esm/components/UserProfileEdit/Section/Settings.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { SCUserProfileSettings } from '../../../types';
 export interface SettingsProps {
     /**
@@ -19,10 +20,19 @@ export interface SettingsProps {
      * Callback on edit data with success
      */
     onEditSuccess?: () => void;
+    /**
+     * Actions to be inserted at the start
+     * @default null
+     */
+    startActions?: React.ReactNode | null;
+    /**
+     * Actions to be inserted at the end
+     * @default null
+     */
+    endActions?: React.ReactNode | null;
     /**
      * Any other properties
      */
     [p: string]: any;
 }
 export default function Settings(inProps: SettingsProps): JSX.Element;
-//# sourceMappingURL=Settings.d.ts.map

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

@@ -1,20 +1,9 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup, Typography } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
-import { Endpoints, http } from '@selfcommunity/api-services';
-import { useSCUser } from '@selfcommunity/react-core';
+import { SCNotification, useSCUser } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import SettingsSkeleton from './SettingsSkeleton';
 import { useSnackbar } from 'notistack';
@@ -44,7 +33,7 @@ export default function Settings(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = null, className = null, settings = [...DEFAULT_SETTINGS], onEditSuccess = null } = props, rest = __rest(props, ["id", "className", "settings", "onEditSuccess"]);
+    const { id = null, className = null, settings = [...DEFAULT_SETTINGS], onEditSuccess = null, startActions = null, endActions = null } = props, rest = __rest(props, ["id", "className", "settings", "onEditSuccess", "startActions", "endActions"]);
     // CONTEXT
     const scUserContext = useSCUser();
     // STATE
@@ -54,30 +43,15 @@ export default function Settings(inProps) {
     // EFFECTS
     useEffect(() => {
         if (scUserContext.user) {
-            http
-                .request({
-                url: Endpoints.UserSettings.url({ id: scUserContext.user.id }),
-                method: Endpoints.UserSettings.method
-            })
-                .then((res) => {
-                setSetting(res.data);
-            })
-                .catch((error) => {
-                console.log(error);
-            });
+            setSetting(scUserContext.managers.settings.all());
         }
-    }, [scUserContext.user]);
+    }, [scUserContext.user, scUserContext.managers.settings.all]);
     // HANDLERS
     const handleChange = (event) => {
-        setSetting(Object.assign(Object.assign({}, _settings), { [event.target.name]: event.target.value }));
-        http
-            .request({
-            url: Endpoints.UserSettingsPatch.url({ id: scUserContext.user.id }),
-            method: Endpoints.UserSettingsPatch.method,
-            data: { [event.target.name]: parseInt(event.target.value, 10) }
-        })
+        scUserContext.managers.settings
+            .update(event.target.name, parseInt(event.target.value, 10))
             .then((res) => {
-            setSetting(res.data);
+            setSetting(res);
             if (onEditSuccess) {
                 onEditSuccess();
             }
@@ -109,7 +83,7 @@ export default function Settings(inProps) {
                         React.createElement(FormControl, null,
                             React.createElement(FormLabel, null,
                                 React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.notification.label", defaultMessage: "ui.userProfileEditSettings.notification.label" })),
-                            React.createElement(RadioGroup, { "aria-labelledby": "notification settings", value: _settings.show_toast_notifications, name: "show_toast_notifications", onChange: handleChange },
+                            React.createElement(RadioGroup, { "aria-labelledby": "notification settings", value: _settings.show_toast_notifications, name: SCNotification.NOTIFICATIONS_SETTINGS_SHOW_TOAST, onChange: handleChange },
                                 React.createElement(FormControlLabel, { value: 1, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.common.yes", defaultMessage: "ui.common.yes" }) }),
                                 React.createElement(FormControlLabel, { value: 0, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.common.no", defaultMessage: "ui.common.no" }) }))))));
             case SCUserProfileSettings.INTERACTION:
@@ -120,7 +94,7 @@ export default function Settings(inProps) {
                         React.createElement(FormControl, null,
                             React.createElement(FormLabel, null,
                                 React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.label", defaultMessage: "ui.userProfileEditSettings.interaction.label" })),
-                            React.createElement(RadioGroup, { "aria-labelledby": "email notification settings", value: _settings.qa_frequency, name: "qa_frequency", onChange: handleChange },
+                            React.createElement(RadioGroup, { "aria-labelledby": "email notification settings", value: _settings.qa_frequency, name: SCNotification.NOTIFICATIONS_SETTINGS_QA_FREQUENCY, onChange: handleChange },
                                 React.createElement(FormControlLabel, { value: -1, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.immediatly", defaultMessage: "ui.userProfileEditSettings.interaction.immediatly" }) }),
                                 React.createElement(FormControlLabel, { value: 1, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.daily", defaultMessage: "ui.userProfileEditSettings.interaction.daily" }) }),
                                 React.createElement(FormControlLabel, { value: 0, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.interaction.never", defaultMessage: "ui.userProfileEditSettings.interaction.never" }) }))))));
@@ -132,13 +106,15 @@ export default function Settings(inProps) {
                         React.createElement(FormControl, null,
                             React.createElement(FormLabel, null,
                                 React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.label", defaultMessage: "ui.userProfileEditSettings.privateMessage.label" })),
-                            React.createElement(RadioGroup, { "aria-labelledby": "email notification settings", value: _settings.email_notification_not_qa, name: "email_notification_not_qa", onChange: handleChange },
+                            React.createElement(RadioGroup, { "aria-labelledby": "email notification settings", value: _settings.email_notification_not_qa, name: SCNotification.NOTIFICATIONS_SETTINGS_EMAIL_NOT_QA, onChange: handleChange },
                                 React.createElement(FormControlLabel, { value: 1, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.email", defaultMessage: "ui.userProfileEditSettings.privateMessage.email" }) }),
                                 React.createElement(FormControlLabel, { value: 0, control: React.createElement(Radio, { size: "small" }), label: React.createElement(FormattedMessage, { id: "ui.userProfileEditSettings.privateMessage.frontend", defaultMessage: "ui.userProfileEditSettings.privateMessage.frontend" }) }))))));
             default:
                 return null;
         }
     };
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest), settings.map((setting) => renderSetting(setting))));
+    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
+        startActions,
+        settings.map((setting) => renderSetting(setting)),
+        endActions));
 }
-//# sourceMappingURL=Settings.js.map

package/lib/esm/components/UserProfileEdit/Section/SettingsSkeleton.d.ts

@@ -19,4 +19,3 @@
  *
  */
 export default function SettingsSkeleton(): JSX.Element;
-//# sourceMappingURL=SettingsSkeleton.d.ts.map

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

@@ -37,4 +37,3 @@ export default function SettingsSkeleton() {
         React.createElement(Skeleton, null),
         React.createElement(Skeleton, null)));
 }
-//# sourceMappingURL=SettingsSkeleton.js.map

package/lib/esm/components/UserProfileEdit/Skeleton.d.ts

@@ -19,4 +19,3 @@
  *
  */
 export default function UserProfileEditSkeleton(): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -38,4 +38,3 @@ export default function UserProfileEditSkeleton() {
                 React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } }),
                 React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: '100%' } })))));
 }
-//# sourceMappingURL=Skeleton.js.map

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

@@ -1,14 +1,6 @@
-import React from 'react';
-import { AccordionProps as MUIAccordionProps } from '@mui/material';
 import { PublicInfoProps } from './Section/PublicInfo';
-import { DistributiveOmit } from '@mui/types';
-import { OverrideProps } from '@mui/material/OverridableComponent';
+import { AccountProps } from './Section/Account';
 import { SCUserProfileFields, SCUserProfileSettings } from '../../types';
-interface AccordionTypeMap<P = {}, D extends React.ElementType = 'div'> {
-    props: P & DistributiveOmit<MUIAccordionProps, 'children'> & {};
-    defaultComponent: D;
-}
-declare type AccordionProps<D extends React.ElementType = AccordionTypeMap['defaultComponent'], P = {}> = OverrideProps<AccordionTypeMap<P, D>, D>;
 export interface UserProfileEditProps {
     /**
      * Id of user object
@@ -30,11 +22,6 @@ export interface UserProfileEditProps {
      * @default [notification, interaction, private_message]
      */
     settings?: SCUserProfileSettings[];
-    /**
-     * Props to apply to the accordion component
-     * @default null
-     */
-    AccordionProps?: AccordionProps;
     /**
      * Props to apply to PublicInfo section
      * @default {}
@@ -45,14 +32,22 @@ export interface UserProfileEditProps {
      * @default {}
      */
     UserProfileEditSectionSettingsProps?: Omit<PublicInfoProps, 'settings'>;
+    /**
+     * Props to apply to Account section
+     * @default {}
+     */
+    UserProfileEditSectionAccountProps?: AccountProps;
     /**
      * Any other properties
      */
     [p: string]: any;
 }
 /**
+ * > API documentation for the Community-JS User Profile Edit component. Learn about the available props and the CSS API.
+ *
  *
- > API documentation for the Community-JS User Profile Edit component. Learn about the available props and the CSS API.
+ * This component renders a section composed of different tabs where the user can edit the settings about its public information, account and notifications.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UserProfileEdit)
 
  #### Import
 
@@ -70,10 +65,9 @@ export interface UserProfileEditProps {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCUserProfileEdit-root|Styles applied to the root element.|
- |field|.SCUserProfileEdit-field|Styles applied to the field element.|
+ |tabs|.SCUserProfileEdit-tabs|Styles applied to the tab elements.|
+ |tabsContent|.SCUserProfileEdit-tabs-content|Styles applied to tab content elements.|
 
  * @param inProps
  */
 export default function UserProfileEdit(inProps: UserProfileEditProps): JSX.Element;
-export {};
-//# sourceMappingURL=UserProfileEdit.d.ts.map

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

@@ -1,40 +1,31 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React from 'react';
 import { styled } from '@mui/material/styles';
-import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '@mui/material';
+import { Box, Tab, Tabs } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { DEFAULT_FIELDS, DEFAULT_SETTINGS } from '../../constants/UserProfile';
 import PublicInfo from './Section/PublicInfo';
+import Account from './Section/Account';
 import Settings from './Section/Settings';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 const PREFIX = 'SCUserProfileEdit';
 const classes = {
     root: `${PREFIX}-root`,
-    field: `${PREFIX}-field`
+    tabs: `${PREFIX}-tabs`,
+    tabContent: `${PREFIX}-tab-content`
 };
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.field}`]: {
-        fontWeight: 'bold'
-    }
-}));
+})(({ theme }) => ({}));
 /**
+ * > API documentation for the Community-JS User Profile Edit component. Learn about the available props and the CSS API.
+ *
  *
- > API documentation for the Community-JS User Profile Edit component. Learn about the available props and the CSS API.
+ * This component renders a section composed of different tabs where the user can edit the settings about its public information, account and notifications.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UserProfileEdit)
 
  #### Import
 
@@ -52,7 +43,8 @@ const Root = styled(Box, {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCUserProfileEdit-root|Styles applied to the root element.|
- |field|.SCUserProfileEdit-field|Styles applied to the field element.|
+ |tabs|.SCUserProfileEdit-tabs|Styles applied to the tab elements.|
+ |tabsContent|.SCUserProfileEdit-tabs-content|Styles applied to tab content elements.|
 
  * @param inProps
  */
@@ -62,20 +54,23 @@ export default function UserProfileEdit(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = null, className = null, fields = [...DEFAULT_FIELDS], settings = [...DEFAULT_SETTINGS], AccordionProps = {}, UserProfileEditSectionPublicInfoProps = {}, UserProfileEditSectionSettingsProps = {} } = props, rest = __rest(props, ["id", "className", "fields", "settings", "AccordionProps", "UserProfileEditSectionPublicInfoProps", "UserProfileEditSectionSettingsProps"]);
+    const { id = null, className = null, fields = [...DEFAULT_FIELDS], settings = [...DEFAULT_SETTINGS], UserProfileEditSectionPublicInfoProps = {}, UserProfileEditSectionAccountProps = {
+        showCredentialsSection: true,
+        showSocialAccountSection: true
+    }, UserProfileEditSectionSettingsProps = {} } = props, rest = __rest(props, ["id", "className", "fields", "settings", "UserProfileEditSectionPublicInfoProps", "UserProfileEditSectionAccountProps", "UserProfileEditSectionSettingsProps"]);
+    // STATE
+    const [tab, setTab] = React.useState(0);
+    const handleChange = (event, newValue) => {
+        setTab(newValue);
+    };
     // RENDER
     return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        React.createElement(Accordion, Object.assign({ defaultExpanded: true }, AccordionProps),
-            React.createElement(AccordionSummary, { "aria-controls": "profile information" },
-                React.createElement(Typography, { variant: "body1" },
-                    React.createElement(FormattedMessage, { id: "ui.userProfileEdit.info", defaultMessage: "ui.userProfileEdit.info" }))),
-            React.createElement(AccordionDetails, null,
-                React.createElement(PublicInfo, Object.assign({ fields: fields }, UserProfileEditSectionPublicInfoProps)))),
-        React.createElement(Accordion, Object.assign({}, AccordionProps),
-            React.createElement(AccordionSummary, { "aria-controls": "profile settings" },
-                React.createElement(Typography, { variant: "body1" },
-                    React.createElement(FormattedMessage, { id: "ui.userProfileEdit.notification", defaultMessage: "ui.userProfileEdit.notification" }))),
-            React.createElement(AccordionDetails, null,
-                React.createElement(Settings, Object.assign({ settings: settings }, UserProfileEditSectionSettingsProps))))));
+        React.createElement(Tabs, { className: classes.tabs, value: tab, onChange: handleChange, variant: "scrollable", scrollButtons: "auto", allowScrollButtonsMobile: true },
+            React.createElement(Tab, { label: React.createElement(FormattedMessage, { id: "ui.userProfileEdit.info", defaultMessage: "ui.userProfileEdit.info" }) }),
+            React.createElement(Tab, { label: React.createElement(FormattedMessage, { id: "ui.userProfileEdit.account", defaultMessage: "ui.userProfileEdit.account" }) }),
+            React.createElement(Tab, { label: React.createElement(FormattedMessage, { id: "ui.userProfileEdit.notification", defaultMessage: "ui.userProfileEdit.notification" }) })),
+        React.createElement(Box, { className: classes.tabContent },
+            tab === 0 && React.createElement(PublicInfo, Object.assign({ fields: fields }, UserProfileEditSectionPublicInfoProps)),
+            tab === 1 && React.createElement(Account, Object.assign({}, UserProfileEditSectionAccountProps)),
+            tab === 2 && React.createElement(Settings, Object.assign({ settings: settings }, UserProfileEditSectionSettingsProps)))));
 }
-//# sourceMappingURL=UserProfileEdit.js.map