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

package/lib/cjs/components/Notification/UserBlocked/UserBlocked.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const colors_1 = require("@mui/material/colors");
 const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const types_1 = require("@selfcommunity/types");
 const react_intl_1 = require("react-intl");
@@ -13,6 +12,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const types_2 = require("../../../types");
 const system_1 = require("@mui/system");
 const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/NotificationItem"));
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     accountBlocked: {
         id: 'ui.notification.userBlocked.accountBlocked',
@@ -23,31 +23,17 @@ const messages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.notification.userBlocked.accountReactivated'
     }
 });
-const PREFIX = 'SCUserBlockedNotification';
 const classes = {
-    root: `${PREFIX}-root`,
-    unBlockedIcon: `${PREFIX}-unblocked-icon`,
-    blockedIcon: `${PREFIX}-blocked-icon`,
-    blockedText: `${PREFIX}-blocked-text`,
-    activeAt: `${PREFIX}-active-at`
+    root: `${constants_1.PREFIX}-user-blocked-root`,
+    unBlockedIcon: `${constants_1.PREFIX}-unblocked-icon`,
+    blockedIcon: `${constants_1.PREFIX}-blocked-icon`,
+    blockedText: `${constants_1.PREFIX}-blocked-text`,
+    activeAt: `${constants_1.PREFIX}-active-at`
 };
 const Root = (0, styles_1.styled)(NotificationItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.unBlockedIcon}`]: {
-        backgroundColor: colors_1.green[500],
-        color: '#FFF'
-    },
-    [`& .${classes.blockedIcon}`]: {
-        backgroundColor: colors_1.red[500],
-        color: '#FFF'
-    },
-    [`& .${classes.blockedText}`]: {
-        color: theme.palette.text.primary
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'UserBlockedRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type user blocked
  * @param inProps
@@ -57,7 +43,7 @@ function UserBlockedNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject = null, id = `n_${props.notificationObject['sid']}`, template = types_2.SCNotificationObjectTemplateType.DETAIL, className } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "template", "className"]);
     // INTL
@@ -65,7 +51,7 @@ function UserBlockedNotification(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(material_1.Avatar, { variant: "circular", classes: {
+    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(material_1.Avatar, { variant: "circular", classes: {
                 root: (0, classnames_1.default)(classes.unBlockedIcon, {
                     [classes.blockedIcon]: notificationObject.type === types_1.SCNotificationTypologyType.BLOCKED_USER
                 })

package/lib/cjs/components/Notification/UserConnection/UserConnection.js

@@ -14,6 +14,7 @@ const system_1 = require("@mui/system");
 const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/NotificationItem"));
 const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../shared/UserDeletedSnackBar"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar"));
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     requestConnection: {
         id: 'ui.notification.userConnection.requestConnection',
@@ -24,29 +25,17 @@ const messages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.notification.userConnection.acceptConnection'
     }
 });
-const PREFIX = 'SCUserConnectionNotification';
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`,
-    connectionText: `${PREFIX}-connection-text`,
-    activeAt: `${PREFIX}-active-at`
+    root: `${constants_1.PREFIX}-user-connection-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    username: `${constants_1.PREFIX}-username`,
+    connectionText: `${constants_1.PREFIX}-connection-text`,
+    activeAt: `${constants_1.PREFIX}-active-at`
 };
 const Root = (0, styles_1.styled)(NotificationItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.username}`]: {
-        fontWeight: 700,
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.connectionText}`]: {
-        color: theme.palette.text.primary
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'UserConnectionRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of connection accept/request
  * @param inProps
@@ -56,7 +45,7 @@ function UserConnectionNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject = null, id = `n_${props.notificationObject['sid']}`, className, template = types_2.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template"]);
     // CONTEXT
@@ -71,7 +60,7 @@ function UserConnectionNotification(inProps) {
      * Renders root object
      */
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!userConnection.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, userConnection) }), { onClick: userConnection.deleted ? () => setOpenAlert(true) : null }),
+        react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!userConnection.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, userConnection) }), { onClick: userConnection.deleted ? () => setOpenAlert(true) : null }),
                 react_1.default.createElement(UserAvatar_1.default, { hide: !userConnection.community_badge, smaller: true },
                     react_1.default.createElement(material_1.Avatar, { alt: userConnection.username, variant: "circular", src: userConnection.avatar, classes: { root: classes.avatar } }))), primary: react_1.default.createElement(material_1.Typography, { component: "div", color: "inherit", className: classes.connectionText },
                 react_1.default.createElement(react_core_1.Link, Object.assign({}, (!userConnection.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, userConnection) }), { onClick: userConnection.deleted ? () => setOpenAlert(true) : null, className: classes.username }), userConnection.username),

package/lib/cjs/components/Notification/UserFollow/UserFollow.js

@@ -13,36 +13,24 @@ const system_1 = require("@mui/system");
 const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/NotificationItem"));
 const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../shared/UserDeletedSnackBar"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar"));
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     followUser: {
         id: 'ui.notification.userFollow.followUser',
         defaultMessage: 'ui.notification.userFollow.followUser'
     }
 });
-const PREFIX = 'SCUserFollowNotification';
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`,
-    followText: `${PREFIX}-follow-text`,
-    activeAt: `${PREFIX}-active-at`
+    root: `${constants_1.PREFIX}-user-follow-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    username: `${constants_1.PREFIX}-username`,
+    followText: `${constants_1.PREFIX}-follow-text`,
+    activeAt: `${constants_1.PREFIX}-active-at`
 };
 const Root = (0, styles_1.styled)(NotificationItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%',
-    [`& .${classes.username}`]: {
-        fontWeight: 700,
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.followText}`]: {
-        color: theme.palette.text.primary
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'UserFollowRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type user follow
  * @param inProps
@@ -52,7 +40,7 @@ function UserFollowNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = types_1.SCNotificationObjectTemplateType.DETAIL } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template"]);
     // CONTEXT
