@selfcommunity/react-ui 0.11.0-alpha.9 → 0.11.0-alpha.91

package/lib/cjs/components/Groups/Groups.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 api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
@@ -23,13 +22,14 @@ const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     filters: `${constants_1.PREFIX}-filter`,
+    search: `${constants_1.PREFIX}-search`,
     groups: `${constants_1.PREFIX}-groups`,
     item: `${constants_1.PREFIX}-item`,
     noResults: `${constants_1.PREFIX}-no-results`,
     showMore: `${constants_1.PREFIX}-show-more`,
     endMessage: `${constants_1.PREFIX}-end-message`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -96,13 +96,14 @@ function Groups(inProps) {
     /**
      * Fetches groups list
      */
-    const fetchGroups = () => {
+    const fetchGroups = (searchValue = search) => {
+        setLoading(true);
         let groupService;
         if (general) {
-            groupService = api_services_1.GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })));
+            groupService = api_services_1.GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
         }
         else {
-            groupService = api_services_1.GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })));
+            groupService = api_services_1.GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
         }
         groupService
             .then((res) => {
@@ -124,7 +125,7 @@ function Groups(inProps) {
         else {
             fetchGroups();
         }
-    }, [contentAvailability, authUserId, search]);
+    }, [contentAvailability, authUserId]);
     /**
      * Subscriber for pubsub callback
      */
@@ -163,15 +164,6 @@ function Groups(inProps) {
             .catch((error) => console.log(error))
             .then(() => setLoading(false));
     }, [next]);
-    /**
-     * Get groups filtered
-     */
-    const getFilteredGroups = () => {
-        if (search) {
-            return groups.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
-        }
-        return groups;
-    };
     /**
      * Handle change filter name
      * @param event
@@ -182,12 +174,21 @@ function Groups(inProps) {
     /**
      * Renders groups list
      */
-    const filteredGroups = (0, utils_1.sortByAttr)(getFilteredGroups(), 'order');
-    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && groups.length !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, value: search, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) }))) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !groups.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: !onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? (0, jsx_runtime_1.jsx)(Group_1.GroupSkeleton, {}) : (0, jsx_runtime_1.jsx)(Skeleton_1.default, { groupsNumber: 2 }), endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
+    const content = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && (groups.length !== 0 || search.length !== 0) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, fullWidth: true, value: search, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+                            e.preventDefault();
+                            if (e.key === 'Enter') {
+                                fetchGroups();
+                            }
+                        }, InputProps: {
+                            endAdornment: ((0, jsx_runtime_1.jsxs)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: [search.length > 0 && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => {
+                                            setSearch('');
+                                            fetchGroups('');
+                                        }, disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))), isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchGroups(), disabled: loading }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchGroups(), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading }))] })))
+                        } }) }))) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !groups.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: search.length ? ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noResults", defaultMessage: "ui.groups.noResults" }) }))) : !onlyStaffEnabled ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? (0, jsx_runtime_1.jsx)(Group_1.GroupSkeleton, {}) : (0, jsx_runtime_1.jsx)(Skeleton_1.default, { groupsNumber: 2 }), endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 button: (chunk) => ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
-                            } }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: filteredGroups.map((group) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: (0, jsx_runtime_1.jsx)(Group_1.default, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
+                            } }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: groups.map((group) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: (0, jsx_runtime_1.jsx)(Group_1.default, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
     // RENDER
     if (!contentAvailability && !scUserContext.user) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});

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

@@ -2,7 +2,7 @@
 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 constants_1 = require("./constants");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -11,7 +11,7 @@ const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     groups: `${constants_1.PREFIX}-groups`
 };
