@selfcommunity/react-ui 0.7.0-alpha.362 → 0.7.0-alpha.364

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

@@ -14,29 +14,17 @@ const CircularProgress_1 = tslib_1.__importDefault(require("@mui/material/Circul
 const system_1 = require("@mui/system");
 const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
-const PREFIX = 'SCChangeCoverButton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    helpPopover: `${PREFIX}-help-popover`,
-    addMenuItem: `${PREFIX}-add-menuItem`,
-    delMenuItem: `${PREFIX}-del-menuItem`
+    root: `${constants_1.PREFIX}-root`,
+    helpPopover: `${constants_1.PREFIX}-help-popover`,
+    addMenuItem: `${constants_1.PREFIX}-add-menuItem`,
+    delMenuItem: `${constants_1.PREFIX}-del-menuItem`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    [theme.breakpoints.down('md')]: {
-        '& .MuiButtonBase-root': {
-            padding: 6,
-            borderRadius: 50,
-            minWidth: 'auto'
-        }
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 const messages = (0, react_intl_1.defineMessages)({
     imageMaxSize: {
         id: 'ui.changeCover.button.change.alertMaxSize',
@@ -77,7 +65,7 @@ function ChangeCover(inProps) {
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { onChange, autoHide, className } = props, rest = tslib_1.__rest(props, ["onChange", "autoHide", "className"]);
     //CONTEXT
@@ -196,10 +184,11 @@ function ChangeCover(inProps) {
      * Renders change cover menu
      */
     const cc = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest), isMobile ? react_1.default.createElement(Icon_1.default, null, "photo_camera") : react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.change", defaultMessage: "ui.changeCover.button.change" })),
+        react_1.default.createElement(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest),
+            react_1.default.createElement(Icon_1.default, null, "photo_camera")),
         react_1.default.createElement(react_1.default.Fragment, null, isMobile ? (react_1.default.createElement(material_1.SwipeableDrawer, { open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, renderMenuItems())) : (react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: open, onClose: handleClose }, renderMenuItems()))),
         !isMobile && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.IconButton, { className: classes.helpPopover, color: "primary", "aria-label": "upload picture", component: "span", onClick: handleClickHelpButton },
+            react_1.default.createElement(material_1.Button, { className: classes.helpPopover, variant: "contained", onClick: handleClickHelpButton },
                 react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "help_outline")),
             isOpen && (react_1.default.createElement(material_1.Popover, { open: isOpen, anchorEl: anchorElPopover, onClose: handleCloseHelpPopover, anchorOrigin: {
                     vertical: 'bottom',

package/lib/cjs/components/ChangeCover/constants.d.ts

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

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCChangeCoverButton';

package/lib/cjs/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.d.ts

@@ -1,4 +1,5 @@
 import { IconButtonProps } from '@mui/material';
+import { SCUserType } from '@selfcommunity/types';
 export interface PrivateMessageSettingsIconButtonProps extends IconButtonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -6,7 +7,7 @@ export interface PrivateMessageSettingsIconButtonProps extends IconButtonProps {
      */
     className?: string;
     /**
-     * Handles callback on menu item click
+     * Handles callback on menu item delete click
      */
     onMenuItemDeleteClick?: () => void;
     /**
@@ -17,6 +18,10 @@ export interface PrivateMessageSettingsIconButtonProps extends IconButtonProps {
      * The deleting thread id
      */
     threadToDelete?: any;
+    /**
+     * The user receiver context
+     */
+    user?: SCUserType;
     /**
      * Any other properties
      */

package/lib/cjs/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js

@@ -8,6 +8,7 @@ const react_intl_1 = require("react-intl");
 const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
 const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
 const api_services_1 = require("@selfcommunity/api-services");
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
@@ -62,13 +63,14 @@ function PrivateMessageSettingsIconButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = null, onMenuItemDeleteClick, onItemDeleteConfirm, threadToDelete } = props, rest = tslib_1.__rest(props, ["className", "onMenuItemDeleteClick", "onItemDeleteConfirm", "threadToDelete"]);
+    const { className = null, onMenuItemDeleteClick, user, onItemDeleteConfirm, threadToDelete } = props, rest = tslib_1.__rest(props, ["className", "onMenuItemDeleteClick", "user", "onItemDeleteConfirm", "threadToDelete"]);
     // STATE
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
     const [openConfirmDialog, setOpenConfirmDialog] = (0, react_1.useState)(false);
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
     // HANDLERS
     const handleOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -105,6 +107,10 @@ function PrivateMessageSettingsIconButton(inProps) {
     const renderList = () => {
         if (isMobile) {
             return [
+                react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "profile", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user) },
+                    react_1.default.createElement(material_1.ListItemIcon, null,
+                        react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "people_alt")),
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })),
                 react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "delete", onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick },
                     react_1.default.createElement(material_1.ListItemIcon, null,
                         react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "delete")),
@@ -113,6 +119,10 @@ function PrivateMessageSettingsIconButton(inProps) {
         }
         else {
             return [
+                react_1.default.createElement(material_1.MenuItem, { className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user), key: "profile" },
+                    react_1.default.createElement(material_1.ListItemIcon, null,
+                        react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "people_alt")),
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })),
                 react_1.default.createElement(material_1.MenuItem, { className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick, key: "delete" },
                     react_1.default.createElement(material_1.ListItemIcon, null,
                         react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "delete")),

package/lib/cjs/components/PrivateMessageSnippets/PrivateMessageSnippets.js

@@ -94,9 +94,12 @@ function PrivateMessageSnippets(inProps) {
         }
         return el.receiver.username.includes(search.toLowerCase());
     });
