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

package/lib/cjs/components/UserSuggestionWidget/UserSuggestionWidget.js

@@ -18,24 +18,22 @@ const widget_1 = require("../../utils/widget");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const Errors_1 = require("../../constants/Errors");
 const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
-const PREFIX = 'SCUserSuggestionWidget';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    title: `${PREFIX}-title`,
-    noResults: `${PREFIX}-no-results`,
-    showMore: `${PREFIX}-show-more`,
-    dialogRoot: `${PREFIX}-dialog-root`,
-    endMessage: `${PREFIX}-end-message`
+    root: `${constants_1.PREFIX}-root`,
+    title: `${constants_1.PREFIX}-title`,
+    noResults: `${constants_1.PREFIX}-no-results`,
+    showMore: `${constants_1.PREFIX}-show-more`,
+    dialogRoot: `${constants_1.PREFIX}-dialog-root`,
+    endMessage: `${constants_1.PREFIX}-end-message`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    name: constants_1.PREFIX,
+    slot: 'Root'
 })(() => ({}));
 const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
+    name: constants_1.PREFIX,
+    slot: 'DialogRoot'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS User Suggestion Widget component. Learn about the available props and the CSS API.
@@ -72,7 +70,7 @@ function UserSuggestionWidget(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { autoHide = true, limit = 3, className, UserProps = {}, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, DialogProps = {} } = props, rest = tslib_1.__rest(props, ["autoHide", "limit", "className", "UserProps", "cacheStrategy", "onHeightChange", "onStateChange", "DialogProps"]);
     // STATE

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

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

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

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

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

@@ -529,11 +529,11 @@ function ContributionActionsMenu(props) {
     function handleConfirmedAction() {
         if (contributionObj && !isLoading && !currentActionLoading) {
             if (currentAction === ContributionsActionsMenu_1.DELETE_CONTRIBUTION) {
-                setCurrentActionLoading(ContributionsActionsMenu_1.RESTORE_CONTRIBUTION);
+                setCurrentActionLoading(ContributionsActionsMenu_1.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) => {
@@ -545,8 +545,8 @@ function ContributionActionsMenu(props) {
                 setCurrentActionLoading(ContributionsActionsMenu_1.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) => {
@@ -558,10 +558,10 @@ function ContributionActionsMenu(props) {
                 setCurrentActionLoading(ContributionsActionsMenu_1.MODERATE_CONTRIBUTION_HIDDEN);
                 performModerationContribution(Flagging_1.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) => {
@@ -573,10 +573,10 @@ function ContributionActionsMenu(props) {
                 setCurrentActionLoading(ContributionsActionsMenu_1.MODERATE_CONTRIBUTION_DELETED);
                 performModerationContribution(Flagging_1.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) => {
@@ -641,7 +641,7 @@ function ContributionActionsMenu(props) {
             : section === ContributionsActionsMenu_1.HIDE_CONTRIBUTION_SECTION
                 ? handleHideContribution
                 : handleDeleteContribution;
-        let value = ContributionsActionsMenu_1.FLAG_CONTRIBUTION_SECTION ? flagType : section === ContributionsActionsMenu_1.HIDE_CONTRIBUTION_SECTION ? hideType : deleteType;
+        let value = section === ContributionsActionsMenu_1.FLAG_CONTRIBUTION_SECTION ? flagType : section === ContributionsActionsMenu_1.HIDE_CONTRIBUTION_SECTION ? hideType : deleteType;
         return Flagging_1.REPORTS.map((report, index) => {
             return (react_1.default.createElement(material_1.MenuItem, { key: `${section}_${index}`, className: classes.subItem, disabled: isFlagging },
                 react_1.default.createElement(material_1.ListItemIcon, { classes: { root: classes.selectedIcon } }, value === report && react_1.default.createElement(Icon_1.default, { color: "secondary" }, "check")),

package/lib/esm/components/BroadcastMessages/BroadcastMessages.js

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import { FormattedMessage } from 'react-intl';
 import { MessageSkeleton } from './Skeleton';
 import Widget from '../Widget';
-const PREFIX = 'SCBroadcastMessages';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     boxLoadMore: `${PREFIX}-box-load-more`,
@@ -21,26 +21,8 @@ const classes = {
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.boxLoadMore}`]: {
-        textAlign: 'center',
-        '& > div': {
-            paddingBottom: theme.spacing(2)
-        },
-        marginBottom: theme.spacing(2)
-    },
-    [`& .${classes.avatarLoadMore}`]: {
-        width: theme.spacing(4),
-        height: theme.spacing(4),
-        marginRight: theme.spacing()
-    },
-    [`& .${classes.buttonLoadMore}`]: {
-        textTransform: 'capitalize',
-        marginLeft: -10
-    }
-}));
+    slot: 'Root'
+})(() => ({}));
 const PREFERENCES = [SCPreferences.LOGO_NAVBAR_LOGO_MOBILE, SCPreferences.TEXT_APPLICATION_NAME];
 /**
  * > API documentation for the Community-JS Broadcast Messages component. Learn about the available props and the CSS API.

package/lib/esm/components/BroadcastMessages/Message.js

@@ -9,12 +9,12 @@ import MarkRead from '../../shared/MarkRead';
 import Widget from '../Widget';
 import { SCBroadcastMessageTemplateType } from '../../types';
 import classNames from 'classnames';
-import { red } from '@mui/material/colors';
 import { http, Endpoints } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { Link, SCPreferences, SCPreferencesContext, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
-const PREFIX = 'SCBroadcastMessage';
+import { PREFIX } from './constants';
 const classes = {
+    root: `${PREFIX}-message-root`,
     header: `${PREFIX}-header`,
     title: `${PREFIX}-title`,
     media: `${PREFIX}-media`,
@@ -26,44 +26,8 @@ const classes = {
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%',
-    marginBottom: theme.spacing(2),
-    [`& .${classes.header} .MuiAvatar-img`]: {
-        objectFit: 'fill'
-    },
-    [`& .${classes.title}`]: {
-        padding: `${theme.spacing(2)}`,
-        paddingBottom: `${theme.spacing()}`,
-        paddingTop: 0
-    },
-    [`& .${classes.media}`]: {
-        paddingBottom: `${theme.spacing(2)}`
-    },
-    [`& .${classes.content}`]: {
-        padding: theme.spacing(2),
-        paddingTop: 0
-    },
-    [`& .${classes.listItemSnippet}`]: {
-        padding: '0px 5px',
-        alignItems: 'center'
-    },
-    [`& .${classes.listItemSnippetNew}`]: {
-        borderLeft: '2px solid red'
-    },
-    [`& .${classes.messageIconWrap}`]: {
-        minWidth: 'auto',
-        paddingRight: 10
-    },
-    [`& .${classes.messageIconSnippet}`]: {
-        backgroundColor: red[500],
-        color: '#FFF',
-        width: 30,
-        height: 30
-    }
-}));
+    slot: 'MessageRoot'
+})(() => ({}));
 const PREFERENCES = [SCPreferences.LOGO_NAVBAR_LOGO_MOBILE, SCPreferences.TEXT_APPLICATION_NAME];
 export default function Message(props) {
     // PROPS
@@ -84,7 +48,6 @@ export default function Message(props) {
     // HANDLERS
     /**
      * Handle dispose message
-     * @param res
      */
     const handleClose = () => {
         setClosing(true);
@@ -135,7 +98,7 @@ export default function Message(props) {
          * With a fade in transition show the Card (Widget)
          * Include also MarkRead component to
          */
-        return (React.createElement(Root, Object.assign({ id: id, className: className }, rest),
+        return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
             React.createElement(Fade, { in: open, unmountOnExit: true },
                 React.createElement(Box, null,
                     message.viewed_at === null && !disableMarkRead && (React.createElement(MarkRead, { endpoint: Endpoints.BroadcastMessagesMarkRead, data: { banner_ids: [message.id] }, callback: handleOnRead })),

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

@@ -9,17 +9,17 @@
 
  #### Component Name
 
- The name `SCBroadcastMessageSkeleton` can be used when providing style overrides in the theme.
+ The name `SCBroadcastMessages-message-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCBroadcastMessageSkeleton-root|Styles applied to the root element.|
- |header|.SCBroadcastMessageSkeleton-header|Styles applied to the header element.|
- |title|.SCBroadcastMessageSkeleton-title|Styles applied to the title element.|
- |media|.SCBroadcastMessageSkeleton-media|Styles applied to the media element.|
- |content|.SCBroadcastMessageSkeleton-content|Styles applied to the content section.|
+ |root|.SCBroadcastMessages-message-skeleton-root|Styles applied to the root element.|
+ |header|.SCBroadcastMessages-header|Styles applied to the header element.|
+ |title|.SCBroadcastMessages-title|Styles applied to the title element.|
+ |media|.SCBroadcastMessages-media|Styles applied to the media element.|
+ |content|.SCBroadcastMessages-content|Styles applied to the content section.|
  *
  */
 export declare function MessageSkeleton(props: any): JSX.Element;
@@ -34,13 +34,13 @@ export declare function MessageSkeleton(props: any): JSX.Element;
 
  #### Component Name
 
- The name `SCBroadcastMessagesSkeleton` can be used when providing style overrides in the theme.
+ The name `SCBroadcastMessages-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCBroadcastMessagesSkeleton-root|Styles applied to the root element.|
+ |root|.SCBroadcastMessages-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function BroadcastMessagesSkeleton(props: any): JSX.Element;

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

@@ -2,21 +2,18 @@ import React from 'react';
 import { Box, CardContent, CardHeader, Skeleton, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Widget from '../Widget';
-const MESSAGE_PREFIX = 'SCBroadcastMessageSkeleton';
+import { PREFIX } from './constants';
 const messageClasses = {
-    root: `${MESSAGE_PREFIX}-root`,
-    header: `${MESSAGE_PREFIX}-header`,
-    title: `${MESSAGE_PREFIX}-title`,
-    media: `${MESSAGE_PREFIX}-media`,
-    content: `${MESSAGE_PREFIX}-content`
+    root: `${PREFIX}-message-skeleton-root`,
+    header: `${PREFIX}-header`,
+    title: `${PREFIX}-title`,
+    media: `${PREFIX}-media`,
+    content: `${PREFIX}-content`
 };
-const MessageRoot = styled(Widget, {
-    name: MESSAGE_PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    marginBottom: theme.spacing(2)
-}));
+const MessageSkeletonRoot = styled(Widget, {
+    name: PREFIX,
+    slot: 'MessageSkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Broadcast Message Skeleton component. Learn about the available props and the CSS API.
 
@@ -28,22 +25,22 @@ const MessageRoot = styled(Widget, {
 
  #### Component Name
 
- The name `SCBroadcastMessageSkeleton` can be used when providing style overrides in the theme.
+ The name `SCBroadcastMessages-message-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCBroadcastMessageSkeleton-root|Styles applied to the root element.|
- |header|.SCBroadcastMessageSkeleton-header|Styles applied to the header element.|
- |title|.SCBroadcastMessageSkeleton-title|Styles applied to the title element.|
- |media|.SCBroadcastMessageSkeleton-media|Styles applied to the media element.|
- |content|.SCBroadcastMessageSkeleton-content|Styles applied to the content section.|
+ |root|.SCBroadcastMessages-message-skeleton-root|Styles applied to the root element.|
+ |header|.SCBroadcastMessages-header|Styles applied to the header element.|
+ |title|.SCBroadcastMessages-title|Styles applied to the title element.|
+ |media|.SCBroadcastMessages-media|Styles applied to the media element.|
+ |content|.SCBroadcastMessages-content|Styles applied to the content section.|
  *
  */
 export function MessageSkeleton(props) {
     const theme = useTheme();
-    return (React.createElement(MessageRoot, { className: classes.root },
+    return (React.createElement(MessageSkeletonRoot, { className: messageClasses.root },
         React.createElement(CardHeader, { className: messageClasses.header, avatar: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: React.createElement(Skeleton, { animation: "wave", variant: "rectangular", width: 60, height: 20 }) }),
         React.createElement(CardContent, { className: messageClasses.title },
             React.createElement(React.Fragment, null,
@@ -55,15 +52,13 @@ export function MessageSkeleton(props) {
                 React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%" }),
                 React.createElement(Skeleton, { animation: "wave", height: 10, width: 60 })))));
 }
-const PREFIX = 'SCBroadcastMessagesSkeleton';
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${PREFIX}-skeleton-root`
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Broadcast Messages Skeleton component. Learn about the available props and the CSS API.
 
@@ -75,13 +70,13 @@ const Root = styled(Box, {
 
  #### Component Name
 
- The name `SCBroadcastMessagesSkeleton` can be used when providing style overrides in the theme.
+ The name `SCBroadcastMessages-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCBroadcastMessagesSkeleton-root|Styles applied to the root element.|
+ |root|.SCBroadcastMessages-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function BroadcastMessagesSkeleton(props) {

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

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

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

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

package/lib/esm/components/CategoryHeader/CategoryHeader.js

@@ -8,7 +8,7 @@ import { useSCFetchCategory } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import CategoryFollowersButton from '../CategoryFollowersButton';
-const PREFIX = 'SCCategoryHeader';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     cover: `${PREFIX}-cover`,
@@ -21,9 +21,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 Category AppBar component. Learn about the available props and the CSS API.
  *

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

@@ -9,15 +9,13 @@
 
  #### Component Name
 
- The name `SCCategoryHeaderSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCategoryHeader-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCategoryHeaderSkeleton-root|Styles applied to the root element.|
- |avatar|.SCCategoryHeaderSkeleton-avatar|Styles applied to the avatar element.|
- |username|.SCCategoryHeaderSkeleton-username|Styles applied to the username element.|
+ |root|.SCCategoryHeader-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function CategoryHeaderSkeleton(): JSX.Element;

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

@@ -2,32 +2,14 @@ import React from 'react';
 import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
-const PREFIX = 'SCCategoryHeaderSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`
+    root: `${PREFIX}-skeleton-root`
 };
 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 Category AppBar Skeleton component. Learn about the available props and the CSS API.
 
@@ -39,15 +21,13 @@ const Root = styled(Box, {
 
  #### Component Name
 
- The name `SCCategoryHeaderSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCategoryHeader-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCategoryHeaderSkeleton-root|Styles applied to the root element.|
- |avatar|.SCCategoryHeaderSkeleton-avatar|Styles applied to the avatar element.|
- |username|.SCCategoryHeaderSkeleton-username|Styles applied to the username element.|
+ |root|.SCCategoryHeader-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function CategoryHeaderSkeleton() {

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

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

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

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

package/lib/esm/components/CategoryTrendingFeedWidget/CategoryTrendingFeedWidget.js

@@ -18,7 +18,7 @@ import { useThemeProps } from '@mui/system';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { Link, SCCache, SCPreferences, SCRoutes, useSCFetchCategory, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
-const PREFIX = 'SCCategoryTrendingFeedWidget';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -29,13 +29,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 Trending Feed Widget component. Learn about the available props and the CSS API.

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

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

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

@@ -4,14 +4,15 @@ import List from '@mui/material/List';
 import { styled } from '@mui/material/styles';
 import FeedObjectSkeleton from '../FeedObject/Skeleton';
 import { CardContent } from '@mui/material';
-const PREFIX = 'SCCategoryTrendingFeedWidgetSkeleton';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     list: `${PREFIX}-list`
 };
-const Root = styled(Widget)(({ theme }) => ({
-    marginBottom: theme.spacing(2)
-}));
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Trending Feed Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -23,13 +24,14 @@ const Root = styled(Widget)(({ theme }) => ({
 
  #### Component Name
 
- The name `SCCategoryTrendingFeedWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCategoryTrendingFeedWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCategoryTrendingFeedWidgetSkeleton-root|Styles applied to the root element.|
+ |root|.SCCategoryTrendingFeedWidget-skeleton-root|Styles applied to the root element.|
+ |list|.SCCategoryTrendingFeedWidget-list|Styles applied to the list element.|
  *
  */
 export default function CategoryTrendingFeedWidgetSkeleton(props) {

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

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

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

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

package/lib/esm/components/CategoryTrendingUsersWidget/CategoryTrendingUsersWidget.js

@@ -17,7 +17,7 @@ import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { CacheStrategies, isInteger, Logger } from '@selfcommunity/utils';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
 import { SCOPE_SC_UI } from '../../constants/Errors';
-const PREFIX = 'SCCategoryTrendingUsersWidget';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     title: `${PREFIX}-title`,
@@ -28,14 +28,12 @@ const classes = {
 };
 const Root = styled(Widget, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
-})(({ theme }) => ({}));
+    slot: 'DialogRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Trending Users Widget component. Learn about the available props and the CSS API.
  *

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

@@ -10,14 +10,14 @@ import { WidgetProps } from '../Widget';
 
  #### Component Name
 
- The name `SCCategoryTrendingPeopleWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCategoryTrendingPeopleWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCategoryTrendingPeopleWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCCategoryTrendingPeopleWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCCategoryTrendingPeopleWidget-skeleton-root|Styles applied to the root element.|
+ |list|.SCCategoryTrendingPeopleWidget-list|Styles applied to the list element.|
  *
  */
 export default function CategoryTrendingPeopleWidgetSkeleton(props: WidgetProps): JSX.Element;