-const Root = (0, styles_1.styled)(material_1.Box, {
+const Root = (0, material_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));

package/lib/cjs/components/Incubator/Incubator.js

@@ -3,14 +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 material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
 const react_intl_1 = require("react-intl");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const CardContent_1 = tslib_1.__importDefault(require("@mui/material/CardContent"));
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
-const LinearProgress_1 = tslib_1.__importDefault(require("@mui/material/LinearProgress"));
 const system_1 = require("@mui/system");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
@@ -23,13 +20,13 @@ const classes = {
     slogan: `${constants_1.PREFIX}-slogan`,
     progressBar: `${constants_1.PREFIX}-progress-bar`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
 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.Box, Object.assign({ sx: { position: 'absolute', top: '3px', left: props.value + 2 + '%', transform: 'translateX(-50%)' } }, { children: props.subscribers !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: props.subscribers }))) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 2, className: className }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.incubator.progressBar.proposal", id: "ui.incubator.progressBar.proposal" }) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.incubator.progressBar.collectingSubscribers", id: "ui.incubator.progressBar.collectingSubscribers" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ align: "right" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.incubator.progressBar.approved", id: "ui.incubator.progressBar.approved" }) })) }))] }))] })));
+    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.Box, Object.assign({ sx: { position: 'absolute', top: '3px', left: props.value + 2 + '%', transform: 'translateX(-50%)' } }, { children: props.subscribers !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", color: "text.secondary" }, { children: props.subscribers }))) })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 2, className: className }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.incubator.progressBar.proposal", id: "ui.incubator.progressBar.proposal" }) }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.incubator.progressBar.collectingSubscribers", id: "ui.incubator.progressBar.collectingSubscribers" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ align: "right" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.incubator.progressBar.approved", id: "ui.incubator.progressBar.approved" }) })) }))] }))] })));
 }
 /**
  * > API documentation for the Community-JS Incubator component. Learn about the available props and the CSS API.
@@ -89,7 +86,7 @@ function Incubator(inProps) {
     if (autoHide) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    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) }, rest, { children: [(0, jsx_runtime_1.jsxs)(CardContent_1.default, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", className: classes.name }, ButtonProps, { children: scIncubator.name })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.incubator.proposedBy", id: "ui.incubator.proposedBy", values: {
+    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) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", className: classes.name }, ButtonProps, { children: scIncubator.name })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.incubator.proposedBy", id: "ui.incubator.proposedBy", values: {
                                         username: ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!scIncubator.user.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scIncubator.user) }), { onClick: scIncubator.user.deleted ? () => setOpenAlert(true) : null }, { children: scIncubator.user.username })))
                                     } }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'p', className: !detailView ? classes.slogan : null }, { children: scIncubator.slogan })), (0, jsx_runtime_1.jsx)(LinearProgressWithLabel, { className: classes.progressBar, value: renderVotes(scIncubator.subscribers_count, scIncubator.subscribers_threshold), subscribers: scIncubator.subscribers_count })] }), (0, jsx_runtime_1.jsx)(material_1.CardActions, { children: (0, jsx_runtime_1.jsx)(IncubatorSubscribeButton_1.default, Object.assign({ incubator: scIncubator }, subscribeButtonProps)) })] })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

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

@@ -2,8 +2,6 @@
 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 Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const material_1 = require("@mui/material");
 const constants_1 = require("./constants");
@@ -14,7 +12,7 @@ const classes = {
     progressBar: `${constants_1.PREFIX}-progress-bar`,
     action: `${constants_1.PREFIX}-action`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -43,6 +41,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function IncubatorSkeleton(props) {
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.primary }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "40%", variant: "text" }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.secondary }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "50%", variant: "text" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", variant: "text" })] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 1, className: classes.progressBar }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 12 }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: "100%", variant: "rectangular" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "100%", variant: "text" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "100%", variant: "text" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "100%", variant: "text" }) }))] }))] }), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: true, variant: 'outlined', size: 'small' }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 20, width: 50, variant: "text" }) })) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.primary }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "40%", variant: "text" }) })), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.secondary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "50%", variant: "text" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "80%", variant: "text" })] })), (0, jsx_runtime_1.jsxs)(material_1.Grid, Object.assign({ container: true, spacing: 1, className: classes.progressBar }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 12 }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: "100%", variant: "rectangular" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 10, width: "100%", variant: "text" }) }))] }))] }), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.action }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ disabled: true, variant: 'outlined', size: 'small' }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", height: 20, width: 50, variant: "text" }) })) }))] })));
 }
 exports.default = IncubatorSkeleton;

package/lib/cjs/components/IncubatorDetail/IncubatorDetail.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 react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
@@ -19,7 +18,6 @@ const CentralProgress_1 = tslib_1.__importDefault(require("../../shared/CentralP
 const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
 const User_1 = tslib_1.__importDefault(require("../User"));
 const Errors_1 = require("../../constants/Errors");
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const SocialShare_1 = require("../../constants/SocialShare");
 const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/UserDeletedSnackBar"));
 const messages = (0, react_intl_1.defineMessages)({
@@ -43,7 +41,7 @@ const classes = {
     subscribers: `${PREFIX}-subscribers`,
     shareMenuIcon: `${PREFIX}-share-Menu-icon`
 };
-const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
@@ -238,6 +236,6 @@ function IncubatorDetail(inProps) {
      * Renders root element
      */
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { className: classes.avatar, alt: scIncubator.user.avatar, src: scIncubator.user.avatar }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.title }, { children: [`${intl.formatMessage(messages.intro, { name: scIncubator.name })}`, " "] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span' }, { children: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({}, (!scIncubator.user.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scIncubator.user) }), { onClick: scIncubator.user.deleted ? () => setOpenAlert(true) : null }, { children: ["@", scIncubator.user.username] })) }))] })] }), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(Incubator_1.default, Object.assign({ elevation: 0, incubator: scIncubator, detailView: true, subscribeButtonProps: { onSubscribe: handleUpdates } }, IncubatorProps)), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.subscribers }, { children: loading && !scIncubator ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: total > 0 ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleSubscribersDialog, disabled: loading || !scIncubator }, { children: (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, Object.assign({}, rest, { children: [subscribers.map((u) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: u.username, src: u.avatar }, u.id))), [...Array(Math.max(0, total - subscribers.length))].map((x, i // Add max to 0 to prevent creation of array with negative index during state update
-                                            ) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, {}, i)))] })) }))) : null })) })), openSubscribersDialog && ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.incubatorDetail.subscribersSection.title", id: "ui.incubatorDetail.subscribersSection.title" }), " (", total, ")"] }), onClose: handleToggleSubscribersDialog, open: openSubscribersDialog }, { children: loading ? ((0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 50 })) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: total, next: fetchSubscribers, hasMoreNext: next !== null, loaderNext: (0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 30 }), height: 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.subscribersSection.noMoreSubscribers", defaultMessage: "ui.incubatorDetail.subscribersSection.noMoreSubscribers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: subscribers.map((s, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: s }, index) }, (s.id, index)))) }) }))) }))), (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ elevation: 1, className: classes.shareCard }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'h6' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.title", defaultMessage: "ui.incubatorDetail.shareSection.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'subtitle1' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.share", defaultMessage: "ui.incubatorDetail.shareSection.share" }) })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.copyUrlForm }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.copyText, variant: "outlined", value: portal }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.copyButton, variant: "contained", onClick: copy }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.button.copy", defaultMessage: "ui.incubatorDetail.shareSection.button.copy" }) }))] })), alert && ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ onClose: () => setAlert(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.copied", defaultMessage: "ui.incubatorDetail.shareSection.copied" }) }))), isSocialShareEnabled && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'subtitle2' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.invite", defaultMessage: "ui.incubatorDetail.shareSection.invite" }) }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.shareSection }, { children: [facebookShareEnabled && ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(SocialShare_1.FACEBOOK_SHARE + portal, 'facebook-share-dialog', 'width=626,height=436') }, { children: "facebook" }))), xShareEnabled && ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(SocialShare_1.X_SHARE + portal, 'x-share-dialog', 'width=626,height=436') }, { children: "x" }))), linkedinShareEnabled && ((0, jsx_runtime_1.jsx)(Icon_1.default, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(SocialShare_1.LINKEDIN_SHARE + portal, 'linkedin-share-dialog', 'width=626,height=436') }, { children: "linkedin" })))] }))] }) }))] }) })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
+                                            ) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, {}, i)))] })) }))) : null })) })), openSubscribersDialog && ((0, jsx_runtime_1.jsx)(BaseDialog_1.default, Object.assign({ title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.incubatorDetail.subscribersSection.title", id: "ui.incubatorDetail.subscribersSection.title" }), " (", total, ")"] }), onClose: handleToggleSubscribersDialog, open: openSubscribersDialog }, { children: loading ? ((0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 50 })) : ((0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: total, next: fetchSubscribers, hasMoreNext: next !== null, loaderNext: (0, jsx_runtime_1.jsx)(CentralProgress_1.default, { size: 30 }), height: 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.subscribersSection.noMoreSubscribers", defaultMessage: "ui.incubatorDetail.subscribersSection.noMoreSubscribers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: subscribers.map((s, index) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: s }, index) }, (s.id, index)))) }) }))) }))), (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ elevation: 1, className: classes.shareCard }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'h6' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.title", defaultMessage: "ui.incubatorDetail.shareSection.title" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'subtitle1' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.share", defaultMessage: "ui.incubatorDetail.shareSection.share" }) })), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.copyUrlForm }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.copyText, variant: "outlined", value: portal }), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.copyButton, variant: "contained", onClick: copy }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.button.copy", defaultMessage: "ui.incubatorDetail.shareSection.button.copy" }) }))] })), alert && ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ onClose: () => setAlert(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.copied", defaultMessage: "ui.incubatorDetail.shareSection.copied" }) }))), isSocialShareEnabled && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: 'subtitle2' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorDetail.shareSection.invite", defaultMessage: "ui.incubatorDetail.shareSection.invite" }) }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.shareSection }, { children: [facebookShareEnabled && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(SocialShare_1.FACEBOOK_SHARE + portal, 'facebook-share-dialog', 'width=626,height=436') }, { children: "facebook" }))), xShareEnabled && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(SocialShare_1.X_SHARE + portal, 'x-share-dialog', 'width=626,height=436') }, { children: "x" }))), linkedinShareEnabled && ((0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ classes: { root: classes.shareMenuIcon }, fontSize: "small", onClick: () => window.open(SocialShare_1.LINKEDIN_SHARE + portal, 'linkedin-share-dialog', 'width=626,height=436') }, { children: "linkedin" })))] }))] }) }))] }) })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }
 exports.default = IncubatorDetail;

