@selfcommunity/react-ui 0.11.0-alpha.65 → 0.11.0-alpha.66

package/lib/cjs/components/FeedObject/FeedObject.js

@@ -3,15 +3,12 @@ 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 CardContent_1 = tslib_1.__importDefault(require("@mui/material/CardContent"));
 const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const DateTimeAgo_1 = tslib_1.__importDefault(require("../../shared/DateTimeAgo"));
 const Bullet_1 = tslib_1.__importDefault(require("../../shared/Bullet"));
 const Tags_1 = tslib_1.__importDefault(require("../../shared/Tags"));
 const Actions_1 = tslib_1.__importDefault(require("./Actions"));
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const react_intl_1 = require("react-intl");
 const Poll_1 = tslib_1.__importDefault(require("./Poll"));
 const Contributors_1 = tslib_1.__importDefault(require("./Contributors"));
@@ -80,7 +77,7 @@ const classes = {
     activitiesContent: `${constants_1.PREFIX}-activities-content`,
     followButton: `${constants_1.PREFIX}-follow-button`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -426,20 +423,20 @@ function FeedObject(inProps) {
     let objElement;
     if ((!obj && error) ||
         ((obj === null || obj === void 0 ? void 0 : obj.deleted) && !scUserContext.user && !(react_core_1.UserUtils.isAdmin(scUserContext.user) || react_core_1.UserUtils.isModerator(scUserContext.user)))) {
-        objElement = ((0, jsx_runtime_1.jsx)(CardContent_1.default, Object.assign({ className: (0, classnames_1.default)(classes.error, classes.content) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.error", defaultMessage: "ui.feedObject.error" }) })));
+        objElement = ((0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)(classes.error, classes.content) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.error", defaultMessage: "ui.feedObject.error" }) })));
     }
     else if (template === feedObject_1.SCFeedObjectTemplateType.PREVIEW ||
         template === feedObject_1.SCFeedObjectTemplateType.DETAIL ||
         template === feedObject_1.SCFeedObjectTemplateType.SEARCH) {
-        objElement = ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: obj ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: [obj.categories.length > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.category }, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [obj.group && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.group, color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id)), obj.event && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.event, color: "secondary", size: "small", label: obj.event.name, icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.group }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }), label: obj.group.name, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.event, color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }), label: obj.event.name, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id)), (0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: classes.header, avatar: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)), className: classes.activityAt }, { children: (0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { component: 'span', date: obj.added_at }) })), obj.location && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.location }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_location_alt" }), (_a = obj.location) === null || _a === void 0 ? void 0 : _a.location] }))] })), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.tag }, { children: obj.addressing.length > 0 ? ((0, jsx_runtime_1.jsx)(Tags_1.default, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ color: "disabled", fontSize: "small" }, { children: "groups" })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToAll)}` }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ color: "disabled", fontSize: "small" }, { children: "public" })) }))) }))] }), action: renderHeaderAction() }), (0, jsx_runtime_1.jsxs)(CardContent_1.default, Object.assign({ classes: { root: classes.content } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: template === feedObject_1.SCFeedObjectTemplateType.DETAIL ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.mediasSection }, { children: (0, jsx_runtime_1.jsx)(FeedObjectMediaPreview_1.default, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && ((0, jsx_runtime_1.jsx)(Poll_1.default, Object.assign({ visible: pollVisible ||
+        objElement = ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: obj ? ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: [obj.categories.length > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.category }, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [obj.group && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.group, color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id)), obj.event && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.event, color: "secondary", size: "small", label: obj.event.name, icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.group }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }), label: obj.group.name, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.event, color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }), label: obj.event.name, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id)), (0, jsx_runtime_1.jsx)(material_1.CardHeader, { className: classes.header, avatar: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)), className: classes.activityAt }, { children: (0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { component: 'span', date: obj.added_at }) })), obj.location && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.location }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add_location_alt" }), (_a = obj.location) === null || _a === void 0 ? void 0 : _a.location] }))] })), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.tag }, { children: obj.addressing.length > 0 ? ((0, jsx_runtime_1.jsx)(Tags_1.default, { tags: obj.addressing, TagChipProps: { disposable: false, clickable: false } })) : obj.group ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToGroup, { group: obj.group.name })}` }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "groups" })) }))) : ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToAll)}` }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "public" })) }))) }))] }), action: renderHeaderAction() }), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ classes: { root: classes.content } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: template === feedObject_1.SCFeedObjectTemplateType.DETAIL ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.mediasSection }, { children: (0, jsx_runtime_1.jsx)(FeedObjectMediaPreview_1.default, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && ((0, jsx_runtime_1.jsx)(Poll_1.default, Object.assign({ visible: pollVisible ||
                                         template === feedObject_1.SCFeedObjectTemplateType.DETAIL ||