-    const messageReceiver = (item, loggedUserId) => {
-        var _a, _b, _c;
-        return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? (_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id : (_c = item === null || item === void 0 ? void 0 : item.sender) === null || _c === void 0 ? void 0 : _c.id;
+    const messageReceiver = (item, loggedUserId, obj) => {
+        var _a, _b, _c, _d;
+        if (obj) {
+            return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? item === null || item === void 0 ? void 0 : item.receiver : item === null || item === void 0 ? void 0 : item.sender;
+        }
+        return ((_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id) !== loggedUserId ? (_c = item === null || item === void 0 ? void 0 : item.receiver) === null || _c === void 0 ? void 0 : _c.id : (_d = item === null || item === void 0 ? void 0 : item.sender) === null || _d === void 0 ? void 0 : _d.id;
     };
     //HANDLERS
     const handleChange = (event) => {
@@ -218,7 +221,7 @@ function PrivateMessageSnippets(inProps) {
                     } }),
                 react_1.default.createElement(material_1.List, null, filteredSnippets.map((message) => (react_1.default.createElement(PrivateMessageSnippetItem_1.default, { message: message, key: message.id, onItemClick: () => handleOpenThread(message), secondaryAction: react_1.default.createElement(react_1.default.Fragment, null,
                         message.thread_status === types_1.SCPrivateMessageStatusType.NEW && (react_1.default.createElement(material_1.Icon, { fontSize: "small", color: "secondary" }, "fiber_manual_record")),
-                        !isMobile && (react_1.default.createElement(PrivateMessageSettingsIconButton_1.default, { threadToDelete: messageReceiver(message, authUserId), onItemDeleteConfirm: () => handleDeleteConversation(messageReceiver(message, authUserId)) }))), selected: userObj !== types_1.SCPrivateMessageStatusType.NEW &&
+                        !isMobile && (react_1.default.createElement(PrivateMessageSettingsIconButton_1.default, { threadToDelete: messageReceiver(message, authUserId), onItemDeleteConfirm: () => handleDeleteConversation(messageReceiver(message, authUserId)), user: messageReceiver(message, authUserId, true) }))), selected: userObj !== types_1.SCPrivateMessageStatusType.NEW &&
                         messageReceiver(message, authUserId) === (isObj ? messageReceiver(userObj, authUserId) : userObj) })))))))));
 }
 exports.default = PrivateMessageSnippets;

package/lib/cjs/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
      */
@@ -62,6 +67,8 @@ 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.|
+ |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.|

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