package/lib/cjs/components/IncubatorListWidget/CreateIncubatorDialog/CreateIncubatorDialog.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 react_intl_1 = require("react-intl");
 const material_1 = require("@mui/material");
 const api_services_1 = require("@selfcommunity/api-services");
@@ -32,7 +31,7 @@ const classes = {
     intro: `${constants_1.PREFIX}-intro`,
     submittedMessage: `${constants_1.PREFIX}-submitted-message`
 };
-const Root = (0, styles_1.styled)(BaseDialog_1.default, {
+const Root = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'CreateDialogRoot'
 })(() => ({}));

package/lib/cjs/components/IncubatorListWidget/IncubatorListWidget.js

@@ -3,9 +3,7 @@ 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 material_1 = require("@mui/material");
-const CardContent_1 = tslib_1.__importDefault(require("@mui/material/CardContent"));
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
@@ -15,8 +13,6 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
 const Incubator_1 = tslib_1.__importStar(require("../Incubator"));
-const Popover_1 = tslib_1.__importDefault(require("@mui/material/Popover"));
-const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
 const system_1 = require("@mui/system");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const CreateIncubatorDialog_1 = tslib_1.__importDefault(require("./CreateIncubatorDialog"));
@@ -37,12 +33,12 @@ const classes = {
     endMessage: `${constants_1.PREFIX}-end-message`,
     createDialog: `${constants_1.PREFIX}-create-dialog`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(({ theme }) => ({}));
@@ -222,7 +218,7 @@ function IncubatorListWidget(inProps) {
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const content = ((0, jsx_runtime_1.jsxs)(CardContent_1.default, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.header }, { 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.incubatorListWidget.title", defaultMessage: "ui.incubatorListWidget.title" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.helpPopover, color: "primary", "aria-label": "info", component: "span", onClick: handleClickHelpButton }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "help_outline" }) })), isOpen && ((0, jsx_runtime_1.jsx)(Popover_1.default, Object.assign({ open: isOpen, anchorEl: anchorEl, onClose: handlePopoverClose, anchorOrigin: {
+    const content = ((0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.header }, { 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.incubatorListWidget.title", defaultMessage: "ui.incubatorListWidget.title" }) })), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.helpPopover, color: "primary", "aria-label": "info", component: "span", onClick: handleClickHelpButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "help_outline" }) })), isOpen && ((0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: isOpen, anchorEl: anchorEl, onClose: handlePopoverClose, anchorOrigin: {
                             vertical: 'bottom',
                             horizontal: 'right'
                         } }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ sx: { p: '10px' } }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'span', sx: { whiteSpace: 'pre-line' } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorListWidget.popover", defaultMessage: "ui.incubatorListWidget.popover" }) })) })) })))] })), !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.incubatorListWidget.noResults", defaultMessage: "ui.incubatorListWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((incubator) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Incubator_1.default, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.id))) }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.actions }, { children: [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.incubatorListWidget.ShowAll", defaultMessage: "ui.incubatorListWidget.ShowAll" }) }))), (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", onClick: () => setOpenCreateIncubatorDialog(true) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorListWidget.SuggestNewTopic", defaultMessage: "ui.incubatorListWidget.SuggestNewTopic" }) }))] }))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorListWidget.title", defaultMessage: "ui.incubatorListWidget.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)(Incubator_1.IncubatorSkeleton, Object.assign({ elevation: 0 }, IncubatorProps)), height: isMobile ? '100vh' : 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.incubatorListWidget.noMoreIncubators", defaultMessage: "ui.incubatorListWidget.noMoreIncubators" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((incubator) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Incubator_1.default, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.id))) }) })) }))), openCreateIncubatorDialog && ((0, jsx_runtime_1.jsx)(CreateIncubatorDialog_1.default, { className: classes.createDialog, open: openCreateIncubatorDialog, onClose: handleCreateIncubatorDialogClose })), openIncubatorDetailDialog && ((0, jsx_runtime_1.jsx)(IncubatorDetail_1.default, { open: openIncubatorDetailDialog, onClose: handleIncubatorDetailDialogClose, incubator: detailObj, onSubscriptionsUpdate: handleSubscriptionsUpdate }))] }));

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

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const CardContent_1 = tslib_1.__importDefault(require("@mui/material/CardContent"));
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const Incubator_1 = require("../Incubator");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
@@ -12,7 +10,7 @@ const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -38,6 +36,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function IncubatorListWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(CardContent_1.default, { children: (0, jsx_runtime_1.jsx)(List_1.default, Object.assign({ className: classes.list }, { children: [...Array(4)].map((category, index) => ((0, jsx_runtime_1.jsx)(Incubator_1.IncubatorSkeleton, { elevation: 0 }, index))) })) }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((category, index) => ((0, jsx_runtime_1.jsx)(Incubator_1.IncubatorSkeleton, { elevation: 0 }, index))) })) }) })));
 }
 exports.default = IncubatorListWidgetSkeleton;

