@selfcommunity/react-ui 0.7.0-alpha.349 → 0.7.0-alpha.350

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

@@ -10,23 +10,15 @@ 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'
-        }
-    }
-}));
+    slot: 'SettingsRoot'
+})(() => ({}));
 export default function Settings(inProps) {
     // PROPS
     const props = useThemeProps({

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

@@ -9,13 +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;

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() {

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

@@ -9,17 +9,19 @@ 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`,
     tabs: `${PREFIX}-tabs`,
-    tabContent: `${PREFIX}-tab-content`
+    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 }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS User Profile Edit component. Learn about the available props and the CSS API.
  *
@@ -70,7 +72,7 @@ export default function UserProfileEdit(inProps) {
             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)))));
+            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)))));
 }

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/UserProfileHeader/Skeleton.d.ts

@@ -9,15 +9,15 @@
 
  #### 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.|
+ |username|.SCUserProfileHeader-username|Styles applied to the username element.|
  *
  */
 declare function UserProfileHeaderSkeleton(): JSX.Element;

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

@@ -2,32 +2,16 @@ import React from 'react';
 import { Box, 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`,
     avatar: `${PREFIX}-avatar`,
     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,15 +23,15 @@ 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.|
+ |username|.SCUserProfileHeader-username|Styles applied to the username element.|
  *
  */
 function UserProfileHeaderSkeleton() {

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

@@ -8,7 +8,7 @@ import { SCPreferences, useSCContext, useSCFetchUser, useSCPreferences, useSCUse
 import UserProfileHeaderSkeleton from './Skeleton';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
-const PREFIX = 'SCUserProfileHeader';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     cover: `${PREFIX}-cover`,
@@ -20,9 +20,8 @@ const classes = {
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS User Profile AppBar component. Learn about the available props and the CSS API.
  *

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

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

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

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

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

@@ -9,14 +9,14 @@
 
  #### Component Name
 
- The name `SCUserSuggestionWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUserSuggestionWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserSuggestionWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCUserSuggestionWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCUserSuggestionWidget-skeleton-root|Styles applied to the root element.|
+ |list|.SCUserSuggestionWidget-list|Styles applied to the list element.|
  *
  */
 declare function UserSuggestionWidgetSkeleton(props: any): JSX.Element;

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

@@ -3,12 +3,15 @@ import { styled } from '@mui/material/styles';
 import UserSkeleton from '../User/Skeleton';
 import Widget from '../Widget';
 import { List, CardContent, ListItem } from '@mui/material';
-const PREFIX = 'SCUserSuggestionWidgetSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     list: `${PREFIX}-list`
 };
-const Root = styled(Widget)(({ theme }) => ({}));
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS People Suggestion Skeleton component. Learn about the available props and the CSS API.
 
@@ -20,14 +23,14 @@ const Root = styled(Widget)(({ theme }) => ({}));
 
  #### Component Name
 
- The name `SCUserSuggestionWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCUserSuggestionWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCUserSuggestionWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCUserSuggestionWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCUserSuggestionWidget-skeleton-root|Styles applied to the root element.|
+ |list|.SCUserSuggestionWidget-list|Styles applied to the list element.|
  *
  */
 function UserSuggestionWidgetSkeleton(props) {

package/lib/esm/components/UserSuggestionWidget/UserSuggestionWidget.js

@@ -16,7 +16,7 @@ import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '..
 import BaseDialog from '../../shared/BaseDialog';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import InfiniteScroll from '../../shared/InfiniteScroll';
-const PREFIX = 'SCUserSuggestionWidget';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -27,13 +27,11 @@ const classes = {
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    slot: 'Root'
 })(() => ({}));
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
+    slot: 'DialogRoot'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS User Suggestion Widget component. Learn about the available props and the CSS API.

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

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

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

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

package/lib/esm/shared/ContributionActionsMenu/index.js

@@ -527,11 +527,11 @@ export default function ContributionActionsMenu(props) {
     function handleConfirmedAction() {
         if (contributionObj && !isLoading && !currentActionLoading) {
             if (currentAction === DELETE_CONTRIBUTION) {
-                setCurrentActionLoading(RESTORE_CONTRIBUTION);
+                setCurrentActionLoading(DELETE_CONTRIBUTION);
                 performDeleteContribution()
                     .then((data) => {
-                    setFeedObj(Object.assign({}, feedObj, { deleted: true }));
-                    onDeleteContribution && onDeleteContribution(contributionObj);
+                    const _contributionObj = Object.assign({}, contributionObj, { deleted: true });
+                    onDeleteContribution && onDeleteContribution(_contributionObj);
                     performPostConfirmAction(true);
                 })
                     .catch((error) => {
@@ -543,8 +543,8 @@ export default function ContributionActionsMenu(props) {
                 setCurrentActionLoading(RESTORE_CONTRIBUTION);
                 performRestoreContribution()
                     .then((data) => {
-                    setFeedObj(Object.assign({}, feedObj, { deleted: false }));
-                    onRestoreContribution && onRestoreContribution(contributionObj);
+                    const _contributionObj = Object.assign({}, contributionObj, { deleted: false });
+                    onRestoreContribution && onRestoreContribution(_contributionObj);
                     performPostConfirmAction(true);
                 })
                     .catch((error) => {
@@ -556,10 +556,10 @@ export default function ContributionActionsMenu(props) {
                 setCurrentActionLoading(MODERATE_CONTRIBUTION_HIDDEN);
                 performModerationContribution(MODERATION_TYPE_ACTION_HIDE, hideFlagType)
                     .then((data) => {
+                    const _contributionObj = Object.assign({}, contributionObj, { collapsed: !contributionObj.collapsed });
                     setHideType(hideType === hideFlagType ? null : hideFlagType);
                     setHideFlagType(null);
-                    setFeedObj(Object.assign({}, feedObj, { collapsed: !feedObj.collapsed }));
-                    onHideContribution && onHideContribution(contributionObj);
+                    onHideContribution && onHideContribution(_contributionObj);
                     performPostConfirmAction(true);
                 })
                     .catch((error) => {
@@ -571,10 +571,10 @@ export default function ContributionActionsMenu(props) {
                 setCurrentActionLoading(MODERATE_CONTRIBUTION_DELETED);
                 performModerationContribution(MODERATION_TYPE_ACTION_DELETE, deleteFlagType)
                     .then((data) => {
+                    const _contributionObj = Object.assign({}, contributionObj, { deleted: !contributionObj.deleted });
                     setDeleteType(deleteType === deleteFlagType ? null : deleteFlagType);
                     setDeleteFlagType(null);
-                    setFeedObj(Object.assign({}, feedObj, { deleted: !feedObj.deleted }));
-                    onDeleteContribution && onDeleteContribution(contributionObj);
+                    onDeleteContribution && onDeleteContribution(_contributionObj);
                     performPostConfirmAction(true);
                 })
                     .catch((error) => {
@@ -639,7 +639,7 @@ export default function ContributionActionsMenu(props) {
             : section === HIDE_CONTRIBUTION_SECTION
                 ? handleHideContribution
                 : handleDeleteContribution;
-        let value = FLAG_CONTRIBUTION_SECTION ? flagType : section === HIDE_CONTRIBUTION_SECTION ? hideType : deleteType;
+        let value = section === FLAG_CONTRIBUTION_SECTION ? flagType : section === HIDE_CONTRIBUTION_SECTION ? hideType : deleteType;
         return REPORTS.map((report, index) => {
             return (React.createElement(MenuItem, { key: `${section}_${index}`, className: classes.subItem, disabled: isFlagging },
                 React.createElement(ListItemIcon, { classes: { root: classes.selectedIcon } }, value === report && React.createElement(Icon, { color: "secondary" }, "check")),