-                                        Boolean(obj.type !== types_1.SCContributionType.DISCUSSION && !obj.html && !obj.medias.length), feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, onToggleVisibility: handleTogglePollVisibility }, PollObjectProps))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.infoSection }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [!hideParticipantsPreview && ((0, jsx_runtime_1.jsx)(Contributors_1.default, Object.assign({ feedObject: obj, feedObjectType: obj.type }, ContributorsFeedObjectProps, { cacheStrategy: cacheStrategy }))), !_hideFollowAction && (0, jsx_runtime_1.jsx)(Follow_1.default, Object.assign({ feedObject: obj, feedObjectType: obj.type, handleFollow: handleFollow }, FollowButtonProps))] })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardActions, Object.assign({ className: classes.actionsSection }, { children: [(0, jsx_runtime_1.jsx)(Actions_1.default, Object.assign({ feedObjectId: feedObjectId, feedObjectType: feedObjectType, feedObject: obj, hideCommentAction: template === feedObject_1.SCFeedObjectTemplateType.DETAIL || (hasEvent && !((_c = (_b = obj === null || obj === void 0 ? void 0 : obj.medias[0].embed) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.active)), handleExpandActivities: template === feedObject_1.SCFeedObjectTemplateType.PREVIEW ? handleExpandActivities : null, VoteActionProps: { onVoteAction: handleVoteSuccess } }, ActionsProps)), ((template === feedObject_1.SCFeedObjectTemplateType.DETAIL && (!hasEvent || ((_h = (_g = (_f = (_d = obj === null || obj === void 0 ? void 0 : obj.medias) === null || _d === void 0 ? void 0 : _d[0]) === null || _f === void 0 ? void 0 : _f.embed) === null || _g === void 0 ? void 0 : _g.metadata) === null || _h === void 0 ? void 0 : _h.active))) || expandedActivities) && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.replyContent }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReplyComponent, Object.assign({ id: `reply-feedObject-${obj.id}`, onReply: handleReply, editable: !isReplying || Boolean(obj) }, CommentObjectReplyComponentProps), Number(isReplying)) })))] })), template === feedObject_1.SCFeedObjectTemplateType.PREVIEW && (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } }, { children: (0, jsx_runtime_1.jsx)(CardContent_1.default, Object.assign({ className: classes.activitiesContent }, { children: (0, jsx_runtime_1.jsx)(Activities_1.default, Object.assign({ feedObject: obj, feedObjectActivities: feedObjectActivities, activitiesType: selectedActivities, onSetSelectedActivities: handleSelectedActivities, comments: comments, CommentsObjectProps: {
+                                        Boolean(obj.type !== types_1.SCContributionType.DISCUSSION && !obj.html && !obj.medias.length), feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, onToggleVisibility: handleTogglePollVisibility }, PollObjectProps))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.infoSection }, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", justifyContent: "space-between", alignItems: "center", spacing: 2 }, { children: [!hideParticipantsPreview && ((0, jsx_runtime_1.jsx)(Contributors_1.default, Object.assign({ feedObject: obj, feedObjectType: obj.type }, ContributorsFeedObjectProps, { cacheStrategy: cacheStrategy }))), !_hideFollowAction && (0, jsx_runtime_1.jsx)(Follow_1.default, Object.assign({ feedObject: obj, feedObjectType: obj.type, handleFollow: handleFollow }, FollowButtonProps))] })) }))] })), (0, jsx_runtime_1.jsxs)(material_1.CardActions, Object.assign({ className: classes.actionsSection }, { children: [(0, jsx_runtime_1.jsx)(Actions_1.default, Object.assign({ feedObjectId: feedObjectId, feedObjectType: feedObjectType, feedObject: obj, hideCommentAction: template === feedObject_1.SCFeedObjectTemplateType.DETAIL || (hasEvent && !((_c = (_b = obj === null || obj === void 0 ? void 0 : obj.medias[0].embed) === null || _b === void 0 ? void 0 : _b.metadata) === null || _c === void 0 ? void 0 : _c.active)), handleExpandActivities: template === feedObject_1.SCFeedObjectTemplateType.PREVIEW ? handleExpandActivities : null, VoteActionProps: { onVoteAction: handleVoteSuccess } }, ActionsProps)), ((template === feedObject_1.SCFeedObjectTemplateType.DETAIL && (!hasEvent || ((_h = (_g = (_f = (_d = obj === null || obj === void 0 ? void 0 : obj.medias) === null || _d === void 0 ? void 0 : _d[0]) === null || _f === void 0 ? void 0 : _f.embed) === null || _g === void 0 ? void 0 : _g.metadata) === null || _h === void 0 ? void 0 : _h.active))) || expandedActivities) && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.replyContent }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReplyComponent, Object.assign({ id: `reply-feedObject-${obj.id}`, onReply: handleReply, editable: !isReplying || Boolean(obj) }, CommentObjectReplyComponentProps), Number(isReplying)) })))] })), template === feedObject_1.SCFeedObjectTemplateType.PREVIEW && (obj.comment_count > 0 || (feedObjectActivities && feedObjectActivities.length > 0)) && ((0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: expandedActivities, timeout: "auto", classes: { root: classes.activitiesSection } }, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, Object.assign({ className: classes.activitiesContent }, { children: (0, jsx_runtime_1.jsx)(Activities_1.default, Object.assign({ feedObject: obj, feedObjectActivities: feedObjectActivities, activitiesType: selectedActivities, onSetSelectedActivities: handleSelectedActivities, comments: comments, CommentsObjectProps: {
                                     CommentComponentProps: Object.assign({ onDelete: handleDeleteComment, truncateContent: true, CommentsObjectComponentProps: { inPlaceLoadMoreContents: false } }, CommentComponentProps),
                                     CommentObjectSkeletonProps: CommentObjectSkeletonProps
                                 }, cacheStrategy: cacheStrategy }, ActivitiesProps), selectedActivities) })) }))), composerOpen && ((0, jsx_runtime_1.jsx)(Composer_1.default, { open: composerOpen, feedObject: obj, onClose: handleToggleEdit, onSuccess: handleEditSuccess, maxWidth: "sm", fullWidth: true }))] }))) : ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ template: template }, FeedObjectSkeletonProps))) }));
     }
     else if (template === feedObject_1.SCFeedObjectTemplateType.SHARE) {
-        objElement = ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: obj ? ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [obj.categories.length > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.category }, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [obj.group && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.group }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.event, color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.group }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }), label: obj.group.name, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.event }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }), label: obj.event.name, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) }))), (0, jsx_runtime_1.jsx)(material_1.CardHeader, { classes: { root: classes.header }, avatar: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)), className: classes.activityAt }, { children: (0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: obj.added_at }) })) }), (0, jsx_runtime_1.jsxs)(CardContent_1.default, Object.assign({ classes: { root: classes.content } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.mediasSection }, { children: (0, jsx_runtime_1.jsx)(FeedObjectMediaPreview_1.default, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && ((0, jsx_runtime_1.jsx)(Poll_1.default, Object.assign({ feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, visible: Boolean(obj.type !== types_1.SCContributionType.DISCUSSION && !obj.html && !obj.medias.length) }, PollObjectProps))) }))] }))] })) : ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ template: template }, FeedObjectSkeletonProps))) }));
+        objElement = ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: obj ? ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [obj.categories.length > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.category }, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [obj.group && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.group }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && ((0, jsx_runtime_1.jsx)(material_1.Chip, { className: classes.event, color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id))] }), obj.categories.map((c) => ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, c) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "overline" }, { children: c.name })) }), c.id)))] }))), obj.group && !obj.categories.length && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.group }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }), label: obj.group.name, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, obj.group), clickable: true }, obj.group.id) }))), obj.event && !obj.categories.length && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.event }, { children: (0, jsx_runtime_1.jsx)(material_1.Chip, { color: "secondary", size: "small", icon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }), label: obj.event.name, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, obj.event), clickable: true }, obj.event.id) }))), (0, jsx_runtime_1.jsx)(material_1.CardHeader, { classes: { root: classes.header }, avatar: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, Object.assign({ "aria-label": "recipe", src: obj.author.avatar, className: classes.avatar }, { children: obj.author.username })) })) })), title: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), subheader: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)), className: classes.activityAt }, { children: (0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: obj.added_at }) })) }), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ classes: { root: classes.content } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.titleSection }, { children: 'title' in obj && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)) }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", gutterBottom: true, className: classes.title }, { children: obj.title })) }))) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.textSection }, { children: getContributionSummary(obj, template) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.mediasSection }, { children: (0, jsx_runtime_1.jsx)(FeedObjectMediaPreview_1.default, Object.assign({ medias: obj.medias }, FeedObjectMediaPreviewProps)) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.pollsSection }, { children: obj['poll'] && ((0, jsx_runtime_1.jsx)(Poll_1.default, Object.assign({ feedObject: obj, pollObject: obj['poll'], onChange: handleChangePoll, visible: Boolean(obj.type !== types_1.SCContributionType.DISCUSSION && !obj.html && !obj.medias.length) }, PollObjectProps))) }))] }))] })) : ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({ template: template }, FeedObjectSkeletonProps))) }));
     }
     else {
         objElement = ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: obj ? ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.snippet, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: obj.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({}, (!obj.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, obj.author) }), { onClick: obj.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: obj.author.username })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.snippetContent }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)) }, { children: (0, contribution_1.getContributionSnippet)(obj) })) }))] }), 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)(obj), (0, contribution_1.getRouteData)(obj)), className: classes.activityAt }, { children: (0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { component: "span", date: obj.added_at }) })), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url((0, contribution_1.getContributionRouteName)(obj), (0, contribution_1.getRouteData)(obj)), variant: "text", color: "secondary", size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.comment", defaultMessage: "ui.feedObject.comment" }) }))] })) })) : ((0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, FeedObjectSkeletonProps))) }));

