@selfcommunity/react-ui 0.11.0-alpha.99 → 0.11.0-mui7.13

package/lib/cjs/components/Events/PastEventsFilter.js

@@ -5,7 +5,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const react_intl_1 = require("react-intl");
 const constants_1 = require("./constants");
-const Events_1 = require("./Events");
+const EventsChipRoot = (0, material_1.styled)(material_1.Chip, {
+    name: constants_1.PREFIX,
+    slot: 'EventsChipRoot',
+    shouldForwardProp: (prop) => prop !== 'showPastEvents'
+})(() => ({}));
 function PastEventsFilter(inProps) {
     // PROPS
     const props = (0, material_1.useThemeProps)({
@@ -16,7 +20,7 @@ function PastEventsFilter(inProps) {
     if (autoHide) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(Events_1.EventsChipRoot, Object.assign({ color: showPastEvents ? 'secondary' : 'default', variant: showPastEvents ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByPastEvents", defaultMessage: "ui.events.filterByPastEvents" }), onClick: handleClick, 
+    return ((0, jsx_runtime_1.jsx)(EventsChipRoot, Object.assign({ color: showPastEvents ? 'secondary' : 'default', variant: showPastEvents ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByPastEvents", defaultMessage: "ui.events.filterByPastEvents" }), onClick: handleClick, 
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
         showPastEvents: showPastEvents, deleteIcon: showPastEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showPastEvents ? handleDeleteClick : undefined }, rest)));

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

@@ -38,6 +38,6 @@ const Root = (0, material_1.styled)(material_1.Box, {
  */
 function EventsSkeleton(inProps) {
     const { className, EventSkeletonProps = {}, eventsNumber = 8, GridContainerComponentProps = {}, GridItemComponentProps = {} } = inProps, rest = tslib_1.__rest(inProps, ["className", "EventSkeletonProps", "eventsNumber", "GridContainerComponentProps", "GridItemComponentProps"]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.events }, GridContainerComponentProps, { children: [...Array(eventsNumber)].map((event, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, GridItemComponentProps, { className: classes.item }, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonProps)) }), index))) })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.events }, GridContainerComponentProps, { children: [...Array(eventsNumber)].map((_event, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { md: 6 } }, GridItemComponentProps, { className: classes.item }, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonProps)) }), index))) })) })));
 }
 exports.default = EventsSkeleton;

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

@@ -9,11 +9,11 @@ import { StickyBoxProps } from '../../shared/StickyBox';
 /**
  * FeedSidebarProps has the same props as StickyBoxProps type
  */
-export declare type FeedSidebarProps = StickyBoxProps;
+export type FeedSidebarProps = StickyBoxProps;
 /**
  * FeedRef props
  */
-export declare type FeedRef = {
+export type FeedRef = {
     addFeedData: (obj: any, syncPagination?: boolean) => void;
     refresh: () => void;
     getCurrentFeedObjectIds: () => number[];

package/lib/cjs/components/Feed/Feed.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-// @ts-nocheck
 const react_1 = tslib_1.__importStar(require("react"));
 const react_core_1 = require("@selfcommunity/react-core");
 const material_1 = require("@mui/material");
@@ -93,11 +92,11 @@ const Feed = (inProps, ref) => {
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
-    const limit = (0, react_1.useMemo)(() => endpointQueryParams.limit || Pagination_1.DEFAULT_PAGINATION_LIMIT, [endpointQueryParams]);
+    const limit = +(0, react_1.useMemo)(() => endpointQueryParams.limit || Pagination_1.DEFAULT_PAGINATION_LIMIT, [endpointQueryParams]);
     const offset = (0, react_1.useMemo)(() => {
         if (prefetchedData) {
-            const currentOffset = (0, utils_1.getQueryStringParameter)(prefetchedData.previous, 'offset') || 0;
-            return prefetchedData.previous ? parseInt(currentOffset) + limit : 0;
+            const currentOffset = +(0, utils_1.getQueryStringParameter)(prefetchedData.previous, 'offset') || 0;
+            return prefetchedData.previous ? currentOffset + limit : 0;
         }
         return endpointQueryParams.offset || 0;
     }, [endpointQueryParams, prefetchedData]);
@@ -178,7 +177,7 @@ const Feed = (inProps, ref) => {
                     component: FooterWidget_1.default,
                     componentProps: {},
                     column: 'right',
-                    position: 1
+                    position: 100
                 }
             ])
     ]
