@selfcommunity/react-ui 0.7.56-alpha.0 → 0.8.0-alpha.1

package/lib/cjs/components/OnBoardingWidget/Steps/Profile/Profile.d.ts

@@ -0,0 +1,25 @@
+import { SCUserType } from '@selfcommunity/types';
+import { SCUserProfileFields } from '../../../../types/user';
+export interface ProfileProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * User fields to display in the profile
+     * @default [real_name, date_joined, date_of_birth, website, description, bio]
+     */
+    fields?: SCUserProfileFields[];
+    /**
+     * User Object
+     * @default null
+     */
+    user?: SCUserType;
+    /**
+     * Callback triggered on complete action click
+     * @default null
+     */
+    onCompleteAction: () => void;
+}
+export default function Profile(inProps: ProfileProps): JSX.Element;

package/lib/cjs/components/OnBoardingWidget/Steps/Profile/Profile.js

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const constants_1 = require("../../constants");
+const material_1 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const PublicInfo_1 = tslib_1.__importDefault(require("../../../UserProfileEdit/Section/PublicInfo"));
+const react_core_1 = require("@selfcommunity/react-core");
+const UserAvatar_1 = tslib_1.__importDefault(require("../../../../shared/UserAvatar"));
+const ChangePicture_1 = tslib_1.__importDefault(require("../../../ChangePicture"));
+const ChangeCover_1 = tslib_1.__importDefault(require("../../../ChangeCover"));
+const UserProfile_1 = require("../../../../constants/UserProfile");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const classes = {
+    root: `${constants_1.PREFIX}-profile-root`,
+    title: `${constants_1.PREFIX}-profile-title`,
+    icon: `${constants_1.PREFIX}-profile-icon`,
+    cover: `${constants_1.PREFIX}-profile-cover`,
+    avatar: `${constants_1.PREFIX}-profile-avatar`,
+    changePicture: `${constants_1.PREFIX}-profile-change-picture`,
+    changeCover: `${constants_1.PREFIX}-profile-change-cover`,
+    publicInfo: `${constants_1.PREFIX}-profile-public-info`
+};
+const Root = (0, styles_1.styled)(Box_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'ProfileRoot'
+})(() => ({}));
+const DrawerRoot = (0, styles_1.styled)(material_1.Drawer, {
+    name: constants_1.PREFIX,
+    slot: 'ProfileDrawerRoot'
+})(() => ({}));
+function Profile(inProps) {
+    var _a;
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, fields = [...UserProfile_1.DEFAULT_FIELDS], user = null, onCompleteAction } = props, rest = tslib_1.__rest(props, ["className", "fields", "user", "onCompleteAction"]);
+    // STATE
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    // PREFERENCES
+    const scPreferences = (0, react_core_1.useSCPreferences)();
+    // CONTEXT
+    const scContext = (0, react_core_1.useSCContext)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    // HOOKS
+    const { scUser, setSCUser } = (0, react_core_1.useSCFetchUser)({ id: (_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.id, user });
+    const hasBadge = scUser && scUser.community_badge;
+    // HANDLERS
+    const handleOpen = (0, react_1.useCallback)((event) => {
+        setAnchorEl(event.currentTarget);
+    }, []);
+    const handleClose = (0, react_1.useCallback)(() => {
+        setAnchorEl(null);
+    }, []);
+    /**
+     * Handles Change Avatar
+     * If avatar === null reset the avatar with auto-generated image
+     * @param avatar
+     */
+    function handleChangeAvatar(avatar) {
+        if (avatar) {
+            setSCUser(Object.assign({}, scUser, { avatar: avatar.avatar }));
+        }
+        else {
+            setSCUser(Object.assign({}, scUser, { avatar: `${scContext.settings.portal}/api/v2/avatar/${scUser.id}` }));
+        }
+        onCompleteAction();
+    }
+    const _backgroundCover = Object.assign({}, ((scUser === null || scUser === void 0 ? void 0 : scUser.cover)
+        ? { background: `url('${scUser.cover}') center / cover` }
+        : { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
+    /**
+     * Handles Change Cover
+     * Only if scUser.id === scUserContext.user.id
+     * @param cover
+     */
+    function handleChangeCover(cover) {
+        setSCUser(Object.assign({}, scUser, { cover: cover }));
+        onCompleteAction();
+    }
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", className: classes.title, alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.profile", defaultMessage: "ui.onBoardingWidget.profile" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ alignSelf: "self-start" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.summary", defaultMessage: "ui.onBoardingWidget.step.profile.summary" }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", color: "primary", onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.onBoardingWidget.step.profile.button", defaultMessage: "ui.onBoardingWidget.step.profile.button" }) })), (0, jsx_runtime_1.jsxs)(DrawerRoot, Object.assign({ anchor: "right", open: Boolean(anchorEl), onClose: handleClose }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.icon, onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "close" }) })), (0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !hasBadge }, { children: (0, jsx_runtime_1.jsx)("img", { src: (scUser === null || scUser === void 0 ? void 0 : scUser.avatar) ? scUser.avatar : '' }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangePicture_1.default, { iconButton: true, onChange: handleChangeAvatar, className: classes.changePicture }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.changeCover }, { children: (0, jsx_runtime_1.jsx)(ChangeCover_1.default, { onChange: handleChangeCover }) }))] })] })), (0, jsx_runtime_1.jsx)(Box_1.default, Object.assign({ className: classes.publicInfo }, { children: (0, jsx_runtime_1.jsx)(PublicInfo_1.default, { fields: fields, onEditSuccess: onCompleteAction }) }))] }))] })));
+}
+exports.default = Profile;

package/lib/cjs/components/OnBoardingWidget/Steps/Profile/index.d.ts

@@ -0,0 +1,3 @@
+import Profile, { ProfileProps } from './Profile';
+export { ProfileProps };
+export default Profile;

package/lib/cjs/components/OnBoardingWidget/Steps/Profile/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const Profile_1 = tslib_1.__importDefault(require("./Profile"));
+exports.default = Profile_1.default;

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

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

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

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

package/lib/cjs/components/OnBoardingWidget/index.d.ts

@@ -0,0 +1,4 @@
+import OnBoardingWidget, { OnBoardingWidgetProps } from './OnBoardingWidget';
+import OnBoardingWidgetSkeleton from './Skeleton';
+export default OnBoardingWidget;
+export { OnBoardingWidgetProps, OnBoardingWidgetSkeleton };

package/lib/cjs/components/OnBoardingWidget/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OnBoardingWidgetSkeleton = void 0;
+const tslib_1 = require("tslib");
+const OnBoardingWidget_1 = tslib_1.__importDefault(require("./OnBoardingWidget"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+exports.OnBoardingWidgetSkeleton = Skeleton_1.default;
+exports.default = OnBoardingWidget_1.default;

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
@@ -197,40 +198,36 @@ function PlatformWidget(inProps) {
         ...((isAdmin || isEditor) && !hideConsoleAction
             ? [
                 {
-                    render: (react_1.default.createElement(material_1.Button, { variant: "outlined", size: "small", onClick: () => fetchPlatform('') },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }))),
-                    title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }),
-                    content: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.adm.desc", defaultMessage: "ui.platformWidget.adm.desc" })
+                    render: ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", onClick: () => fetchPlatform('') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }) }))),
+                    title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.adm", defaultMessage: "ui.platformWidget.adm" }),
+                    content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.adm.desc", defaultMessage: "ui.platformWidget.adm.desc" })
                 }
             ]
             : []),
         ...((isAdmin || isModerator) && !hideModerationAction
             ? [
                 {
-                    render: (react_1.default.createElement(material_1.Button, { variant: "outlined", size: "small", onClick: () => fetchPlatform('/moderation/flags/') },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }))),
-                    title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }),
-                    content: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.mod.desc", defaultMessage: "ui.platformWidget.mod.desc" })
+                    render: ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", onClick: () => fetchPlatform('/moderation/flags/') }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }) }))),
+                    title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.mod", defaultMessage: "ui.platformWidget.mod" }),
+                    content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.mod.desc", defaultMessage: "ui.platformWidget.mod.desc" })
                 }
             ]
             : []),
         ...(isAdmin && isCommunityOwner && !hideHubAction
             ? [
                 {
-                    render: (react_1.default.createElement(material_1.Button, { variant: "outlined", size: "small", component: react_core_1.Link, to: isStage ? constants_1.HUB_STAGE : constants_1.HUB_PROD, target: "_blank" },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }))),
-                    title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }),
-                    content: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.hub.desc", defaultMessage: "ui.platformWidget.hub.desc" })
+                    render: ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: isStage ? constants_1.HUB_STAGE : constants_1.HUB_PROD, target: "_blank" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }) }))),
+                    title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.hub", defaultMessage: "ui.platformWidget.hub" }),
+                    content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.hub.desc", defaultMessage: "ui.platformWidget.hub.desc" })
                 }
             ]
             : []),
         ...(isCommunityOwner && !hideContactUsAction
             ? [
                 {
-                    render: (react_1.default.createElement(material_1.Button, { variant: "outlined", size: "small", component: react_core_1.Link, to: isStage ? constants_1.CONTACT_STAGE : constants_1.CONTACT_PROD, target: "_blank" },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }))),
-                    title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }),
-                    content: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.contactUs.desc", defaultMessage: "ui.platformWidget.contactUs.desc" })
+                    render: ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "outlined", size: "small", component: react_core_1.Link, to: isStage ? constants_1.CONTACT_STAGE : constants_1.CONTACT_PROD, target: "_blank" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }) }))),
+                    title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.contactUs", defaultMessage: "ui.platformWidget.contactUs" }),
+                    content: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.contactUs.desc", defaultMessage: "ui.platformWidget.contactUs.desc" })
                 }
             ]
             : []),
