@selfcommunity/react-ui 0.7.0-alpha.98 → 0.7.0

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

@@ -1,50 +1,26 @@
-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';
-import { useThemeProps } from '@mui/system';
 import { DEFAULT_SETTINGS } from '../../../constants/UserProfile';
 import { SCUserProfileSettings } from '../../../types';
-const PREFIX = 'SCUserProfileEditSectionSettings';
+import { PREFIX } from '../constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-settings-root`,
     control: `${PREFIX}-control`
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.control}`]: {
-        margin: theme.spacing(0, 0, 2, 0),
-        ['& .MuiFormControl-root']: {
-            display: 'block'
-        }
-    }
-}));
-export default function Settings(inProps) {
+    slot: 'SettingsRoot'
+})(() => ({}));
+export default function Settings(props) {
     // PROPS
-    const props = useThemeProps({
-        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 +30,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 +70,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 +81,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 +93,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

@@ -9,14 +9,13 @@
 
  #### Component Name
 
- The name `SCUserProfileEditSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUserProfileEdit-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserProfileEditSkeleton-root|Styles applied to the root element.|
+ |root|.SCUserProfileEdit-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function UserProfileEditSkeleton(): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -2,14 +2,13 @@ import React from 'react';
 import { Box, Grid } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
-const PREFIX = 'SCUserProfileEditSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-skeleton-root`
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    slot: 'SkeletonRoot'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS User Profile Edit Skeleton component. Learn about the available props and the CSS API.
@@ -22,13 +21,13 @@ const Root = styled(Box, {
 
  #### Component Name
 
- The name `SCUserProfileEditSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUserProfileEdit-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserProfileEditSkeleton-root|Styles applied to the root element.|
+ |root|.SCUserProfileEdit-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function UserProfileEditSkeleton() {
@@ -38,4 +37,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,15 +1,6 @@
-import React from 'react';
-import { AccordionProps as MUIAccordionProps } from '@mui/material';
 import { PublicInfoProps } from './Section/PublicInfo';
 import { AccountProps } from './Section/Account';
-import { DistributiveOmit } from '@mui/types';
-import { OverrideProps } from '@mui/material/OverridableComponent';
 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
@@ -31,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 {}
@@ -57,8 +43,11 @@ export interface UserProfileEditProps {
     [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
 
@@ -76,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,17 +1,7 @@
-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';
@@ -19,23 +9,25 @@ import Account from './Section/Account';
 import Settings from './Section/Settings';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-const PREFIX = 'SCUserProfileEdit';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
-    field: `${PREFIX}-field`
+    tabs: `${PREFIX}-tabs`,
+    tabContent: `${PREFIX}-tab-content`,
+    publicInfo: `${PREFIX}-public-info`,
+    account: `${PREFIX}-account`,
+    settings: `${PREFIX}-settings`
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.field}`]: {
-        fontWeight: 'bold'
-    }
-}));
+    slot: 'Root'
+})(() => ({}));
 /**
+ * > 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
 
@@ -53,7 +45,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
  */
@@ -63,26 +56,23 @@ export default function UserProfileEdit(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = null, className = null, fields = [...DEFAULT_FIELDS], settings = [...DEFAULT_SETTINGS], AccordionProps = {}, UserProfileEditSectionPublicInfoProps = {}, UserProfileEditSectionSettingsProps = {}, UserProfileEditSectionAccountProps = {} } = props, rest = __rest(props, ["id", "className", "fields", "settings", "AccordionProps", "UserProfileEditSectionPublicInfoProps", "UserProfileEditSectionSettingsProps", "UserProfileEditSectionAccountProps"]);
+    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": "account settings" },
-                React.createElement(Typography, { variant: "body1" },
-                    React.createElement(FormattedMessage, { id: "ui.userProfileEdit.account", defaultMessage: "ui.userProfileEdit.account" }))),
-            React.createElement(AccordionDetails, null,
-                React.createElement(Account, Object.assign({}, UserProfileEditSectionAccountProps)))),
-        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({ className: classes.publicInfo, fields: fields }, UserProfileEditSectionPublicInfoProps)),
+            tab === 1 && React.createElement(Account, Object.assign({ className: classes.account }, UserProfileEditSectionAccountProps)),
+            tab === 2 && React.createElement(Settings, Object.assign({ settings: settings, className: classes.settings }, UserProfileEditSectionSettingsProps)))));
 }
-//# sourceMappingURL=UserProfileEdit.js.map

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

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

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

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

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