@@ -291,10 +290,10 @@ const Feed = (inProps, ref) => {
     }, [feedDataObject.componentLoaded, setHeadData, setFeedDataLeft, setFeedDataRight]);
     /**
      * Callback subscribe events
-     * @param msg
+     * @param _msg
      * @param data
      */
-    const subscriber = (msg, data) => {
+    const subscriber = (_msg, data) => {
         if (data.refresh) {
             refresh();
         }
@@ -401,8 +400,8 @@ const Feed = (inProps, ref) => {
             setHeadData([...[data], ...headData]);
             if (syncPagination) {
                 // Adding an element, re-sync next and previous of feedDataObject
-                const nextOffset = parseInt((0, utils_1.getQueryStringParameter)(feedDataObject.next, 'offset') || feedDataObject.results.length - 1) + 1;
-                const previousOffset = parseInt((0, utils_1.getQueryStringParameter)(feedDataObject.previous, 'offset') || offset) + 1;
+                const nextOffset = (parseInt((0, utils_1.getQueryStringParameter)(feedDataObject.next, 'offset')) || feedDataObject.results.length - 1) + 1;
+                const previousOffset = (parseInt((0, utils_1.getQueryStringParameter)(feedDataObject.previous, 'offset')) || +offset) + 1;
                 feedDataObject.updateState({
                     previous: (0, utils_1.updateQueryStringParameter)(feedDataObject.previous, 'offset', previousOffset),
                     next: (0, utils_1.updateQueryStringParameter)(feedDataObject.next, 'offset', nextOffset),
@@ -429,8 +428,8 @@ const Feed = (inProps, ref) => {
         return ((0, jsx_runtime_1.jsx)(VirtualizedScroller_1.VirtualScrollChild, Object.assign({ onHeightChange: onItemHeightChange }, { children: item.type === 'widget' ? ((0, jsx_runtime_1.jsx)(item.component, Object.assign({ id: `${Feed_1.WIDGET_PREFIX_KEY}${item.position}` }, item.componentProps, (item.publishEvents && { publicationChannel: id }), savedState, { onStateChange: onItemStateChange, onHeightChange: onItemHeightChange }))) : ((0, jsx_runtime_1.jsx)(ItemComponent, Object.assign({ id: `item_${itemIdGenerator(item)}` }, itemPropsGenerator(scUserContext.user, item), ItemProps, { sx: { width: '100%' } }, savedState, { onStateChange: onItemStateChange, onHeightChange: onItemHeightChange }))) })));
     }, [authUserId]);
     if (feedDataObject.isLoadingNext && !feedDataLeft.length) {
-        return ((0, jsx_runtime_1.jsx)(Skeleton_2.default, { children: [...Array(3)].map((v, i) => ((0, jsx_runtime_1.jsx)(ItemSkeleton, Object.assign({}, ItemSkeletonProps), i))) }));
+        return ((0, jsx_runtime_1.jsx)(Skeleton_2.default, { children: [...Array(3)].map((_v, i) => ((0, jsx_runtime_1.jsx)(ItemSkeleton, Object.assign({}, ItemSkeletonProps), i))) }));
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, spacing: 2, id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: [advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR) ? ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(CustomAdv_1.default, Object.assign({ position: types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR }, CustomAdvProps)) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: (0, jsx_runtime_1.jsxs)(InfiniteScroll_1.default, Object.assign({ ref: containerRef, className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: (0, jsx_runtime_1.jsx)(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: (0, jsx_runtime_1.jsx)(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: '90%', endMessage: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.end }, { children: [(0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: endMessage }) })), FooterComponent ? (0, jsx_runtime_1.jsx)(FooterComponent, Object.assign({}, FooterComponentProps)) : null] })), refreshFunction: refresh, pullDownToRefresh: true, pullDownToRefreshThreshold: 1000, pullDownToRefreshContent: null, releaseToRefreshContent: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "contained", className: classes.refresh }, { children: refreshMessage })), style: { overflow: 'visible' } }, (scrollableTargetId && { scrollableTarget: scrollableTargetId }), { children: [renderHeaderComponent(), feedDataObject.count === 0 && emptyFeedPlaceholder && emptyFeedPlaceholder, (0, jsx_runtime_1.jsx)(VirtualizedScroller_1.default, Object.assign({ className: classes.leftItems, items: feedDataLeft, itemComponent: InnerItem, onMount: onScrollerMount, onScrollerStateChange: onScrollerStateChange, getItemId: getScrollItemId, preserveScrollPosition: true, preserveScrollPositionOnPrependItems: true, cacheScrollStateKey: react_core_1.SCCache.getVirtualizedScrollStateCacheKey(id), cacheScrollerPositionKey: react_core_1.SCCache.getFeedSPCacheKey(id), cacheStrategy: cacheStrategy }, (scrollableTargetId && { getScrollableContainer: () => document.getElementById(scrollableTargetId) }), VirtualizedScrollerProps))] })) })), feedDataRight.length > 0 && !hideAdvs && ((0, jsx_runtime_1.jsx)(material_1.Hidden, Object.assign({ smDown: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: (0, jsx_runtime_1.jsx)(StickyBox_1.default, Object.assign({ className: classes.right }, FeedSidebarProps, { children: (0, jsx_runtime_1.jsx)(react_1.default.Suspense, Object.assign({ fallback: (0, jsx_runtime_1.jsx)(Skeleton_1.GenericSkeleton, {}) }, { children: feedDataRight.map((d, i) => ((0, jsx_runtime_1.jsx)(d.component, Object.assign({}, d.componentProps), i))) })) })) })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, width: "100%", spacing: 2, id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: [advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR) ? ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { md: 12 } }, { children: (0, jsx_runtime_1.jsx)(CustomAdv_1.default, Object.assign({ position: types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR }, CustomAdvProps)) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { md: 7 } }, { children: (0, jsx_runtime_1.jsxs)(InfiniteScroll_1.default, Object.assign({ ref: containerRef, className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: (0, jsx_runtime_1.jsx)(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: (0, jsx_runtime_1.jsx)(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: "90%", endMessage: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.end }, { children: [(0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: endMessage }) })), FooterComponent ? (0, jsx_runtime_1.jsx)(FooterComponent, Object.assign({}, FooterComponentProps)) : null] })), refreshFunction: refresh, pullDownToRefresh: true, pullDownToRefreshThreshold: 1000, pullDownToRefreshContent: null, releaseToRefreshContent: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "contained", className: classes.refresh }, { children: refreshMessage })), style: { overflow: 'visible' } }, (scrollableTargetId && { scrollableTarget: scrollableTargetId }), { children: [renderHeaderComponent(), feedDataObject.count === 0 && emptyFeedPlaceholder && emptyFeedPlaceholder, (0, jsx_runtime_1.jsx)(VirtualizedScroller_1.default, Object.assign({ className: classes.leftItems, items: feedDataLeft, itemComponent: InnerItem, onMount: onScrollerMount, onScrollerStateChange: onScrollerStateChange, getItemId: getScrollItemId, preserveScrollPosition: true, preserveScrollPositionOnPrependItems: true, cacheScrollStateKey: react_core_1.SCCache.getVirtualizedScrollStateCacheKey(id), cacheScrollerPositionKey: react_core_1.SCCache.getFeedSPCacheKey(id), cacheStrategy: cacheStrategy }, (scrollableTargetId && { getScrollableContainer: () => document.getElementById(scrollableTargetId) }), VirtualizedScrollerProps))] })) })), feedDataRight.length > 0 && !hideAdvs && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ sx: { display: { sx: 'none', sm: 'block' } }, size: { md: 5 } }, { children: (0, jsx_runtime_1.jsx)(StickyBox_1.default, Object.assign({ className: classes.right }, FeedSidebarProps, { children: (0, jsx_runtime_1.jsx)(react_1.default.Suspense, Object.assign({ fallback: (0, jsx_runtime_1.jsx)(Skeleton_1.GenericSkeleton, {}) }, { children: feedDataRight.map((d, i) => ((0, jsx_runtime_1.jsx)(d.component, Object.assign({}, d.componentProps), i))) })) })) })))] })));
 };
 exports.default = (0, react_1.forwardRef)(Feed);

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