@@ -299,49 +296,19 @@ function PlatformWidget(inProps) {
     /**
      * Render tutorial
      */
-    const tutorial = (react_1.default.createElement(material_1.Grid, { container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial },
-        !isTutorialOpen && (react_1.default.createElement(material_1.Grid, { item: true, xs: "auto", alignItems: "center", justifyContent: "center" },
-            react_1.default.createElement(material_1.IconButton, { size: "medium", onClick: handleOpenTutorial },
-                react_1.default.createElement(material_1.Icon, null, "info")))),
-        react_1.default.createElement(material_1.Collapse, { in: isTutorialOpen, className: classes.tutorialContent }, isTutorialOpen && (react_1.default.createElement(material_1.Grid, { item: true, xs: "auto" },
-            react_1.default.createElement(material_1.Typography, { variant: 'body2', className: classes.tutorialTitle, component: 'div' },
-                react_1.default.createElement(Grow_1.default, { in: true, timeout: 1000 },
-                    react_1.default.createElement("span", null, actions[tutorialIndex].title)),
-                react_1.default.createElement(material_1.IconButton, { size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial },
-                    react_1.default.createElement(material_1.Icon, null, "close"))),
-            react_1.default.createElement(Grow_1.default, { in: true, timeout: 1200 },
-                react_1.default.createElement(material_1.Typography, { variant: 'body2', className: classes.tutorialDesc }, actions[tutorialIndex].content)),
-            react_1.default.createElement(material_1.Divider, { className: classes.divider }),
-            react_1.default.createElement(material_1.Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls },
-                react_1.default.createElement(material_1.Button, { variant: "text", size: "small", onClick: handlePrevious, className: (0, classnames_1.default)(classes.btnStep, classes.btnPreviousStep) }, tutorialIndex === 0 ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" }))),
-                react_1.default.createElement(material_1.Typography, { component: 'div' },
-                    tutorialIndex + 1,
-                    "/",
-                    actions.length),
-                react_1.default.createElement(material_1.Button, { variant: "contained", size: "small", color: "primary", onClick: handleNext, className: (0, classnames_1.default)(classes.btnStep, classes.btnNextStep) }, tutorialIndex === actions.length - 1 ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })))))))));
+    const tutorial = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.tutorial }, { children: [!isTutorialOpen && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", alignItems: "center", justifyContent: "center" }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "medium", onClick: handleOpenTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "info" }) })) }))), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: isTutorialOpen, className: classes.tutorialContent }, { children: isTutorialOpen && ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: "auto" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialTitle, component: 'div' }, { children: [(0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: true, timeout: 1000 }, { children: (0, jsx_runtime_1.jsx)("span", { children: actions[tutorialIndex].title }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: 'small', className: classes.tutorialTitleClose, onClick: handleCloseTutorial }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(Grow_1.default, Object.assign({ in: true, timeout: 1200 }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'body2', className: classes.tutorialDesc }, { children: actions[tutorialIndex].content })) })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.divider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2, className: classes.tutorialControls }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handlePrevious, className: (0, classnames_1.default)(classes.btnStep, classes.btnPreviousStep) }, { children: tutorialIndex === 0 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.skip", defaultMessage: "ui.platformWidget.tutorial.skip" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.previous", defaultMessage: "ui.platformWidget.tutorial.previous" })) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ component: 'div' }, { children: [tutorialIndex + 1, "/", actions.length] })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", size: "small", color: "primary", onClick: handleNext, className: (0, classnames_1.default)(classes.btnStep, classes.btnNextStep) }, { children: tutorialIndex === actions.length - 1 ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.close", defaultMessage: "ui.platformWidget.tutorial.close" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.tutorial.next", defaultMessage: "ui.platformWidget.tutorial.next" })) }))] }))] }))) }))] })));
     /**
      * Renders platform card
      */