@@ -15,6 +15,8 @@ const classes = {
     root: `${constants_1.PREFIX}-root`,
     cover: `${constants_1.PREFIX}-cover`,
     avatar: `${constants_1.PREFIX}-avatar`,
+    info: `${constants_1.PREFIX}-info`,
+    infOpsSection: `${constants_1.PREFIX}-infops-section`,
     username: `${constants_1.PREFIX}-username`,
     realname: `${constants_1.PREFIX}-realname`,
     changePicture: `${constants_1.PREFIX}-change-picture`,
@@ -49,6 +51,8 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  |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.|
+ |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.|
@@ -62,7 +66,7 @@ function UserProfileHeader(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = null, className = null, userId = null, user = null, ChangePictureProps = {}, ChangeCoverProps = {} } = props, rest = tslib_1.__rest(props, ["id", "className", "userId", "user", "ChangePictureProps", "ChangeCoverProps"]);
+    const { id = null, className = null, userId = null, user = null, ChangePictureProps = {}, ChangeCoverProps = {}, actions } = props, rest = tslib_1.__rest(props, ["id", "className", "userId", "user", "ChangePictureProps", "ChangeCoverProps", "actions"]);
     // PREFERENCES
     const scPreferences = (0, react_core_1.useSCPreferences)();
     // CONTEXT
@@ -111,9 +115,12 @@ function UserProfileHeader(inProps) {
                 react_1.default.createElement(ChangePicture_1.default, Object.assign({ iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)),
                 react_1.default.createElement("div", { className: classes.changeCover },
                     react_1.default.createElement(ChangeCover_1.default, Object.assign({ onChange: handleChangeCover }, ChangeCoverProps)))))),
-        react_1.default.createElement(material_1.Typography, { variant: "h5", className: classes.username },
-            "@",
-            isMe ? scUserContext.user.username : scUser.username),
-        realName && (react_1.default.createElement(material_1.Typography, { variant: "h5", className: classes.realname }, realName))));
+        react_1.default.createElement(material_1.Box, { className: classes.infOpsSection },
+            react_1.default.createElement(material_1.Box, { className: classes.info },
+                react_1.default.createElement(material_1.Typography, { variant: "h5", className: classes.username },
+                    "@",
+                    isMe ? scUserContext.user.username : scUser.username),
+                realName && (react_1.default.createElement(material_1.Typography, { variant: "h5", className: classes.realname }, realName))),
+            actions && actions)));
 }
 exports.default = UserProfileHeader;