@@ -11,7 +11,7 @@ interface FeedSkeletonMap {
      */
     className?: string;
 }
-export declare type FeedSkeletonProps = React.PropsWithChildren<FeedSkeletonMap>;
+export type FeedSkeletonProps = React.PropsWithChildren<FeedSkeletonMap>;
 /**
  * > API documentation for the Community-JS Feed Skeleton component. Learn about the available props and the CSS API.
 

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

@@ -41,6 +41,6 @@ const Root = (0, material_1.styled)(material_1.Grid, {
 function FeedSkeleton(props) {
     // PROPS
     const { children = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.GenericSkeleton, { sx: { mb: 2 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.GenericSkeleton, { sx: { mb: 2 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.GenericSkeleton, { sx: { mb: 2 } })] })), sidebar = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.GenericSkeleton, { sx: { mb: 2 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.GenericSkeleton, { sx: { mb: 2 } })] })), className } = props;
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, spacing: 2, className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.left }, { children: children })) })), (0, jsx_runtime_1.jsx)(material_1.Hidden, Object.assign({ smDown: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.right }, { children: sidebar })) })) }))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, width: "100%", spacing: 2, className: (0, classnames_1.default)(classes.root, className) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { md: 7 } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.left }, { children: children })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ sx: { display: { sx: 'none', sm: 'block' } }, size: { md: 5 } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.right }, { children: sidebar })) }))] })));
 }
 exports.default = FeedSkeleton;

package/lib/cjs/components/FeedObject/Actions/Actions.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 material_1 = require("@mui/material");
-const material_2 = require("@mui/material");
 const Vote_1 = tslib_1.__importDefault(require("./Vote"));
 const Comment_1 = tslib_1.__importDefault(require("./Comment"));
 const Share_1 = tslib_1.__importDefault(require("./Share"));
@@ -15,7 +14,7 @@ const classes = {
     root: `${constants_1.PREFIX}-actions-root`,
     action: `${constants_1.PREFIX}-actions-action`
 };
-const Root = (0, material_1.styled)(material_2.Grid, {
+const Root = (0, material_1.styled)(material_1.Grid, {
     name: constants_1.PREFIX,
     slot: 'ActionsRoot'
 })(() => ({}));
@@ -44,6 +43,6 @@ function Actions(props) {
      * Renders action section
      */
     const columnWidth = getColumnWidth();
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, className: (0, classnames_1.default)(classes.root, className) }, { children: [!hideVoteAction && ((0, jsx_runtime_1.jsx)(material_2.Grid, Object.assign({ item: true, xs: columnWidth, className: classes.action }, { children: (0, jsx_runtime_1.jsx)(Vote_1.default, Object.assign({ feedObjectId: feedObjectId || obj.id, feedObject: obj, feedObjectType: feedObjectType || obj.type }, VoteActionProps)) }))), !hideCommentAction && ((0, jsx_runtime_1.jsx)(material_2.Grid, Object.assign({ item: true, xs: columnWidth, className: classes.action }, { children: (0, jsx_runtime_1.jsx)(Comment_1.default, Object.assign({ feedObject: obj, feedObjectType: feedObjectType, feedObjectTemplate: feedObjectTemplate, onCommentAction: handleExpandActivities }, CommentActionProps)) }))), !hideShareAction && ((0, jsx_runtime_1.jsx)(material_2.Grid, Object.assign({ item: true, xs: columnWidth, className: classes.action }, { children: (0, jsx_runtime_1.jsx)(Share_1.default, Object.assign({ feedObject: obj, feedObjectType: feedObjectType, id: feedObjectId }, ShareActionProps)) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, width: "100%", className: (0, classnames_1.default)(classes.root, className) }, { children: [!hideVoteAction && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: columnWidth, className: classes.action }, { children: (0, jsx_runtime_1.jsx)(Vote_1.default, Object.assign({ feedObjectId: feedObjectId || obj.id, feedObject: obj, feedObjectType: feedObjectType || obj.type }, VoteActionProps)) }))), !hideCommentAction && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: columnWidth, className: classes.action }, { children: (0, jsx_runtime_1.jsx)(Comment_1.default, Object.assign({ feedObject: obj, feedObjectType: feedObjectType, feedObjectTemplate: feedObjectTemplate, onCommentAction: handleExpandActivities }, CommentActionProps)) }))), !hideShareAction && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: columnWidth, className: classes.action }, { children: (0, jsx_runtime_1.jsx)(Share_1.default, Object.assign({ feedObject: obj, feedObjectType: feedObjectType, id: feedObjectId }, ShareActionProps)) })))] })));
 }
 exports.default = Actions;