@@ -65,7 +53,7 @@ function UserFollowNotification(inProps) {
      * Renders root object
      */
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!notificationObject.follower.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null }),
+        react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!notificationObject.follower.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null }),
                 react_1.default.createElement(UserAvatar_1.default, { hide: !notificationObject.follower.community_badge, smaller: true },
                     react_1.default.createElement(material_1.Avatar, { alt: notificationObject.follower.username, variant: "circular", src: notificationObject.follower.avatar, classes: { root: classes.avatar } }))), primary: react_1.default.createElement(material_1.Typography, { component: "div", color: "inherit", className: classes.followText },
                 react_1.default.createElement(react_core_1.Link, Object.assign({}, (!notificationObject.follower.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.follower) }), { onClick: notificationObject.follower.deleted ? () => setOpenAlert(true) : null, className: classes.username }), notificationObject.follower.username),

package/lib/cjs/components/Notification/VoteUp/VoteUp.js

@@ -14,42 +14,25 @@ const system_1 = require("@mui/system");
 const NotificationItem_1 = tslib_1.__importDefault(require("../../../shared/NotificationItem"));
 const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../shared/UserDeletedSnackBar"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar"));
+const constants_1 = require("../constants");
 const messages = (0, react_intl_1.defineMessages)({
     appreciated: {
         id: 'ui.notification.voteUp.appreciated',
         defaultMessage: 'ui.notification.voteUp.appreciated'
     }
 });