package/lib/esm/components/ChangeCover/ChangeCover.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React, { useContext, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Alert, Box, Button, Divider, IconButton, ListItemIcon, Menu, MenuItem, Popover, SwipeableDrawer, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Alert, Box, Button, Divider, ListItemIcon, Menu, MenuItem, Popover, SwipeableDrawer, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { SCUserContext } from '@selfcommunity/react-core';
 import Icon from '@mui/material/Icon';
@@ -12,7 +12,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import { useThemeProps } from '@mui/system';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';
-const PREFIX = 'SCChangeCoverButton';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     helpPopover: `${PREFIX}-help-popover`,
@@ -21,20 +21,8 @@ const classes = {
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    flexWrap: 'wrap',
-    [theme.breakpoints.down('md')]: {
-        '& .MuiButtonBase-root': {
-            padding: 6,
-            borderRadius: 50,
-            minWidth: 'auto'
-        }
-    }
-}));
+    slot: 'Root'
+})(() => ({}));
 const messages = defineMessages({
     imageMaxSize: {
         id: 'ui.changeCover.button.change.alertMaxSize',
@@ -194,10 +182,11 @@ export default function ChangeCover(inProps) {
      * Renders change cover menu
      */
     const cc = (React.createElement(React.Fragment, null,
-        React.createElement(Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest), isMobile ? React.createElement(Icon, null, "photo_camera") : React.createElement(FormattedMessage, { id: "ui.changeCover.button.change", defaultMessage: "ui.changeCover.button.change" })),
+        React.createElement(Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest),
+            React.createElement(Icon, null, "photo_camera")),
         React.createElement(React.Fragment, null, isMobile ? (React.createElement(SwipeableDrawer, { open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, renderMenuItems())) : (React.createElement(Menu, { anchorEl: anchorEl, open: open, onClose: handleClose }, renderMenuItems()))),
         !isMobile && (React.createElement(React.Fragment, null,
-            React.createElement(IconButton, { className: classes.helpPopover, color: "primary", "aria-label": "upload picture", component: "span", onClick: handleClickHelpButton },
+            React.createElement(Button, { className: classes.helpPopover, variant: "contained", onClick: handleClickHelpButton },
                 React.createElement(Icon, { fontSize: "small" }, "help_outline")),
             isOpen && (React.createElement(Popover, { open: isOpen, anchorEl: anchorElPopover, onClose: handleCloseHelpPopover, anchorOrigin: {
                     vertical: 'bottom',

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { IconButtonProps } from '@mui/material';
+import { SCUserType } from '@selfcommunity/types';
 export interface PrivateMessageSettingsIconButtonProps extends IconButtonProps {
     /**
      * Overrides or extends the styles applied to the component.
@@ -6,7 +7,7 @@ export interface PrivateMessageSettingsIconButtonProps extends IconButtonProps {
      */
     className?: string;
     /**
-     * Handles callback on menu item click
+     * Handles callback on menu item delete click
      */
     onMenuItemDeleteClick?: () => void;
     /**
@@ -17,6 +18,10 @@ export interface PrivateMessageSettingsIconButtonProps extends IconButtonProps {
      * The deleting thread id
      */
     threadToDelete?: any;
+    /**
+     * The user receiver context
+     */
+    user?: SCUserType;
     /**
      * Any other properties
      */

package/lib/esm/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js

@@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import Icon from '@mui/material/Icon';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
+import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
 import { PrivateMessageService } from '@selfcommunity/api-services';
 import PubSub from 'pubsub-js';
@@ -60,13 +61,14 @@ export default function PrivateMessageSettingsIconButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = null, onMenuItemDeleteClick, onItemDeleteConfirm, threadToDelete } = props, rest = __rest(props, ["className", "onMenuItemDeleteClick", "onItemDeleteConfirm", "threadToDelete"]);
+    const { className = null, onMenuItemDeleteClick, user, onItemDeleteConfirm, threadToDelete } = props, rest = __rest(props, ["className", "onMenuItemDeleteClick", "user", "onItemDeleteConfirm", "threadToDelete"]);
     // STATE
     const [anchorEl, setAnchorEl] = useState(null);
     const [openConfirmDialog, setOpenConfirmDialog] = useState(false);
     // HOOKS
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+    const scRoutingContext = useSCRouting();
     // HANDLERS
     const handleOpen = (event) => {
         setAnchorEl(event.currentTarget);
@@ -103,6 +105,10 @@ export default function PrivateMessageSettingsIconButton(inProps) {
     const renderList = () => {
         if (isMobile) {
             return [
+                React.createElement(ListItem, { className: classes.item, key: "profile", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, user) },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(Icon, { fontSize: "small" }, "people_alt")),
+                    React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })),
                 React.createElement(ListItem, { className: classes.item, key: "delete", onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick },
                     React.createElement(ListItemIcon, null,
                         React.createElement(Icon, { fontSize: "small" }, "delete")),
@@ -111,6 +117,10 @@ export default function PrivateMessageSettingsIconButton(inProps) {
         }
         else {
             return [
+                React.createElement(MenuItem, { className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, user), key: "profile" },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(Icon, { fontSize: "small" }, "people_alt")),
+                    React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })),
                 React.createElement(MenuItem, { className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick, key: "delete" },
                     React.createElement(ListItemIcon, null,
                         React.createElement(Icon, { fontSize: "small" }, "delete")),

package/lib/esm/components/PrivateMessageSnippets/PrivateMessageSnippets.js

@@ -92,9 +92,12 @@ export default function PrivateMessageSnippets(inProps) {
         }
         return el.receiver.username.includes(search.toLowerCase());
     });
-    const messageReceiver = (item, loggedUserId) => {
-        var _a, _b, _c;
-        return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? (_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id : (_c = item === null || item === void 0 ? void 0 : item.sender) === null || _c === void 0 ? void 0 : _c.id;
+    const messageReceiver = (item, loggedUserId, obj) => {
+        var _a, _b, _c, _d;
+        if (obj) {
+            return ((_a = item === null || item === void 0 ? void 0 : item.receiver) === null || _a === void 0 ? void 0 : _a.id) !== loggedUserId ? item === null || item === void 0 ? void 0 : item.receiver : item === null || item === void 0 ? void 0 : item.sender;
+        }
+        return ((_b = item === null || item === void 0 ? void 0 : item.receiver) === null || _b === void 0 ? void 0 : _b.id) !== loggedUserId ? (_c = item === null || item === void 0 ? void 0 : item.receiver) === null || _c === void 0 ? void 0 : _c.id : (_d = item === null || item === void 0 ? void 0 : item.sender) === null || _d === void 0 ? void 0 : _d.id;
     };
     //HANDLERS
     const handleChange = (event) => {
@@ -216,6 +219,6 @@ export default function PrivateMessageSnippets(inProps) {
                     } }),
                 React.createElement(List, null, filteredSnippets.map((message) => (React.createElement(PrivateMessageSnippetItem, { message: message, key: message.id, onItemClick: () => handleOpenThread(message), secondaryAction: React.createElement(React.Fragment, null,
                         message.thread_status === SCPrivateMessageStatusType.NEW && (React.createElement(Icon, { fontSize: "small", color: "secondary" }, "fiber_manual_record")),
-                        !isMobile && (React.createElement(PrivateMessageSettingsIconButton, { threadToDelete: messageReceiver(message, authUserId), onItemDeleteConfirm: () => handleDeleteConversation(messageReceiver(message, authUserId)) }))), selected: userObj !== SCPrivateMessageStatusType.NEW &&
+                        !isMobile && (React.createElement(PrivateMessageSettingsIconButton, { threadToDelete: messageReceiver(message, authUserId), onItemDeleteConfirm: () => handleDeleteConversation(messageReceiver(message, authUserId)), user: messageReceiver(message, authUserId, true) }))), selected: userObj !== SCPrivateMessageStatusType.NEW &&
                         messageReceiver(message, authUserId) === (isObj ? messageReceiver(userObj, authUserId) : userObj) })))))))));
 }

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
      */
@@ -62,6 +67,8 @@ 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.|
+ |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.|

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

@@ -13,6 +13,8 @@ const classes = {
     root: `${PREFIX}-root`,
     cover: `${PREFIX}-cover`,
     avatar: `${PREFIX}-avatar`,
+    info: `${PREFIX}-info`,
+    infOpsSection: `${PREFIX}-infops-section`,
     username: `${PREFIX}-username`,
     realname: `${PREFIX}-realname`,
     changePicture: `${PREFIX}-change-picture`,
@@ -47,6 +49,8 @@ const Root = styled(Box, {
  |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.|
+ |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.|
@@ -60,7 +64,7 @@ export default function UserProfileHeader(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = null, className = null, userId = null, user = null, ChangePictureProps = {}, ChangeCoverProps = {} } = props, rest = __rest(props, ["id", "className", "userId", "user", "ChangePictureProps", "ChangeCoverProps"]);
+    const { id = null, className = null, userId = null, user = null, ChangePictureProps = {}, ChangeCoverProps = {}, actions } = props, rest = __rest(props, ["id", "className", "userId", "user", "ChangePictureProps", "ChangeCoverProps", "actions"]);
     // PREFERENCES
     const scPreferences = useSCPreferences();
     // CONTEXT
@@ -109,8 +113,11 @@ export default function UserProfileHeader(inProps) {
                 React.createElement(ChangePicture, Object.assign({ iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)),
                 React.createElement("div", { className: classes.changeCover },
                     React.createElement(ChangeCover, Object.assign({ onChange: handleChangeCover }, ChangeCoverProps)))))),
-        React.createElement(Typography, { variant: "h5", className: classes.username },
-            "@",
-            isMe ? scUserContext.user.username : scUser.username),
-        realName && (React.createElement(Typography, { variant: "h5", className: classes.realname }, realName))));
+        React.createElement(Box, { className: classes.infOpsSection },
+            React.createElement(Box, { className: classes.info },
+                React.createElement(Typography, { variant: "h5", className: classes.username },
+                    "@",
+                    isMe ? scUserContext.user.username : scUser.username),
+                realName && (React.createElement(Typography, { variant: "h5", className: classes.realname }, realName))),
+            actions && actions)));
 }