package/lib/cjs/components/FeedObject/Activities/ActivitiesMenu/ActivitiesMenu.d.ts

@@ -24,4 +24,4 @@ export interface ActivitiesMenuProps {
      */
     [p: string]: any;
 }
-export default function ActivitiesMenu(props: ActivitiesMenuProps): JSX.Element;
+export default function ActivitiesMenu(props: ActivitiesMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -76,23 +76,25 @@ function ActivitiesMenu(props) {
      */
     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.Box, Object.assign({ className: classes.selector }, { children: (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedObject.activitiesMenu.tooltipTitle", defaultMessage: "ui.feedObject.activitiesMenu.tooltipTitle" }) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Button, Object.assign({ variant: "text", size: "small", onClick: handleOpen }, { children: [selectedActivities === feedObject_1.SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS && followEnabled
                                 ? intl.formatMessage(messages.followedComments)
-                                : intl.formatMessage(messages[`${(0, utils_1.camelCase)(selectedActivities)}`]), "\u00A0 ", (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" })] })) })) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuContent() }))) : ((0, jsx_runtime_1.jsx)(material_1.Menu, Object.assign({ anchorEl: anchorEl, open: true, onClose: handleClose, onClick: handleClose, PaperProps: {
-                        elevation: 0,
-                        sx: {
-                            overflow: 'visible',
-                            filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-                            mt: 1.5,
-                            '&:before': {
-                                content: '""',
-                                display: 'block',
-                                position: 'absolute',
-                                top: 0,
-                                right: 14,
-                                width: 10,
-                                height: 10,
-                                bgcolor: 'background.paper',
-                                transform: 'translateY(-50%) rotate(45deg)',
-                                zIndex: 0
+                                : intl.formatMessage(messages[`${(0, utils_1.camelCase)(selectedActivities)}`]), "\u00A0 ", (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "expand_more" })] })) })) })), open && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuContent() }))) : ((0, jsx_runtime_1.jsx)(material_1.Menu, Object.assign({ anchorEl: anchorEl, open: true, onClose: handleClose, onClick: handleClose, slotProps: {
+                        paper: {
+                            elevation: 0,
+                            sx: {
+                                overflow: 'visible',
+                                filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                                mt: 1.5,
+                                '&:before': {
+                                    content: '""',
+                                    display: 'block',
+                                    position: 'absolute',
+                                    top: 0,
+                                    right: 14,
+                                    width: 10,
+                                    height: 10,
+                                    bgcolor: 'background.paper',
+                                    transform: 'translateY(-50%) rotate(45deg)',
+                                    zIndex: 0
+                                }
                             }
                         }
                     }, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, { children: renderMenuContent() }))) }))] })));

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