package/lib/cjs/components/IncubatorSubscribeButton/IncubatorSubscribeButton.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");
@@ -15,7 +15,7 @@ const PREFIX = 'SCIncubatorSubscribeButton';
 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/IncubatorSuggestionWidget/IncubatorSuggestionWidget.js

@@ -3,9 +3,7 @@ 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 material_1 = require("@mui/material");
-const CardContent_1 = tslib_1.__importDefault(require("@mui/material/CardContent"));
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -30,11 +28,11 @@ const classes = {
     dialogRoot: `${constants_1.PREFIX}-dialog-root`,
     endMessage: `${constants_1.PREFIX}-end-message`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot'
 })(() => ({}));
@@ -189,7 +187,7 @@ function IncubatorSuggestionWidget(inProps) {
     if (!state.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    const content = ((0, jsx_runtime_1.jsxs)(CardContent_1.default, { 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.incubatorSuggestionWidget.title", defaultMessage: "ui.incubatorSuggestionWidget.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.incubatorSuggestionWidget.noResults", defaultMessage: "ui.incubatorSuggestionWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((incubator) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Incubator_1.default, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.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.incubatorSuggestionWidget.ShowAll", defaultMessage: "ui.incubatorSuggestionWidget.ShowAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorSuggestionWidget.title", defaultMessage: "ui.incubatorSuggestionWidget.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)(Incubator_1.IncubatorSkeleton, Object.assign({ elevation: 0 }, IncubatorProps)), height: isMobile ? '100vh' : 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.incubatorSuggestionWidget.noMoreIncubators", defaultMessage: "ui.incubatorSuggestionWidget.noMoreIncubators" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((incubator) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Incubator_1.default, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.id))) }) })) }))), openIncubatorDetailDialog && ((0, jsx_runtime_1.jsx)(IncubatorDetail_1.default, { open: openIncubatorDetailDialog, onClose: handleIncubatorDetailDialogClose, incubator: detailObj, onSubscriptionsUpdate: handleSubscriptionsUpdate }))] }));
+    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.incubatorSuggestionWidget.title", defaultMessage: "ui.incubatorSuggestionWidget.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.incubatorSuggestionWidget.noResults", defaultMessage: "ui.incubatorSuggestionWidget.noResults" }) }))) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.slice(0, state.visibleItems).map((incubator) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Incubator_1.default, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.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.incubatorSuggestionWidget.ShowAll", defaultMessage: "ui.incubatorSuggestionWidget.ShowAll" }) })))] })), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.incubatorSuggestionWidget.title", defaultMessage: "ui.incubatorSuggestionWidget.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)(Incubator_1.IncubatorSkeleton, Object.assign({ elevation: 0 }, IncubatorProps)), height: isMobile ? '100vh' : 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.incubatorSuggestionWidget.noMoreIncubators", defaultMessage: "ui.incubatorSuggestionWidget.noMoreIncubators" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((incubator) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Incubator_1.default, Object.assign({ elevation: 0, incubator: incubator, subscribeButtonProps: { onSubscribe: handleSubscriptionsUpdate }, ButtonProps: { onClick: () => handleIncubatorDetailDialogOpening(incubator) } }, IncubatorProps)) }, incubator.id))) }) })) }))), openIncubatorDetailDialog && ((0, jsx_runtime_1.jsx)(IncubatorDetail_1.default, { open: openIncubatorDetailDialog, onClose: handleIncubatorDetailDialogClose, incubator: detailObj, onSubscriptionsUpdate: handleSubscriptionsUpdate }))] }));
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: content })));
 }
 exports.default = IncubatorSuggestionWidget;

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