package/lib/cjs/components/FeedObject/Poll/Choice/Choice.js

@@ -2,12 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const react_core_1 = require("@selfcommunity/react-core");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
-const LinearProgress_1 = tslib_1.__importDefault(require("@mui/material/LinearProgress"));
 const lab_1 = require("@mui/lab");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("../../constants");
@@ -17,13 +14,13 @@ const classes = {
     vote: `${constants_1.PREFIX}-poll-object-choices-vote`,
     progress: `${constants_1.PREFIX}-poll-object-choices-progress`
 };
-const Root = (0, styles_1.styled)(material_1.Card, {
+const Root = (0, material_1.styled)(material_1.Card, {
     name: constants_1.PREFIX,
     slot: 'PollObjectChoicesRoot'
 })(() => ({}));
 function LinearProgressWithLabel(_a) {
     var { className } = _a, props = tslib_1.__rest(_a, ["className"]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(LinearProgress_1.default, Object.assign({ variant: "determinate" }, props)), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: `${Math.round(props.value)}%` }))] })));
+    return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(material_1.LinearProgress, Object.assign({ variant: "determinate" }, props)), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: `${Math.round(props.value)}%` }))] })));
 }
 function Choice(props) {
     //PROPS
@@ -52,6 +49,6 @@ function Choice(props) {
     /**
      * Renders root element
      */
-    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({ className: classes.label }, { children: choiceObj.choice })), (0, jsx_runtime_1.jsx)(LinearProgressWithLabel, { className: classes.progress, value: renderVotes(choiceObj.vote_count, votes) }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: isVoting === choiceObj.id, variant: choiceObj.voted ? 'contained' : 'outlined', size: "small", disabled: disabled || isVoting !== null || votable, className: classes.vote, onClick: handleVoteAction }, { children: choiceObj.voted ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: "check" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.poll.choice.vote", defaultMessage: "ui.feedObject.poll.choice.vote" })) }))] })));
+    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({ className: classes.label }, { children: choiceObj.choice })), (0, jsx_runtime_1.jsx)(LinearProgressWithLabel, { className: classes.progress, value: renderVotes(choiceObj.vote_count, votes) }), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: isVoting === choiceObj.id, variant: choiceObj.voted ? 'contained' : 'outlined', size: "small", disabled: disabled || isVoting !== null || votable, className: classes.vote, onClick: handleVoteAction }, { children: choiceObj.voted ? ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: "check" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.poll.choice.vote", defaultMessage: "ui.feedObject.poll.choice.vote" })) }))] })));
 }
 exports.default = Choice;