@@ -5,4 +5,3 @@ import UserProfileEditSectionSettings, { SettingsProps as UserProfileEditSection
 import UserProfileEditSectionAccount, { AccountProps as UserProfileEditSectionAccountProps } from './Section/Account';
 export default UserProfileEdit;
 export { UserProfileEditProps, UserProfileEditSkeleton, UserProfileEditSectionPublicInfo, UserProfileEditSectionPublicInfoProps, UserProfileEditSectionSettings, UserProfileEditSectionSettingsProps, UserProfileEditSectionAccount, UserProfileEditSectionAccountProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -5,4 +5,3 @@ import UserProfileEditSectionSettings from './Section/Settings';
 import UserProfileEditSectionAccount from './Section/Account';
 export default UserProfileEdit;
 export { UserProfileEditSkeleton, UserProfileEditSectionPublicInfo, UserProfileEditSectionSettings, UserProfileEditSectionAccount };
-//# sourceMappingURL=index.js.map

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

@@ -9,17 +9,19 @@
 
  #### Component Name
 
- The name `SCUserProfileHeaderSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUserProfileHeader-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserProfileHeaderSkeleton-root|Styles applied to the root element.|
- |avatar|.SCUserProfileHeaderSkeleton-avatar|Styles applied to the avatar element.|
- |username|.SCUserProfileHeaderSkeleton-username|Styles applied to the username element.|
+ |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
+ |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
+ |cover|.SCUserProfileHeader-cover|Styles applied to the cover element.|
+ |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
+ |section|.SCUserProfileHeader-section|Styles applied to the info section.|
+ |username|.SCUserProfileHeader-username|Styles applied to the username element.|
  *
  */
 declare function UserProfileHeaderSkeleton(): JSX.Element;
 export default UserProfileHeaderSkeleton;
-//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -1,33 +1,20 @@
 import React from 'react';
-import { Box, Typography, useTheme } from '@mui/material';
+import { Box, Button, Icon, IconButton, Stack, Typography, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
-const PREFIX = 'SCUserProfileHeaderSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
+    cover: `${PREFIX}-cover`,
     avatar: `${PREFIX}-avatar`,
+    actions: `${PREFIX}-actions`,
+    section: `${PREFIX}-section`,
     username: `${PREFIX}-username`
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(() => ({
-    position: 'relative',
-    [`& .${classes.avatar}`]: {
-        position: 'absolute',
-        top: 190,
-        width: '100%',
-        [`& .MuiSkeleton-root`]: {
-            border: '#FFF solid 5px',
-            margin: '0 auto'
-        }
-    },
-    [`& .${classes.username}`]: {
-        marginTop: 50,
-        textAlign: 'center'
-    }
-}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS User Profile AppBar Skeleton component. Learn about the available props and the CSS API.
 
@@ -39,25 +26,33 @@ const Root = styled(Box, {
 
  #### Component Name
 
- The name `SCUserProfileHeaderSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUserProfileHeader-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserProfileHeaderSkeleton-root|Styles applied to the root element.|
- |avatar|.SCUserProfileHeaderSkeleton-avatar|Styles applied to the avatar element.|
- |username|.SCUserProfileHeaderSkeleton-username|Styles applied to the username element.|
+ |root|.SCUserProfileHeader-skeleton-root|Styles applied to the root element.|
+ |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
+ |cover|.SCUserProfileHeader-cover|Styles applied to the cover element.|
+ |actions|.SCUserProfileHeader-actions|Styles applied to the actions section.|
+ |section|.SCUserProfileHeader-section|Styles applied to the info section.|
+ |username|.SCUserProfileHeader-username|Styles applied to the username element.|
  *
  */
 function UserProfileHeaderSkeleton() {
     const theme = useTheme();
     return (React.createElement(Root, { className: classes.root },
-        React.createElement(Skeleton, { sx: { height: 350 }, animation: "wave", variant: "rectangular" }),
+        React.createElement(Skeleton, { className: classes.cover, animation: "wave", variant: "rectangular" }),
         React.createElement(Box, { className: classes.avatar },
-            React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeLarge, height: theme.selfcommunity.user.avatar.sizeLarge })),
-        React.createElement(Typography, { variant: "h5", className: classes.username },
-            React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: 100, margin: '0 auto' } }))));
+            React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeXLarge, height: theme.selfcommunity.user.avatar.sizeXLarge })),
+        React.createElement(Box, { className: classes.section },
+            React.createElement(Typography, { variant: "h5", className: classes.username },
+                React.createElement(Skeleton, { animation: "wave", sx: { height: 30, width: 100, margin: '0 auto' } })),
+            React.createElement(Stack, { direction: "row", className: classes.actions },
+                React.createElement(Button, { variant: "contained", disabled: true },
+                    React.createElement(Skeleton, { animation: "wave", sx: { height: 20, width: 60 } })),
+                React.createElement(IconButton, { disabled: true },
+                    React.createElement(Icon, null, "more_vert"))))));
 }
 export default UserProfileHeaderSkeleton;
-//# sourceMappingURL=Skeleton.js.map

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

@@ -1,3 +1,4 @@
+import React from 'react';
 import { ChangeCoverProps } from '../ChangeCover';
 import { ChangePictureProps } from '../ChangePicture';
 import { SCUserType } from '@selfcommunity/types';
@@ -32,6 +33,10 @@ export interface UserProfileHeaderProps {
      * @default {}
      */
     ChangeCoverProps?: ChangeCoverProps;
+    /**
+     *
+     */
+    actions?: React.ReactNode;
     /**
      * Any other properties
      */
@@ -39,6 +44,10 @@ export interface UserProfileHeaderProps {
 }
 /**
  * > API documentation for the Community-JS User Profile AppBar component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders the user profile's top section.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/UserProfileHeader)
 
  #### Import
 
@@ -58,12 +67,13 @@ export interface UserProfileHeaderProps {
  |root|.SCUserProfileHeader-root|Styles applied to the root element.|
  |cover|.SCUserProfileHeader-cover|Styles applied to the cover element.|
  |avatar|.SCUserProfileHeader-avatar|Styles applied to the avatar element.|
- |info|SCUserProfileHeader-info|Styles applied to the info element.|
+ |infOpsSection|SCUserProfileHeader-infops-section|Styles applied to the section including info and actions.|
+ |info|SCUserProfileHeader-info|Styles applied to the info section.|
  |username|SCUserProfileHeader-username|Styles applied to the username element.|
+ |realname|SCUserProfileHeader-realname|Styles applied to the realname element.|
  |changePicture|.SCUserProfileHeader-change-picture|Styles applied to changePicture element.|
  |changeCover|.SCUserProfileHeader-change-cover`|Styles applied to changeCover element.|
 
  * @param inProps
  */
 export default function UserProfileHeader(inProps: UserProfileHeaderProps): JSX.Element;
-//# sourceMappingURL=UserProfileHeader.d.ts.map