@selfcommunity/react-ui 0.7.0-alpha.363 → 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.js

@@ -107,26 +107,26 @@ function PrivateMessageSettingsIconButton(inProps) {
     const renderList = () => {
         if (isMobile) {
             return [
-                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")),
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })),
                 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(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")),
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" }))
             ];
         }
         else {
             return [
-                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")),
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })),
                 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(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")),
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" }))
             ];
         }
     };

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.js

@@ -105,26 +105,26 @@ export default function PrivateMessageSettingsIconButton(inProps) {
     const renderList = () => {
         if (isMobile) {
             return [
-                React.createElement(ListItem, { className: classes.item, key: "delete", onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(Icon, { fontSize: "small" }, "delete")),
-                    React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })),
                 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(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")),
+                    React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" }))
             ];
         }
         else {
             return [
-                React.createElement(MenuItem, { className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick, key: "delete" },
-                    React.createElement(ListItemIcon, null,
-                        React.createElement(Icon, { fontSize: "small" }, "delete")),
-                    React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })),
                 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(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")),
+                    React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" }))
             ];
         }
     };

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)));
 }