package/lib/cjs/components/FeedObject/Poll/Poll.js

@@ -3,15 +3,11 @@ 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 Card_1 = tslib_1.__importDefault(require("@mui/material/Card"));
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const Choice_1 = tslib_1.__importDefault(require("./Choice"));
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const Errors_1 = require("../../../constants/Errors");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const constants_1 = require("../constants");
@@ -48,7 +44,7 @@ const classes = {
     expandIcon: `${constants_1.PREFIX}-poll-object-expand-icon`,
     collapsedIcon: `${constants_1.PREFIX}-poll-object-collapsed-icon`
 };
-const Root = (0, styles_1.styled)(Card_1.default, {
+const Root = (0, material_1.styled)(material_1.Card, {
     name: constants_1.PREFIX,
     slot: 'PollObjectRoot'
 })(() => ({}));
@@ -152,7 +148,7 @@ function PollObject(props) {
      */
     let objElement = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     if (pollObject) {
-        objElement = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.toggleButton, onClick: handleToggleCollapsedClick, "aria-expanded": collapsed, endIcon: (0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ className: (0, classnames_1.default)(classes.expandIcon, { [classes.collapsedIcon]: collapsed }) }, { children: "arrow_upward" })) }, { children: collapsed ? intl.formatMessage(messages.showPoll) : intl.formatMessage(messages.hidePoll) })) }) }), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: !collapsed, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.title }, { children: obj.title })), obj.expiration_at && Date.parse(obj.expiration_at) >= new Date().getTime() && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body2", className: classes.expiration }, { children: [`${intl.formatMessage(messages.expDate)}`, `${intl.formatDate(Date.parse(obj.expiration_at), { year: 'numeric', month: 'numeric', day: 'numeric' })}`] }))), obj.closed && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.closed }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.poll.closed", defaultMessage: "ui.feedObject.poll.closed" }) }))), (0, jsx_runtime_1.jsx)(List_1.default, { children: choices.map((choice, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Choice_1.default, { elevation: 0, choiceObj: choice, feedObject: disabled ? null : feedObject, votes: votes, vote: vote, isVoting: isVoting, votable: votable }) }, index))) }), multipleChoices ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.votes }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { children: "list" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: `${intl.formatMessage(messages.votes, { total: votes })}` })] }))) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.voters }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { children: "people_alt" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: `${intl.formatMessage(messages.voters, { total: votes })}` })] })))] }) }))] }));
+        objElement = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.toggleButton, onClick: handleToggleCollapsedClick, "aria-expanded": collapsed, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: (0, classnames_1.default)(classes.expandIcon, { [classes.collapsedIcon]: collapsed }) }, { children: "arrow_upward" })) }, { children: collapsed ? intl.formatMessage(messages.showPoll) : intl.formatMessage(messages.hidePoll) })) }) }), (0, jsx_runtime_1.jsx)(material_1.Collapse, Object.assign({ in: !collapsed, timeout: "auto", unmountOnExit: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.title }, { children: obj.title })), obj.expiration_at && Date.parse(obj.expiration_at) >= new Date().getTime() && ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ variant: "body2", className: classes.expiration }, { children: [`${intl.formatMessage(messages.expDate)}`, `${intl.formatDate(Date.parse(obj.expiration_at), { year: 'numeric', month: 'numeric', day: 'numeric' })}`] }))), obj.closed && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.closed }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.poll.closed", defaultMessage: "ui.feedObject.poll.closed" }) }))), (0, jsx_runtime_1.jsx)(material_1.List, { children: choices.map((choice, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Choice_1.default, { elevation: 0, choiceObj: choice, feedObject: disabled ? null : feedObject, votes: votes, vote: vote, isVoting: isVoting, votable: votable }) }, index))) }), multipleChoices ? ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.votes }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "list" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: `${intl.formatMessage(messages.votes, { total: votes })}` })] }))) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes.voters }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "people_alt" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: `${intl.formatMessage(messages.voters, { total: votes })}` })] })))] }) }))] }));
     }
     (0, react_1.useEffect)(() => {
         setChoices(pollObject.choices);

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

@@ -4,8 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const feedObject_1 = require("../../types/feedObject");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -14,7 +12,7 @@ const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     media: `${constants_1.PREFIX}-media`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -44,10 +42,10 @@ function FeedObjectSkeleton(props) {
     const theme = (0, material_1.useTheme)();
     let obj;
     if (template === feedObject_1.SCFeedObjectTemplateType.PREVIEW || template === feedObject_1.SCFeedObjectTemplateType.DETAIL || template === feedObject_1.SCFeedObjectTemplateType.SEARCH) {
-        obj = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { avatar: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" }) }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "rectangular", className: classes.media }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "60%" })] }) })] }));
+        obj = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "40%" }) }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "rectangular", className: classes.media }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "60%" })] }) })] }));
     }
     else {
-        obj = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { avatar: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" }) }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "60%", style: { marginBottom: 6 } })] }) })] }));
+        obj = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { avatar: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "40%" }) }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "60%", style: { marginBottom: 6 } })] }) })] }));
     }
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, `${constants_1.PREFIX}-${template}`) }, rest, { children: obj })));
 }