-const PREFIX = 'SCVoteUpNotification';
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`,
-    voteUpText: `${PREFIX}-vote-up-text`,
-    activeAt: `${PREFIX}-active-at`,
-    contributionText: `${PREFIX}-contribution-text`
+    root: `${constants_1.PREFIX}-vote-up-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    username: `${constants_1.PREFIX}-username`,
+    voteUpText: `${constants_1.PREFIX}-vote-up-text`,
+    activeAt: `${constants_1.PREFIX}-active-at`,
+    contributionText: `${constants_1.PREFIX}-contribution-text`
 };
 const Root = (0, styles_1.styled)(NotificationItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%',
-    [`& .${classes.username}`]: {
-        fontWeight: 700,
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    },
-    [`& .${classes.voteUpText}`]: {
-        color: theme.palette.text.primary
-    },
-    [`& .${classes.contributionText}`]: {
-        '&:hover': {
-            textDecoration: 'underline'
-        }
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'VoteUpRoot'
+})(() => ({}));
 /**
  * This component render the content of the notification of type vote up
  * @param inProps
@@ -59,7 +42,7 @@ function VoteUpNotification(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { notificationObject, id = `n_${props.notificationObject['sid']}`, className, template = notification_1.SCNotificationObjectTemplateType.DETAIL, index, onVote, loadingVote } = props, rest = tslib_1.__rest(props, ["notificationObject", "id", "className", "template", "index", "onVote", "loadingVote"]);
     // CONTEXT
@@ -75,7 +58,7 @@ function VoteUpNotification(inProps) {
      * Renders root object
      */
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }),
+        react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, `${constants_1.PREFIX}-${template}`), template: template, isNew: notificationObject.is_new, disableTypography: true, image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null }),
                 react_1.default.createElement(UserAvatar_1.default, { hide: !notificationObject.user.community_badge, smaller: true },
                     react_1.default.createElement(material_1.Avatar, { alt: notificationObject.user.username, variant: "circular", src: notificationObject.user.avatar, classes: { root: classes.avatar } }))), primary: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(react_core_1.Link, Object.assign({}, (!notificationObject.user.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, notificationObject.user) }), { onClick: notificationObject.user.deleted ? () => setOpenAlert(true) : null, className: classes.username }), notificationObject.user.username),

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

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

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

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

package/lib/cjs/components/PlatformWidget/PlatformWidget.js

@@ -12,16 +12,15 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const system_1 = require("@mui/system");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
-const PREFIX = 'SCPlatformWidget';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    title: `${PREFIX}-title`
+    root: `${constants_1.PREFIX}-root`,
+    title: `${constants_1.PREFIX}-title`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PlatformWidget component. Learn about the available props and the CSS API.
  *