@@ -444,7 +444,7 @@ function FeedObject(inProps) {
     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)(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: [scUserContext.user && markRead && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: classes.new }, { children: "NEW" })), (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] }))] })), (((_b = obj.addressing) !== null && _b !== void 0 ? _b : []).filter((tag) => tag.visible).length > 0 || (obj === null || obj === void 0 ? void 0 : obj.group)) && (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.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Bullet_1.default, {}), ((_c = obj.recipients) === null || _c === void 0 ? void 0 : _c.length) > 0 ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToRecipients)}` }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "private" })) }))) : ((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 ||
+        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: [scUserContext.user && markRead && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: classes.new }, { children: "NEW" })), (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] }))] })), (((_b = obj.addressing) !== null && _b !== void 0 ? _b : []).filter((tag) => tag.visible).length > 0 || (obj === null || obj === void 0 ? void 0 : obj.group)) && (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, showDescription: true } })) : 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.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Bullet_1.default, {}), ((_c = obj.recipients) === null || _c === void 0 ? void 0 : _c.length) > 0 ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: `${intl.formatMessage(messages.visibleToRecipients)}` }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ color: "disabled", fontSize: "small" }, { children: "private" })) }))) : ((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))) })), !obj.draft && ((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: [!commentsEnabled && !allShareEnabled ? ((0, jsx_runtime_1.jsx)(Vote_1.default, { feedObjectId: feedObjectId || (feedObject === null || feedObject === void 0 ? void 0 : feedObject.id), feedObjectType: feedObjectType, feedObject: obj, inlineAction: true, onVoteAction: handleVoteSuccess, className: classes.vote })) : (!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, hideVoteAction: !allShareEnabled && !commentsEnabled, hideCommentAction: !commentsEnabled || template === feedObject_1.SCFeedObjectTemplateType.DETAIL || (hasEvent && !((_f = (_d = obj === null || obj === void 0 ? void 0 : obj.medias[0].embed) === null || _d === void 0 ? void 0 : _d.metadata) === null || _f === void 0 ? void 0 : _f.active)), hideShareAction: !allShareEnabled, handleExpandActivities: template === feedObject_1.SCFeedObjectTemplateType.PREVIEW ? handleExpandActivities : null, VoteActionProps: { onVoteAction: handleVoteSuccess } }, ActionsProps)), commentsEnabled &&
                                 ((template === feedObject_1.SCFeedObjectTemplateType.DETAIL && (!hasEvent || ((_k = (_j = (_h = (_g = obj === null || obj === void 0 ? void 0 : obj.medias) === null || _g === void 0 ? void 0 : _g[0]) === null || _h === void 0 ? void 0 : _h.embed) === null || _j === void 0 ? void 0 : _j.metadata) === null || _k === void 0 ? void 0 : _k.active))) ||

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

@@ -11,4 +11,4 @@ export interface FooterWidgetProps extends WidgetProps {
      */
     [p: string]: any;
 }
-export default function FooterWidget(inProps: FooterWidgetProps): JSX.Element;
+export default function FooterWidget(inProps: FooterWidgetProps): import("react/jsx-runtime").JSX.Element;

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

@@ -150,6 +150,14 @@ function GroupActionsMenu(inProps) {
     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)(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 })] }));
+    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, slotProps: {
+                        paper: {
+                            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, slotProps: {
+                        paper: {
+                            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.js

@@ -16,7 +16,7 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Autocomplete, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Group Autocomplete component. Learn about the available props and the CSS API.
@@ -72,7 +72,7 @@ const GroupAutocomplete = (inProps) => {
     const handleClose = () => {
         setOpen(false);
     };
-    const handleChange = (event, value) => {
+    const handleChange = (_event, value) => {
         setValue(value);
     };
     // Render
@@ -87,7 +87,9 @@ 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)(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] })) }) })));
+            return ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
+                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'groups', endAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isLoading && (0, jsx_runtime_1.jsx)(material_1.CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) })
+                } })));
         } }, rest)));
 };
 exports.default = GroupAutocomplete;

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

@@ -252,37 +252,27 @@ function GroupForm(inProps) {
     return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, disableEscapeKeyDown: true, onClose: handleClose, className: (0, classnames_1.default)(classes.root, className), actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                 Object.keys(error).length !== 0 ||
                 field.name.length > Group_1.GROUP_TITLE_MAX_LENGTH ||
-                field.name.description > Group_1.GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: group ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" })) })) }, rest, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { children: field.imageOriginal ? (0, jsx_runtime_1.jsx)("img", { src: field.imageOriginal, alt: "avatar" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "icon_image" }) }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangeGroupPicture_1.default, { isCreationMode: true, onChange: handleChangeAvatar }), (0, jsx_runtime_1.jsx)(ChangeGroupCover_1.default, { isCreationMode: true, onChange: handleChangeCover })] })] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, { children: error.emotionalImageOriginalError || error.imageOriginalError ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })) }))] }), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
-                                endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Group_1.GROUP_TITLE_MAX_LENGTH - field.name.length }))
-                            }, error: Boolean(((_c = field === null || field === void 0 ? void 0 : field.name) === null || _c === void 0 ? void 0 : _c.length) > Group_1.GROUP_TITLE_MAX_LENGTH), helperText: ((_d = field === null || field === void 0 ? void 0 : field.name) === null || _d === void 0 ? void 0 : _d.length) > Group_1.GROUP_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH })))
+                field.name.description > Group_1.GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: group ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" })) })) }, rest, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { children: field.imageOriginal ? (0, jsx_runtime_1.jsx)("img", { src: field.imageOriginal, alt: "avatar" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "icon_image" }) }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangeGroupPicture_1.default, { isCreationMode: true, onChange: handleChangeAvatar }), (0, jsx_runtime_1.jsx)(ChangeGroupCover_1.default, { isCreationMode: true, onChange: handleChangeCover })] })] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, { children: error.emotionalImageOriginalError || error.imageOriginalError ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })) }))] }), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, slotProps: {
+                                input: {
+                                    endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Group_1.GROUP_TITLE_MAX_LENGTH - field.name.length }))
+                                }
+                            }, error: Boolean(((_c = field === null || field === void 0 ? void 0 : field.name) === null || _c === void 0 ? void 0 : _c.length) > Group_1.GROUP_TITLE_MAX_LENGTH), helperText: ((_d = field === null || field === void 0 ? void 0 : field.name) === null || _d === void 0 ? void 0 : _d.length) > Group_1.GROUP_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, slotProps: {
+                                input: {
+                                    endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH })))
+                                }
                             }, error: Boolean(((_f = field.description) === null || _f === void 0 ? void 0 : _f.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_g = field.description) === null || _g === void 0 ? void 0 : _g.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { 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.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                            // @ts-ignore
                                             b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                         } }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private", defaultMessage: "ui.groupForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: group && group.privacy === types_1.SCGroupPrivacyType.PRIVATE }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.public", defaultMessage: "ui.groupForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.public.info", defaultMessage: "ui.groupForm.privacy.public.info", values: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                            // @ts-ignore
                                             b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                         } })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: group && group.privacy === types_1.SCGroupPrivacyType.PRIVATE ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private.info.edit", defaultMessage: "ui.groupForm.private.public.info.edit", values: {
-                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                                // @ts-ignore
                                                 b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                             } })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private.info", defaultMessage: "ui.groupForm.private.public.info", values: {
-                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                                // @ts-ignore
                                                 b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                             } })) })) }))] }))), privateEnabled && visibilityEnabled && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.visibilitySection }, { children: ((!field.isPublic && !group) || (group && !field.isPublic)) && ((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.groupForm.visibility.title", defaultMessage: "ui.groupForm.visibility.title", values: {
-                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                                // @ts-ignore
                                                 b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                             } }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isVisible }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility_off" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isVisible }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.visibilitySectionInfo }, { children: !field.isVisible ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
-                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                                // @ts-ignore
                                                 b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                             } })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
-                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                                // @ts-ignore
                                                 b: (chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
                                             } })) }))] })) })))] })), isPaymentsEnabled && isStaff && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.paywallsConfiguratorWrap }, { children: (0, jsx_runtime_1.jsx)(PaywallsConfigurator_1.default, Object.assign({}, (group && { contentId: group.id }), { contentType: types_1.SCContentType.GROUP, onChangeContentAccessType: handleChangeContentAccessType, onChangePaymentProducts: handleChangePaymentsProducts })) }))), !group && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.inviteSection }, { children: (0, jsx_runtime_1.jsx)(GroupInviteButton_1.default, { handleInvitations: handleInviteSection }) }))] }))] }) })));
 }

package/lib/cjs/components/GroupInviteButton/GroupInviteButton.js

@@ -38,13 +38,13 @@ const classes = {
 const Root = (0, material_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.dialogRoot
+})(() => ({}));
 /**
  *> API documentation for the Community-JS Group Invite Button component. Learn about the available props and the CSS API.
  *
@@ -205,7 +205,7 @@ function GroupInviteButton(inProps) {
         }
     };
     // Autocomplete Handlers
-    const handleInputChange = (event, value, reason) => {
+    const handleInputChange = (_event, value, reason) => {
         switch (reason) {
             case 'input':
                 setValue(value);
@@ -255,7 +255,9 @@ function GroupInviteButton(inProps) {
     /**
      * Renders root object
      */
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClose, variant: scGroup ? 'contained' : 'outlined', color: scGroup ? 'secondary' : 'inherit', startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton", defaultMessage: "ui.groupInviteButton" }) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.dialogTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.title", defaultMessage: "ui.groupInviteButton.dialog.title" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }) }))] }) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.dialogContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) }) }))) }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleClose, variant: scGroup ? 'contained' : 'outlined', color: scGroup ? 'secondary' : 'inherit', startIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "add" }) }, rest, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton", defaultMessage: "ui.groupInviteButton" }) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ DialogContentProps: { dividers: false }, open: true, className: classes.dialogRoot, title: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: handleClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "arrow_back" }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.dialogTitle }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.title", defaultMessage: "ui.groupInviteButton.dialog.title" }) })), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }) }))] }) }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.dialogContent }, { children: [(0, jsx_runtime_1.jsx)(material_1.Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, filterOptions: filterOptions, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ ml: 1 }, { children: option.username }))] }))), renderInput: (params) => ((0, jsx_runtime_1.jsx)(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, slotProps: {
+                                    input: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "start" }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon }, { children: "search" })) })), params.InputProps.startAdornment] })) })
+                                } }))) }), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.invitedBox }, { children: invited.map((option, index) => ((0, jsx_runtime_1.jsx)(material_1.Chip, { avatar: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.username, src: option.avatar }), label: option.username, onDelete: () => {
                                     handleDelete(option);
                                 }, style: { marginRight: 8 } }, index))) })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.suggested }, { children: [list.length !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4", fontWeight: "bold" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.content.list", defaultMessage: "ui.groupInviteButton.dialog.content.list" }) }))), list.slice(0, 5).map((user, index) => ((0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), user: user, userId: user.id, buttonProps: { onClick: () => handleUserInvite(user) } }, index)))] }))] })) })))] }));
 }

package/lib/cjs/components/GroupSettingsIconButton/GroupSettingsIconButton.js

@@ -133,9 +133,15 @@ function GroupSettingsIconButton(inProps) {
             ];
         }
     };
-    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.groupSettingsIconButton.dialog.msg", defaultMessage: "ui.groupSettingsIconButton.dialog.msg", values: {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
+    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, slotProps: {
+                        paper: {
+                            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, slotProps: {
+                        paper: {
+                            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.groupSettingsIconButton.dialog.msg", defaultMessage: "ui.groupSettingsIconButton.dialog.msg", values: {
                         b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }),
                         user: user.username,
                         group: group.name

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

@@ -174,21 +174,21 @@ function Groups(inProps) {
     /**
      * Renders groups list
      */
-    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) => {
+    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, width: "100%", direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { 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 }))] })))
+                        }, slotProps: {
+                            input: {
+                                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: 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))) })) }))) })] }));
+                            } }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 2 }, className: classes.groups }, { children: groups.map((group) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { 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,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-;
 const constants_1 = require("./constants");
 const material_1 = require("@mui/material");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -38,6 +37,6 @@ const Root = (0, material_1.styled)(material_1.Box, {
  */
 function GroupsSkeleton(inProps) {
     const { className, GroupSkeletonProps = {}, groupsNumber = 20 } = inProps, rest = tslib_1.__rest(inProps, ["className", "GroupSkeletonProps", "groupsNumber"]);
-    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.groups }, { children: [...Array(groupsNumber)].map((category, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6 }, { children: (0, jsx_runtime_1.jsx)(Group_1.GroupSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, GroupSkeletonProps)) }), index))) })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.groups }, { children: [...Array(groupsNumber)].map((_category, index) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: { sm: 8, md: 6 } }, { children: (0, jsx_runtime_1.jsx)(Group_1.GroupSkeleton, Object.assign({ elevation: 0, variant: "outlined" }, GroupSkeletonProps)) }), index))) })) })));
 }
 exports.default = GroupsSkeleton;

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

@@ -26,7 +26,7 @@ const Root = (0, material_1.styled)(Widget_1.default, {
 })(() => ({}));
 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)(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" }) })) }))] }))] })));
+    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, width: "100%", spacing: 2, className: className }, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ size: "grow" }, { 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({ size: "grow" }, { 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({ size: "grow" }, { 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.
@@ -61,7 +61,7 @@ function Incubator(inProps) {
     });
     const { incubatorId = null, incubator = null, className = null, autoHide = false, subscribeButtonProps = {}, ButtonProps = {}, detailView = false } = props, rest = tslib_1.__rest(props, ["incubatorId", "incubator", "className", "autoHide", "subscribeButtonProps", "ButtonProps", "detailView"]);
     // STATE
-    const { scIncubator, setSCIncubator } = (0, react_core_1.useSCFetchIncubator)({ id: incubatorId, incubator });
+    const { scIncubator } = (0, react_core_1.useSCFetchIncubator)({ id: incubatorId, incubator });
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     const [openAlert, setOpenAlert] = (0, react_1.useState)(false);