@@ -2,9 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const CardContent_1 = tslib_1.__importDefault(require("@mui/material/CardContent"));
-const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const Incubator_1 = require("../Incubator");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
@@ -12,7 +10,7 @@ const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -38,6 +36,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function IncubatorSuggestionWidgetSkeleton(props) {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(CardContent_1.default, { children: (0, jsx_runtime_1.jsx)(List_1.default, Object.assign({ className: classes.list }, { children: [...Array(4)].map((category, index) => ((0, jsx_runtime_1.jsx)(Incubator_1.IncubatorSkeleton, { elevation: 0 }, index))) })) }) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((category, index) => ((0, jsx_runtime_1.jsx)(Incubator_1.IncubatorSkeleton, { elevation: 0 }, index))) })) }) })));
 }
 exports.default = IncubatorSuggestionWidgetSkeleton;

package/lib/cjs/components/InlineComposerWidget/InlineComposerWidget.js

@@ -6,7 +6,6 @@ const react_1 = tslib_1.__importStar(require("react"));
 const types_1 = require("@selfcommunity/types");
 const react_core_1 = require("@selfcommunity/react-core");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const react_intl_1 = require("react-intl");
 const notistack_1 = require("notistack");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
@@ -21,7 +20,7 @@ const classes = {
     input: `${constants_1.PREFIX}-input`,
     avatar: `${constants_1.PREFIX}-avatar`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
@@ -93,14 +92,15 @@ function InlineComposerWidget(inProps) {
             onSuccess(feedObject);
         }
         else {
-            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.inlineComposerWidget.success", defaultMessage: "ui.inlineComposerWidget.success" }), {
+            const messageId = feedObject.scheduled_at ? 'ui.composer.scheduled.success' : 'ui.inlineComposerWidget.success';
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: messageId, defaultMessage: messageId }), {
                 variant: 'success',
                 autoHideDuration: 3000
             });
         }
         setOpen(false);
     };