-    const content = (react_1.default.createElement(material_1.Grid, { container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content },
-        react_1.default.createElement(material_1.Grid, { item: true, xs: 12 }, title ? (title) : (react_1.default.createElement(material_1.Box, { className: classes.title },
-            react_1.default.createElement(material_1.Tooltip, { title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" },
-                react_1.default.createElement("img", { src: logo_1.default, alt: "logo" }))))),
-        react_1.default.createElement(material_1.Grid, { item: true, xs: 12, className: classes.actions },
-            react_1.default.createElement(material_1.Grid, { item: true, xs: 1, className: classes.action }),
-            actions.map((a, i) => {
-                return (react_1.default.createElement(material_1.Grid, { key: i, item: true, xs: "auto", className: (0, classnames_1.default)(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, a.render));
-            }),
-            react_1.default.createElement(material_1.Grid, { item: true, xs: 1, className: classes.action }))));
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: isAdmin ? 1 : 3, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: title ? (title) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.title }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.platformWidget.title.tooltip", defaultMessage: "ui.platformWidget.title.tooltip" }), placement: "top" }, { children: (0, jsx_runtime_1.jsx)("img", { src: logo_1.default, alt: "logo" }) })) }))) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, className: classes.action }), actions.map((a, i) => {
+                        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: "auto", className: (0, classnames_1.default)(classes.action, { [classes.actionHighlighted]: tutorialIndex === i && isTutorialOpen }) }, { children: a.render }), i));
+                    }), (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 1, className: classes.action })] }))] })));
     /**
      * Renders root object (if not hidden by autoHide prop)
      */
     if (!autoHide && ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.role)) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className, { [classes.tutorialOpen]: isTutorialOpen }) }, rest),