package/lib/cjs/components/FeedObjectMediaPreview/FeedObjectMediaPreview.js

@@ -2,9 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
-const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
 const react_core_1 = require("@selfcommunity/react-core");
+const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 const Media_1 = require("../../shared/Media");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -12,7 +11,7 @@ const PREFIX = 'SCFeedObjectMediaPreview';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(Box_1.default, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));

package/lib/cjs/components/FeedUpdatesWidget/FeedUpdatesWidget.js

@@ -3,7 +3,6 @@ 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 material_1 = require("@mui/material");
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const react_intl_1 = require("react-intl");
@@ -16,7 +15,7 @@ const classes = {
     root: `${constants_1.PREFIX}-root`,
     buttonLoadMore: `${constants_1.PREFIX}-button-load-more`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

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

@@ -2,14 +2,14 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const GenericSkeleton_1 = tslib_1.__importDefault(require("../Skeleton/GenericSkeleton"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(GenericSkeleton_1.default, {
+const Root = (0, material_1.styled)(GenericSkeleton_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/FollowUserButton/FollowUserButton.js

@@ -3,7 +3,7 @@ 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 material_1 = require("@mui/material");
 const Errors_1 = require("../../constants/Errors");
 const lab_1 = require("@mui/lab");
 const react_intl_1 = require("react-intl");
@@ -17,7 +17,7 @@ const PREFIX = 'SCFollowUserButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const FollowButton = (0, styles_1.styled)(lab_1.LoadingButton, {
+const FollowButton = (0, material_1.styled)(lab_1.LoadingButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/components/Footer/Footer.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const system_1 = require("@mui/system");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const api_services_1 = require("@selfcommunity/api-services");
@@ -19,7 +18,7 @@ const classes = {
     item: `${constants_1.PREFIX}-item`,
     copyright: `${constants_1.PREFIX}-copyright`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

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

@@ -1,15 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 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("@mui/material/Skeleton"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -34,6 +31,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function FooterSkeleton(props) {
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, style: { marginBottom: 10 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "60%" })] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, style: { marginBottom: 10 } }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "60%" })] })));
 }
 exports.default = FooterSkeleton;