-    if (!react_core_1.UserUtils.isStaff(scUserContext.user) && onlyStaffEnabled) {
+    if (!react_core_1.UserUtils.isStaff(scUserContext.user) && !react_core_1.UserUtils.isPublisher(scUserContext.user) && onlyStaffEnabled) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
     return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.input }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", disableFocusRipple: true, disableRipple: true, disableElevation: true, onClick: handleOpen, fullWidth: true, color: "inherit" }, { children: label !== null && label !== void 0 ? label : (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.inlineComposerWidget.label", defaultMessage: "ui.inlineComposerWidget.label" }) })) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: !scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular" })) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user) }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar }) }))) }))] })) })), open && ((0, jsx_runtime_1.jsx)(Composer_1.default, { open: open, mediaObjectTypes: mediaObjectTypes, defaultValue: defaultValue, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess, feedType: feedType }))] }));

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

@@ -2,8 +2,6 @@
 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 Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
@@ -13,7 +11,7 @@ const classes = {
     input: `${constants_1.PREFIX}-input`,
     avatar: `${constants_1.PREFIX}-avatar`
 };
-const Root = (0, styles_1.styled)(Widget_1.default, {
+const Root = (0, material_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot'
 })(() => ({}));
@@ -41,6 +39,6 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
  *
  */
 function InlineComposerWidgetSkeleton() {
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.input }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "text" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.avatar, animation: "wave", variant: "circular" }) }))] })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.content }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.input }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", variant: "text" }) })), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.avatar, animation: "wave", variant: "circular" }) }))] })) })));
 }
 exports.default = InlineComposerWidgetSkeleton;