-                content,
-                tutorial),
-            react_1.default.createElement(material_1.Backdrop, { sx: { color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }, open: isTutorialOpen, onClick: handleCloseTutorial })));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className, { [classes.tutorialOpen]: isTutorialOpen }) }, rest, { children: [content, tutorial] })), (0, jsx_runtime_1.jsx)(material_1.Backdrop, { sx: { color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }, open: isTutorialOpen, onClick: handleCloseTutorial })] }));
     }
-    return react_1.default.createElement(HiddenPlaceholder_1.default, null);
+    return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
 }
 exports.default = PlatformWidget;

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

@@ -18,4 +18,4 @@
  |root|.SCPlatformWidget-skeleton-root|Styles applied to the root element.|
  *
  */
-export default function PlatformWidgetSkeleton(): JSX.Element;
+export default function PlatformWidgetSkeleton(props: any): JSX.Element;

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

@@ -1,14 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const Skeleton_1 = require("../Skeleton");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const constants_1 = require("./constants");
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const material_1 = require("@mui/material");
+const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const classes = {
-    root: `${constants_1.PREFIX}-skeleton-root`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    title: `${constants_1.PREFIX}-skeleton-title`,
+    content: `${constants_1.PREFIX}-skeleton-content`,
+    actions: `${constants_1.PREFIX}-skeleton-actions`,
+    tutorial: `${constants_1.PREFIX}-skeleton-tutorial`
 };