@@ -55,7 +54,7 @@ function PlatformWidget(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { autoHide, className, onHeightChange, onStateChange } = props, rest = tslib_1.__rest(props, ["autoHide", "className", "onHeightChange", "onStateChange"]);
     // CONTEXT

package/lib/cjs/components/PlatformWidget/Skeleton.d.ts

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

package/lib/cjs/components/PlatformWidget/Skeleton.js

@@ -4,15 +4,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Skeleton_1 = require("../Skeleton");
 const styles_1 = require("@mui/material/styles");
-const PREFIX = 'SCPlatformWidgetSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
 const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Platform Skeleton component. Learn about the available props and the CSS API.
 
@@ -24,13 +23,13 @@ const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
 
  #### Component Name
 
- The name `SCPlatformWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPlatformWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPlatformWidgetSkeleton-root|Styles applied to the root element.|
+ |root|.SCPlatformWidget-skeleton-root|Styles applied to the root element.|
  *
  */
 function PlatformWidgetSkeleton() {

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

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

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

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

package/lib/cjs/components/PollSuggestionWidget/PollSnippet/PollSnippet.d.ts

@@ -30,16 +30,17 @@ export interface PollSnippetProps {
  import {PollSnippet} from '@selfcommunity/react-ui';
  ```
  #### Component Name
- The name `SCPollSnippet` can be used when providing style overrides in the theme.
+ The name `SCPollSuggestionWidget-poll-snippet-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPollSnippet-root|Styles applied to the root element.|
- |title|.SCPollSnippet-title|Styles applied to the title element.|
- |action|.SCPollSnippet-actions|Styles applied to action section.|
- |seeItem|.SCPollSnippet-see-item|Styles applied to the see item button element.|
+ |root|.SCPollSuggestionWidget-poll-snippet-root|Styles applied to the root element.|
+ |avatar|.SCPollSuggestionWidget-avatar|Styles applied to the avatar element.|
+ |username|.SCPollSuggestionWidget-username|Styles applied to the username element.|
+ |title|.SCPollSuggestionWidget-title|Styles applied to the title element.|
+ |activityAt|.SCPollSuggestionWidget-activity-at|Styles applied to activity section.|
 
  * @param inProps
  */

package/lib/cjs/components/PollSuggestionWidget/PollSnippet/PollSnippet.js

@@ -13,42 +13,18 @@ const DateTimeAgo_1 = tslib_1.__importDefault(require("../../../shared/DateTimeA
 const BaseItem_1 = tslib_1.__importDefault(require("../../../shared/BaseItem"));
 const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../../shared/UserDeletedSnackBar"));
 const UserAvatar_1 = tslib_1.__importDefault(require("../../../shared/UserAvatar"));
-const PREFIX = 'SCPollSnippet';
+const constants_1 = require("../constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    username: `${PREFIX}-username`,
-    title: `${PREFIX}-title`,
-    activityAt: `${PREFIX}-activity-at`
+    root: `${constants_1.PREFIX}-poll-snippet-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    username: `${constants_1.PREFIX}-username`,
+    title: `${constants_1.PREFIX}-title`,
+    activityAt: `${constants_1.PREFIX}-activity-at`
 };
 const Root = (0, styles_1.styled)(BaseItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`&.${classes.root} > div`]: {
-        alignItems: 'flex-start',
-        paddingTop: theme.spacing(1)
-    },
-    '& .SCBaseItem-text': {
-        marginTop: 0
-    },
-    [`& .${classes.username}`]: {
-        color: theme.palette.text.primary,
-        fontWeight: theme.typography.fontWeightBold,
-        textDecoration: 'none'
-    },
-    [`& .${classes.title}`]: {},
-    [`& .${classes.avatar}`]: {
-        width: theme.selfcommunity.user.avatar.sizeMedium,
-        height: theme.selfcommunity.user.avatar.sizeMedium
-    },
-    [`& .${classes.activityAt}`]: {
-        textDecoration: 'none',
-        color: 'inherit',
-        marginTop: 3
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'PollSnippetRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PollSnippet component. Learn about the available props and the CSS API.
  *
@@ -59,16 +35,17 @@ const Root = (0, styles_1.styled)(BaseItem_1.default, {
  import {PollSnippet} from '@selfcommunity/react-ui';
  ```
  #### Component Name
- The name `SCPollSnippet` can be used when providing style overrides in the theme.
+ The name `SCPollSuggestionWidget-poll-snippet-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPollSnippet-root|Styles applied to the root element.|
- |title|.SCPollSnippet-title|Styles applied to the title element.|
- |action|.SCPollSnippet-actions|Styles applied to action section.|
- |seeItem|.SCPollSnippet-see-item|Styles applied to the see item button element.|
+ |root|.SCPollSuggestionWidget-poll-snippet-root|Styles applied to the root element.|
+ |avatar|.SCPollSuggestionWidget-avatar|Styles applied to the avatar element.|
+ |username|.SCPollSuggestionWidget-username|Styles applied to the username element.|
+ |title|.SCPollSuggestionWidget-title|Styles applied to the title element.|
+ |activityAt|.SCPollSuggestionWidget-activity-at|Styles applied to activity section.|
 
  * @param inProps
  */
@@ -76,7 +53,7 @@ function PollSnippet(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { feedObj = null, className = null, autoHide = false } = props, rest = tslib_1.__rest(props, ["feedObj", "className", "autoHide"]);
     // CONTEXT

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

@@ -61,6 +61,7 @@ export interface PollSuggestionWidgetProps extends VirtualScrollerItemProps, Wid
  |showMore|.SCPollSuggestionWidget-show-more|Styles applied to show more button element.|
  |dialogRoot|.SCPollSuggestionWidget-dialog-root|Styles applied to the root dialog element.|
  |endMessage|.SCPollSuggestionWidget-end-message|Styles applied to the end message element.|
+ |pollSnippet|.SCPollSuggestionWidget-poll-snippet|Styles applied to the poll snippet element.|
 
  *
  * @param inProps

package/lib/cjs/components/PollSuggestionWidget/PollSuggestionWidget.js

@@ -19,25 +19,24 @@ const system_1 = require("@mui/system");
 const PollSnippet_1 = tslib_1.__importStar(require("./PollSnippet"));
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const widget_1 = require("../../utils/widget");
-const PREFIX = 'SCPollSuggestionWidget';
+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`,
+    pollSnippet: `${constants_1.PREFIX}-poll-snippet`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'DialogRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Poll Suggestion Widget component. Learn about the available props and the CSS API.
  *
@@ -65,6 +64,7 @@ const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
  |showMore|.SCPollSuggestionWidget-show-more|Styles applied to show more button element.|
  |dialogRoot|.SCPollSuggestionWidget-dialog-root|Styles applied to the root dialog element.|
  |endMessage|.SCPollSuggestionWidget-end-message|Styles applied to the end message element.|
+ |pollSnippet|.SCPollSuggestionWidget-poll-snippet|Styles applied to the poll snippet element.|
 
  *
  * @param inProps
@@ -73,7 +73,7 @@ function PollSuggestionWidget(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { autoHide = true, limit = 3, PollSnippetProps = {}, className, cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY, onHeightChange, onStateChange, DialogProps = {} } = props, rest = tslib_1.__rest(props, ["autoHide", "limit", "PollSnippetProps", "className", "cacheStrategy", "onHeightChange", "onStateChange", "DialogProps"]);
     // STATE
@@ -169,14 +169,14 @@ function PollSuggestionWidget(inProps) {
         !state.count ? (react_1.default.createElement(material_1.Typography, { className: classes.noResults, variant: "body2" },
             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.noResults", defaultMessage: "ui.pollSuggestionWidget.noResults" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(List_1.default, null, state.results.slice(0, state.visibleItems).map((obj) => (react_1.default.createElement(material_1.ListItem, { key: obj.id },
-                react_1.default.createElement(PollSnippet_1.default, Object.assign({ elevation: 0, feedObj: obj }, PollSnippetProps)))))),
+                react_1.default.createElement(PollSnippet_1.default, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)))))),
             state.count > state.visibleItems && (react_1.default.createElement(material_1.Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.button.showAll", defaultMessage: "ui.pollSuggestionWidget.button.showAll" }))))),
         openDialog && (react_1.default.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.pollSuggestionWidget.title", id: "ui.pollSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
             react_1.default.createElement(InfiniteScroll_1.default, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: react_1.default.createElement(PollSnippet_1.PollSnippetSkeleton, Object.assign({ elevation: 0 }, PollSnippetProps)), height: isMobile ? '100%' : 400, endMessage: react_1.default.createElement(material_1.Typography, { className: classes.endMessage },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.noMoreResults", defaultMessage: "ui.pollSuggestionWidget.noMoreResults" })) },
                 react_1.default.createElement(List_1.default, null, state.results.map((obj) => (react_1.default.createElement(material_1.ListItem, { key: obj.id },
-                    react_1.default.createElement(PollSnippet_1.default, Object.assign({ elevation: 0, feedObj: obj }, PollSnippetProps)))))))))));
+                    react_1.default.createElement(PollSnippet_1.default, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)))))))))));
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest), content));
 }
 exports.default = PollSuggestionWidget;

package/lib/cjs/components/PollSuggestionWidget/Skeleton.d.ts

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

package/lib/cjs/components/PollSuggestionWidget/Skeleton.js

@@ -7,12 +7,15 @@ const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const material_1 = require("@mui/material");
 const PollSnippet_1 = require("./PollSnippet");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
-const PREFIX = 'SCPollSuggestionWidgetSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    list: `${PREFIX}-list`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(Widget_1.default)(({ theme }) => ({}));
+const Root = (0, styles_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Poll Suggestion Widget Skeleton component. Learn about the available props and the CSS API.
 
@@ -24,14 +27,14 @@ const Root = (0, styles_1.styled)(Widget_1.default)(({ theme }) => ({}));
 
  #### Component Name
 
- The name `SCPollSuggestionWidgetSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPollSuggestionWidget-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPollSuggestionWidgetSkeleton-root|Styles applied to the root element.|
- |list|.SCPollSuggestionWidgetSkeleton-list|Styles applied to the list element.|
+ |root|.SCPollSuggestionWidget-skeleton-root|Styles applied to the root element.|
+ |list|.SCPollSuggestionWidget-list|Styles applied to the list element.|
  *
  */
 function PollSuggestionWidgetSkeleton(props) {

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

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

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

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