package/lib/cjs/components/InviteUserEventButton/InviteUserEventButton.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 lab_1 = require("@mui/lab");
-const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
 const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -16,7 +16,7 @@ const PREFIX = 'SCInviteUserEventButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const InviteButton = (0, styles_1.styled)(lab_1.LoadingButton, {
+const InviteButton = (0, material_1.styled)(lab_1.LoadingButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root

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

@@ -0,0 +1,42 @@
+import { SCLessonActionsType } from '../../types';
+export interface LessonAppbarProps {
+    /**
+     * The appbar title
+     */
+    title: string;
+    /**
+     *  If comments are enabled for the lesson showed
+     */
+    showComments: boolean;
+    /**
+     * The edit mode
+     * @default false
+     */
+    editMode: boolean;
+    /**
+     * onArrowBack Callback
+     */
+    onArrowBackClick?: () => void;
+    /**
+     * onSaveCallback
+     */
+    onSave: () => void;
+    /**
+     * The active panel
+     */
+    activePanel: SCLessonActionsType | null;
+    /**
+     * Handles panel opening
+     * @param panel
+     */
+    handleOpen: (panel: SCLessonActionsType) => void;
+    /**
+     * Indicates whether an update is currently in progress.
+     */
+    updating: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function LessonAppbar(inProps: LessonAppbarProps): JSX.Element;

package/lib/cjs/components/LessonAppbar/LessonAppbar.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const material_1 = require("@mui/material");
+const constants_1 = require("./constants");
+const types_1 = require("../../types");
+const react_intl_1 = require("react-intl");
+const lab_1 = require("@mui/lab");
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    startItems: `${constants_1.PREFIX}-start-items`,
+    endItems: `${constants_1.PREFIX}-end-items`,
+    title: `${constants_1.PREFIX}-title`
+};
+const Root = (0, material_1.styled)(material_1.AppBar, {
+    name: constants_1.PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => [styles.root],
+    shouldForwardProp: (prop) => prop !== 'open'
+})(({ theme }) => ({}));
+function LessonAppbar(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className = null, title = '', showComments, activePanel = null, handleOpen, onSave, editMode, onArrowBackClick, updating } = props, rest = tslib_1.__rest(props, ["className", "title", "showComments", "activePanel", "handleOpen", "onSave", "editMode", "onArrowBackClick", "updating"]);
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.Toolbar, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.startItems }, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title }))] })), editMode ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.SETTINGS), color: "primary" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "settings" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.endItems }, { children: [showComments && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.COMMENTS) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chat_bubble_outline" }) }))), (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(types_1.SCLessonActionsType.LESSONS) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }))] })))] }) })));
+}
+exports.default = LessonAppbar;