-const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
+const Root = (0, styles_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -32,7 +38,7 @@ const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
  |root|.SCPlatformWidget-skeleton-root|Styles applied to the root element.|
  *
  */
-function PlatformWidgetSkeleton() {
-    return react_1.default.createElement(Root, { className: classes.root });
+function PlatformWidgetSkeleton(props) {
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, justifyContent: "center", className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.title }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 25, width: 170 }) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ item: true, xs: 12, className: classes.actions }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 35, width: 110 }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 35, width: 110 })] })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, justifyContent: "center", alignItems: "center", className: classes.tutorial }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: 25, height: 25 }) }))] })) })));
 }
 exports.default = PlatformWidgetSkeleton;

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

@@ -3,3 +3,7 @@ export declare const HUB_STAGE = "https://hub.stage.quentrix.com/";
 export declare const HUB_PROD = "https://hub.selfcommunity.com/";
 export declare const CONTACT_STAGE = "https://hub.stage.quentrix.com/dashboard/account/contact-us";
 export declare const CONTACT_PROD = "https://hub.selfcommunity.com/dashboard/account/contact-us";
+export declare const MAKE_MARKETING_STAGE = "https://make.selfcommunity.io/marketing/invitation";
+export declare const MAKE_MARKETING_PROD = "https://make.stage.quentrix.com/marketing/invitation";
+export declare const CONSOLE_STAGE = "https://make.selfcommunity.io/contents/interests";
+export declare const CONSOLE_PROD = "https://make.stage.quentrix.com/contents/interests";

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

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CONTACT_PROD = exports.CONTACT_STAGE = exports.HUB_PROD = exports.HUB_STAGE = exports.PREFIX = void 0;
+exports.CONSOLE_PROD = exports.CONSOLE_STAGE = exports.MAKE_MARKETING_PROD = exports.MAKE_MARKETING_STAGE = exports.CONTACT_PROD = exports.CONTACT_STAGE = exports.HUB_PROD = exports.HUB_STAGE = exports.PREFIX = void 0;
 exports.PREFIX = 'SCPlatformWidget';
 exports.HUB_STAGE = 'https://hub.stage.quentrix.com/';
 exports.HUB_PROD = 'https://hub.selfcommunity.com/';
 exports.CONTACT_STAGE = 'https://hub.stage.quentrix.com/dashboard/account/contact-us';
 exports.CONTACT_PROD = 'https://hub.selfcommunity.com/dashboard/account/contact-us';
+exports.MAKE_MARKETING_STAGE = 'https://make.selfcommunity.io/marketing/invitation';
+exports.MAKE_MARKETING_PROD = 'https://make.stage.quentrix.com/marketing/invitation';
+exports.CONSOLE_STAGE = 'https://make.selfcommunity.io/contents/interests';
+exports.CONSOLE_PROD = 'https://make.stage.quentrix.com/contents/interests';

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -57,17 +58,7 @@ function PollSnippet(props) {
     const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
     // RENDER
     if (!autoHide) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(Root, { elevation: 0, className: (0, classnames_1.default)(classes.root, className), image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!feedObj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, feedObj.author) }), { onClick: feedObj.author.deleted ? () => setOpenAlert(true) : null }),