package/lib/cjs/components/FriendshipUserButton/FriendshipUserButton.js

@@ -3,7 +3,7 @@ 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 material_1 = require("@mui/material");
 const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
@@ -18,7 +18,7 @@ const PREFIX = 'SCFriendshipUserButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(lab_1.LoadingButton, {
+const Root = (0, material_1.styled)(lab_1.LoadingButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/cjs/components/Group/Group.js

@@ -3,7 +3,6 @@ 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 material_1 = require("@mui/material");
 const types_1 = require("@selfcommunity/types");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -29,7 +28,7 @@ const classes = {
     actions: `${constants_1.PREFIX}-actions`,
     icon: `${constants_1.PREFIX}-icon`
 };
-const Root = (0, styles_1.styled)(BaseItemButton_1.default, {
+const Root = (0, material_1.styled)(BaseItemButton_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

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

@@ -3,14 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 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"));
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`
 };
-const Root = (0, styles_1.styled)(BaseItem_1.default, {
+const Root = (0, material_1.styled)(BaseItem_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -36,6 +34,6 @@ const Root = (0, styles_1.styled)(BaseItem_1.default, {
  */
 function GroupSkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    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.group.avatar.sizeSmall, height: theme.selfcommunity.group.avatar.sizeSmall }), 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 } }), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { image: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeSmall, height: theme.selfcommunity.group.avatar.sizeSmall }), primary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) })) })));
 }
 exports.default = GroupSkeleton;

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

@@ -3,10 +3,8 @@ 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 material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -26,15 +24,15 @@ const classes = {
     paper: `${PREFIX}-paper`,
     item: `${PREFIX}-item`
 };
-const Root = (0, styles_1.styled)(material_1.IconButton, {
+const Root = (0, material_1.styled)(material_1.IconButton, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));
-const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
+const SwipeableDrawerRoot = (0, material_1.styled)(material_1.SwipeableDrawer, {
     name: PREFIX,
     slot: 'DrawerRoot'
 })(() => ({}));
-const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
+const MenuRoot = (0, material_1.styled)(material_1.Menu, {
     name: PREFIX,
     slot: 'MenuRoot'
 })(() => ({}));
@@ -140,18 +138,18 @@ function GroupActionsMenu(inProps) {
      */
     const renderList = () => {
         return [
-            (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(GroupActionsMenu_1.GET_GROUP_LINK) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "link" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.item.link", defaultMessage: "ui.groupActionsMenu.item.link" })] }), "link"),
+            (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(GroupActionsMenu_1.GET_GROUP_LINK) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "link" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.item.link", defaultMessage: "ui.groupActionsMenu.item.link" })] }), "link"),
             isGroupAdmin &&
                 scGroup.active && [
                 (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "divider"),
-                isMobile && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: handleEditClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "edit" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.item.edit", defaultMessage: "ui.groupActionsMenu.item.edit" })] }), "edit")),
-                (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(GroupActionsMenu_1.DELETE_GROUP) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.item.delete", defaultMessage: "ui.groupActionsMenu.item.delete" })] }), "delete")
+                isMobile && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: handleEditClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "edit" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.item.edit", defaultMessage: "ui.groupActionsMenu.item.edit" })] }), "edit")),
+                (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(GroupActionsMenu_1.DELETE_GROUP) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.item.delete", defaultMessage: "ui.groupActionsMenu.item.delete" })] }), "delete")
             ]
         ];
     };
     if (!scGroup) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "more_vert" }) })), Boolean(anchorEl) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.dialog.msg", defaultMessage: "ui.groupActionsMenu.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.dialog.confirm", defaultMessage: "ui.groupActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && (0, jsx_runtime_1.jsx)(GroupForm_1.default, { onClose: handleEditClick, group: scGroup, onSuccess: handleEditSuccess })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "more_vert" }) })), Boolean(anchorEl) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) })), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.dialog.msg", defaultMessage: "ui.groupActionsMenu.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.dialog.confirm", defaultMessage: "ui.groupActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && (0, jsx_runtime_1.jsx)(GroupForm_1.default, { onClose: handleEditClick, group: scGroup, onSuccess: handleEditSuccess })] }));
 }
 exports.default = GroupActionsMenu;

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

@@ -1,6 +1,5 @@
-import { TextFieldProps } from '@mui/material/TextField';
-import { AutocompleteProps } from '@mui/material';
-import { SCGroupType } from '@selfcommunity/types/src/index';
+import { AutocompleteProps, TextFieldProps } from '@mui/material';
+import { SCGroupType } from '@selfcommunity/types';
 export interface GroupAutocompleteProps extends Pick<AutocompleteProps<SCGroupType | null, any, any, any>, Exclude<keyof AutocompleteProps<SCGroupType | null, any, any, any>, 'open' | 'onOpen' | 'onClose' | 'onChange' | 'filterSelectedOptions' | 'disableCloseOnSelect' | 'options' | 'getOptionLabel' | 'value' | 'selectOnFocus' | 'clearOnBlur' | 'blurOnSelect' | 'handleHomeEndKeys' | 'clearIcon' | 'noOptionsText' | 'isOptionEqualToValue' | 'renderTags' | 'renderOption' | 'renderInput'>> {
     /**
      * The maximum number of groups that will be visible when not focused.

package/lib/cjs/components/GroupAutocomplete/GroupAutocomplete.js

@@ -4,20 +4,16 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
-const Autocomplete_1 = tslib_1.__importDefault(require("@mui/material/Autocomplete"));
-const TextField_1 = tslib_1.__importDefault(require("@mui/material/TextField"));
-const CircularProgress_1 = tslib_1.__importDefault(require("@mui/material/CircularProgress"));
 const parse_1 = tslib_1.__importDefault(require("autosuggest-highlight/parse"));
 const match_1 = tslib_1.__importDefault(require("autosuggest-highlight/match"));
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
-const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const PREFIX = 'SCGroupAutocomplete';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = (0, styles_1.styled)(Autocomplete_1.default, {
+const Root = (0, material_1.styled)(material_1.Autocomplete, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -91,7 +87,7 @@ const GroupAutocomplete = (inProps) => {
             const parts = (0, parse_1.default)(option.name, matches);
             return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }), (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, { children: part.text }), index))) })] })));
         }, renderInput: (params) => {
-            return ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'groups', endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
+            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'groups', endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
         } }, rest)));
 };
 exports.default = GroupAutocomplete;

package/lib/cjs/components/GroupForm/GroupForm.js

@@ -4,7 +4,6 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const system_1 = require("@mui/system");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -52,7 +51,7 @@ const classes = {
     inviteSection: `${constants_1.PREFIX}-invite-section`,
     error: `${constants_1.PREFIX}-error`
 };
-const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

package/lib/cjs/components/GroupHeader/GroupHeader.js

@@ -3,7 +3,6 @@ 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 material_1 = require("@mui/material");
 const types_1 = require("@selfcommunity/types");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -36,7 +35,7 @@ const classes = {
     membersCounter: `${constants_1.PREFIX}-members-counter`,
     multiActions: `${constants_1.PREFIX}-multi-actions`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));

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

@@ -1,10 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
 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"));
 const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
@@ -12,7 +9,7 @@ const classes = {
     avatar: `${constants_1.PREFIX}-avatar`,
     info: `${constants_1.PREFIX}-info`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -41,6 +38,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  */
 function GroupHeaderSkeleton() {
     const theme = (0, material_1.useTheme)();
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.cover, animation: "wave", variant: "rectangular" }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeLarge, height: theme.selfcommunity.group.avatar.sizeLarge }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 30, width: 200 } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: 150 } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", sx: { height: 20, width: 100 } }) })] }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.cover, animation: "wave", variant: "rectangular" }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeLarge, height: theme.selfcommunity.group.avatar.sizeLarge }) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5" }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 30, width: 200 } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, width: 150 } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", sx: { height: 20, width: 100 } }) })] }))] })));
 }
 exports.default = GroupHeaderSkeleton;