-                    react_1.default.createElement(UserAvatar_1.default, { hide: !feedObj.author.community_badge },
-                        react_1.default.createElement(material_1.Avatar, { alt: feedObj.author.username, variant: "circular", src: feedObj.author.avatar, className: classes.avatar }))), primary: react_1.default.createElement(material_1.Box, null,
-                    react_1.default.createElement(react_core_1.Link, Object.assign({}, (!feedObj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, feedObj.author) }), { className: classes.username, onClick: feedObj.author.deleted ? () => setOpenAlert(true) : null }), feedObj.author.username),
-                    react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.title }, feedObj.poll.title)), disableTypography: true, secondary: react_1.default.createElement(material_1.Stack, { direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center" },
-                    react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObj), (0, contribution_1.getRouteData)(feedObj)), className: classes.activityAt },
-                        react_1.default.createElement(DateTimeAgo_1.default, { component: "span", date: feedObj.added_at })),
-                    react_1.default.createElement(material_1.Button, { component: react_core_1.Link, to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObj), (0, contribution_1.getRouteData)(feedObj)), variant: "text", color: "secondary", size: "small" },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.pollSnippet.button.seeItem", defaultMessage: "ui.pollSuggestionWidget.pollSnippet.button.seeItem" }))) }),
-            openAlert && react_1.default.createElement(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, { elevation: 0, className: (0, classnames_1.default)(classes.root, className), image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!feedObj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, feedObj.author) }), { onClick: feedObj.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !feedObj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: feedObj.author.username, variant: "circular", src: feedObj.author.avatar, className: classes.avatar }) })) })), primary: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!feedObj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, feedObj.author) }), { className: classes.username, onClick: feedObj.author.deleted ? () => setOpenAlert(true) : null }, { children: feedObj.author.username })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.title }, { children: feedObj.poll.title }))] }), disableTypography: true, secondary: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", spacing: 2, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObj), (0, contribution_1.getRouteData)(feedObj)), className: classes.activityAt }, { children: (0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { component: "span", date: feedObj.added_at }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(feedObj), (0, contribution_1.getRouteData)(feedObj)), variant: "text", color: "secondary", size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.pollSnippet.button.seeItem", defaultMessage: "ui.pollSuggestionWidget.pollSnippet.button.seeItem" }) }))] })) }), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
     }
     return null;
 }

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
@@ -33,6 +33,6 @@ const Root = (0, styles_1.styled)(BaseItem_1.default)(({ theme }) => ({}));
  */
 function PollSnippetSkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props, { image: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), primary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { image: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) })));
 }
 exports.default = PollSnippetSkeleton;

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
@@ -158,25 +159,12 @@ function PollSuggestionWidget(inProps) {
     };
     // RENDER
     if ((autoHide && !state.count && state.initialized) || !scUserContext.user) {
-        return react_1.default.createElement(HiddenPlaceholder_1.default, null);
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
     if (!state.initialized) {
-        return react_1.default.createElement(Skeleton_1.default, null);
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const content = (react_1.default.createElement(material_1.CardContent, null,
-        react_1.default.createElement(material_1.Typography, { className: classes.title, variant: "h5" },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.title", defaultMessage: "ui.pollSuggestionWidget.title" })),
-        !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({ 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({ 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));
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.title", defaultMessage: "ui.pollSuggestionWidget.title" }) })), !state.count ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.noResults", defaultMessage: "ui.pollSuggestionWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.slice(0, state.visibleItems).map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.default, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.button.showAll", defaultMessage: "ui.pollSuggestionWidget.button.showAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.pollSuggestionWidget.title", id: "ui.pollSuggestionWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: (0, jsx_runtime_1.jsx)(PollSnippet_1.PollSnippetSkeleton, Object.assign({ elevation: 0 }, PollSnippetProps)), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.pollSuggestionWidget.noMoreResults", defaultMessage: "ui.pollSuggestionWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(List_1.default, { children: state.results.map((obj) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.default, Object.assign({ className: classes.pollSnippet, elevation: 0, feedObj: obj }, PollSnippetProps)) }, obj.id))) }) })) })))] }));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = PollSuggestionWidget;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const material_1 = require("@mui/material");
@@ -38,10 +38,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function PollSuggestionWidgetSkeleton(props) {
-    return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props),
-        react_1.default.createElement(material_1.CardContent, null,
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120 }),
-            react_1.default.createElement(material_1.List, { className: classes.list }, [...Array(4)].map((user, index) => (react_1.default.createElement(material_1.ListItem, { key: index },
-                react_1.default.createElement(PollSnippet_1.PollSnippetSkeleton, { elevation: 0 }))))))));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120 }), (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((user, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(PollSnippet_1.PollSnippetSkeleton, { elevation: 0 }) }, index))) }))] }) })));
 }
 exports.default = PollSuggestionWidgetSkeleton;

package/lib/cjs/components/PrivateMessageComponent/PrivateMessageComponent.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -152,19 +153,17 @@ function PrivateMessageComponent(inProps) {
      * Renders snippets section
      */
     function renderSnippets() {
-        return (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 5, className: (0, classnames_1.default)(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) },
-            react_1.default.createElement(PrivateMessageSnippets_1.default, { snippetActions: {
+        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5, className: (0, classnames_1.default)(classes.snippetsBox, { [classes.hide]: isMobile && mobileThreadView }) }, { children: (0, jsx_runtime_1.jsx)(PrivateMessageSnippets_1.default, { snippetActions: {
                     onSnippetClick: handleThreadOpening,
                     onNewMessageClick: handleOpenNewMessage,
                     onDeleteConfirm: handleDeleteThread
-                }, threadObj: obj, clearSearch: clear, elevation: 0, type: _type })));
+                }, threadObj: obj, clearSearch: clear, elevation: 0, type: _type }) })));
     }
     /**
      * Renders thread section
      */
     function renderThread() {
-        return (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 7, className: (0, classnames_1.default)(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) },
-            react_1.default.createElement(PrivateMessageThread_1.default, { threadObj: obj, type: _type, openNewMessage: openNewMessage, onNewMessageClose: handleMessageBack, onNewMessageSent: handleOnNewMessageSent, onSingleMessageOpen: handleSingleMessage, elevation: 0 })));
+        return ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7, className: (0, classnames_1.default)(classes.threadBox, { [classes.hide]: isMobile && mobileSnippetsView }) }, { children: (0, jsx_runtime_1.jsx)(PrivateMessageThread_1.default, { threadObj: obj, type: _type, openNewMessage: openNewMessage, onNewMessageClose: handleMessageBack, onNewMessageSent: handleOnNewMessageSent, onSingleMessageOpen: handleSingleMessage, elevation: 0 }) })));
     }
     /**
      * Renders the component (if not hidden by autoHide prop)
@@ -172,8 +171,6 @@ function PrivateMessageComponent(inProps) {
     if (!authUserId || !privateMessagingEnabled) {
         return null;
     }
-    return (react_1.default.createElement(Root, Object.assign({ container: true }, rest, { className: (0, classnames_1.default)(classes.root, className) }),
-        renderSnippets(),
-        renderThread()));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true }, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: [renderSnippets(), renderThread()] })));
 }
 exports.default = PrivateMessageComponent;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("../PrivateMessageSnippets/Skeleton"));
@@ -43,10 +43,6 @@ function PrivateMessageComponentSkeleton(props) {
     const { className } = props;
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
-    return (react_1.default.createElement(Root, { container: true, className: (0, classnames_1.default)(classes.root, className) },
-        !isMobile && (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 5, className: classes.snippetsSection },
-            react_1.default.createElement(Skeleton_1.default, null))),
-        react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 7, className: classes.threadSection },
-            react_1.default.createElement(Skeleton_2.default, null))));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, className: (0, classnames_1.default)(classes.root, className) }, { children: [!isMobile && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5, className: classes.snippetsSection }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, {}) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7, className: classes.threadSection }, { children: (0, jsx_runtime_1.jsx)(Skeleton_2.default, {}) }))] })));
 }
 exports.default = PrivateMessageComponentSkeleton;