@selfcommunity/react-ui 0.7.50-events.65 → 0.7.50-events.67

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

@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
-const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
-const constants_1 = require("./constants");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
 const event_1 = require("../../types/event");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const system_1 = require("@mui/system");
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const constants_1 = require("./constants");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     skeletonDetailRoot: `${constants_1.PREFIX}-skeleton-detail-root`,
@@ -78,7 +78,7 @@ function EventSkeleton(inProps) {
         contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ position: "relative" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "36%", height: "40px" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ gap: "1px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "75px", height: "15px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.skeletonDetailFirstDivider }), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "68px", height: "20px" }), (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.skeletonDetailSecondDivider })] }))] })));
     }
     else if (template === event_1.SCEventTemplateType.PREVIEW) {
-        contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ position: "relative" }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "30%", height: "16px" })] })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "46%", height: "20px" }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "27%", height: "16px" }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "10%", height: "20px" })] }))] }))] })));
+        contentObj = ((0, jsx_runtime_1.jsxs)(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ position: "relative" }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "30%", height: "16px" })] })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "46%", height: "20px" }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, width: "27%", height: "16px" }) })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: (0, jsx_runtime_1.jsxs)(material_1.AvatarGroup, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "28px", height: "28px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "28px", height: "28px" }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "circular", width: "28px", height: "28px" })] }) }))] }))] })));
     }
     else {
         contentObj = ((0, jsx_runtime_1.jsx)(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));

package/lib/cjs/components/EventMembersWidget/EventMembersWidget.js

@@ -13,38 +13,25 @@ const react_intl_1 = require("react-intl");
 require("swiper/css");
 const Errors_1 = require("../../constants/Errors");
 const Pagination_1 = require("../../constants/Pagination");
-const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
-const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
 const widget_1 = require("../../utils/widget");
-const InviteEventButton_1 = tslib_1.__importDefault(require("../InviteEventButton"));
-const User_1 = tslib_1.__importStar(require("../User"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const TabContentComponent_1 = tslib_1.__importDefault(require("./TabContentComponent"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
     title: `${constants_1.PREFIX}-title`,
     tabsWrapper: `${constants_1.PREFIX}-tabs-wrapper`,
     tabLabelWrapper: `${constants_1.PREFIX}-tab-label-wrapper`,
-    tabPanel: `${constants_1.PREFIX}-tab-panel`,
-    actions: `${constants_1.PREFIX}-actions`,
-    actionButton: `${constants_1.PREFIX}-action-button`,
-    dialogRoot: `${constants_1.PREFIX}-dialog-root`,
-    infiniteScroll: `${constants_1.PREFIX}-infinite-scroll`,
-    endMessage: `${constants_1.PREFIX}-end-message`
+    tabPanel: `${constants_1.PREFIX}-tab-panel`
 };
 const Root = (0, system_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root
-})();
-const DialogRoot = (0, system_1.styled)(BaseDialog_1.default, {
-    name: constants_1.PREFIX,
-    slot: 'DialogRoot',
-    overridesResolver: (_props, styles) => styles.dialogRoot
-})();
+})(() => ({}));
 function EventMembersWidget(inProps) {
     // PROPS
     const props = (0, material_1.useThemeProps)({
@@ -65,13 +52,10 @@ function EventMembersWidget(inProps) {
         next: null,
         cacheKey: react_core_1.SCCache.getWidgetStateCacheKey(react_core_1.SCCache.USER_INVITED_EVENTS_STATE_CACHE_PREFIX_KEY, eventId || event.id),
         cacheStrategy,
-        visibleItems: Pagination_1.DEFAULT_PAGINATION_LIMIT
+        visibleItems: limit
     }, widget_1.stateWidgetInitializer);
-    const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
     const [invitedNumber, setInvitedNumber] = (0, react_1.useState)(0);
     const [tabValue, setTabValue] = (0, react_1.useState)('1');
-    const state = (0, react_1.useMemo)(() => (tabValue === '1' ? participants : invited), [tabValue, participants, invited]);
-    const dispatch = (0, react_1.useCallback)((value) => (tabValue === '1' ? dispatchParticipants(value) : dispatchInvited(value)), [tabValue, dispatchParticipants, dispatchInvited]);
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     // HOOKS
@@ -118,33 +102,19 @@ function EventMembersWidget(inProps) {
         }
     }, [scUserContext.user, scEvent]);
     // HANDLERS
-    /**
-     * Handles pagination
-     */
-    const handleNext = (0, react_1.useCallback)(() => {
-        dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
-        api_services_1.http
-            .request({
-            url: state.next,
-            method: api_services_1.Endpoints.UserSuggestion.method
-        })
-            .then((res) => {
-            dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
-        });
-    }, [dispatch, state.next, state.isLoadingNext, state.initialized]);
-    const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
-        setOpenDialog((prev) => !prev);
-    }, []);
     const handleTabChange = (0, react_1.useCallback)((_evt, newTabValue) => {
         setTabValue(newTabValue);
     }, []);
-    if (!scEvent && !state.initialized) {
+    if (!scEvent && !participants.initialized) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
     // RENDER
     if (!scEvent) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(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.Typography, Object.assign({ variant: "h5", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.tabsWrapper }, { children: (0, jsx_runtime_1.jsxs)(lab_1.TabList, Object.assign({ onChange: handleTabChange, textColor: "secondary", indicatorColor: "secondary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: participants.count })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: "1" }), invited && ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: invitedNumber })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: "2" }))] })) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: participants.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })), invited && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: invited.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps, { actions: (0, jsx_runtime_1.jsx)(InviteEventButton_1.default, { event: scEvent, userId: user.id, setInvitedNumber: setInvitedNumber }) })) }, user.id))) }) })))] }))] })), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.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)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, 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.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] })));
+    return ((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.Typography, Object.assign({ variant: "h5", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) })), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: tabValue }, { children: [(0, jsx_runtime_1.jsxs)(lab_1.TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: participants.count })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: "1" }), invited && ((0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: invitedNumber })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle2" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: "2" }))] })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps }) })), invited && ((0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(TabContentComponent_1.default, { state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
+                                    scEvent,
+                                    setInvitedNumber
+                                } }) })))] }))] })) })));
 }
 exports.default = EventMembersWidget;

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

@@ -16,14 +16,14 @@ const classes = {
     tabsWrapper: `${constants_1.PREFIX}-tabs-wrapper`,
     tabLabelWrapper: `${constants_1.PREFIX}-tab-label-wrapper`,
     tabPanel: `${constants_1.PREFIX}-tab-panel`,
-    actions: `${constants_1.PREFIX}-actions`
+    actionButton: `${constants_1.PREFIX}-action-button`
 };
 const Root = (0, system_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot',
     overridesResolver: (_props, styles) => styles.skeletonRoot
-})();
+})(() => ({}));
 function EventMembersWidgetSkeleton() {
-    return ((0, jsx_runtime_1.jsxs)(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.Skeleton, { animation: "wave", width: "53px", height: "25px", className: classes.title }), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: "1" }, { children: [(0, jsx_runtime_1.jsx)(system_1.Box, Object.assign({ className: classes.tabsWrapper }, { children: (0, jsx_runtime_1.jsxs)(lab_1.TabList, Object.assign({ variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "26px", height: "24px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "106px", height: "19px" })] })), value: "1" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "26px", height: "24px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "106px", height: "19px" })] })), value: "2" })] })) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: [1, 2, 3, 4].map((_element, i) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, {}) }, i))) }) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: [1, 2, 3, 4].map((_element, i) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, {}) }, i))) }) }))] }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "52px", height: "20px" }) }))] })));
+    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.Skeleton, { animation: "wave", width: "53px", height: "25px", className: classes.title }), (0, jsx_runtime_1.jsxs)(lab_1.TabContext, Object.assign({ value: "1" }, { children: [(0, jsx_runtime_1.jsx)(system_1.Box, Object.assign({ className: classes.tabsWrapper }, { children: (0, jsx_runtime_1.jsxs)(lab_1.TabList, Object.assign({ variant: "fullWidth" }, { children: [(0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "26px", height: "24px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "106px", height: "19px" })] })), value: "1" }), (0, jsx_runtime_1.jsx)(material_1.Tab, { label: (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "26px", height: "24px" }), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "106px", height: "19px" })] })), value: "2" })] })) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsxs)(material_1.List, { children: [[1, 2, 3, 4].map((_element, i) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, {}) }, i))), (0, jsx_runtime_1.jsx)(material_1.Skeleton, { className: classes.actionButton, animation: "wave", width: "52px", height: "20px" })] }) })), (0, jsx_runtime_1.jsx)(lab_1.TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: [1, 2, 3, 4].map((_element, i) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, {}) }, i))) }) }))] }))] })) })));
 }
 exports.default = EventMembersWidgetSkeleton;

package/lib/cjs/components/EventMembersWidget/TabContentComponent.d.ts

@@ -0,0 +1,24 @@
+import { SCEventType } from '@selfcommunity/types';
+import { Dispatch, SetStateAction } from 'react';
+import { BaseDialogProps } from '../../shared/BaseDialog';
+import { UserProps } from '../User';
+interface TabComponentProps {
+    state: any;
+    dispatch: Dispatch<any>;
+    /**
+     * Props to spread to single user object
+     * @default empty object
+     */
+    userProps?: UserProps;
+    /**
+     * Props to spread to users suggestion dialog
+     * @default {}
+     */
+    dialogProps?: BaseDialogProps;
+    actionProps?: {
+        scEvent?: SCEventType;
+        setInvitedNumber: Dispatch<SetStateAction<number>>;
+    };
+}
+export default function TabContentComponent(props: TabComponentProps): JSX.Element;
+export {};

package/lib/cjs/components/EventMembersWidget/TabContentComponent.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
+const widget_1 = require("../../utils/widget");
+const InviteEventButton_1 = tslib_1.__importDefault(require("../InviteEventButton"));
+const User_1 = tslib_1.__importStar(require("../User"));
+const constants_1 = require("./constants");
+const classes = {
+    actionButton: `${constants_1.PREFIX}-action-button`,
+    dialogRoot: `${constants_1.PREFIX}-dialog-root`,
+    infiniteScroll: `${constants_1.PREFIX}-infinite-scroll`,
+    endMessage: `${constants_1.PREFIX}-end-message`
+};
+const DialogRoot = (0, material_1.styled)(BaseDialog_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'DialogRoot',
+    overridesResolver: (_props, styles) => styles.dialogRoot
+})(() => ({}));
+function TabContentComponent(props) {
+    // PROPS
+    const { state, dispatch, userProps, dialogProps, actionProps } = props;
+    // STATE
+    const [openDialog, setOpenDialog] = (0, react_1.useState)(false);
+    // HANDLERS
+    /**
+     * Handles pagination
+     */
+    const handleNext = (0, react_1.useCallback)(() => {
+        dispatch({ type: widget_1.actionWidgetTypes.LOADING_NEXT });
+        api_services_1.http
+            .request({
+            url: state.next,
+            method: api_services_1.Endpoints.UserSuggestion.method
+        })
+            .then((res) => {
+            dispatch({ type: widget_1.actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
+        });
+    }, [dispatch, state.next, state.isLoadingNext, state.initialized]);
+    const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
+        setOpenDialog((prev) => !prev);
+    }, []);
+    const getActionsComponent = (0, react_1.useCallback)((userId) => actionProps ? (0, jsx_runtime_1.jsx)(InviteEventButton_1.default, { event: actionProps.scEvent, userId: userId, setInvitedNumber: actionProps.setInvitedNumber }) : undefined, [actionProps]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps, { actions: getActionsComponent(user.id) })) }, user.id))) }), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.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)(User_1.UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, 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.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((user) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] }));
+}
+exports.default = TabContentComponent;

package/lib/cjs/components/EventParticipantsButton/EventParticipantsButton.js

@@ -7,6 +7,7 @@ const styles_1 = require("@mui/material/styles");
 const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
+const types_1 = require("@selfcommunity/types");
 const utils_1 = require("@selfcommunity/utils");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const react_1 = require("react");
@@ -72,12 +73,18 @@ function EventParticipantsButton(inProps) {
     const [open, setOpen] = (0, react_1.useState)(false);
     // HOOKS
     const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const scEventsManager = scUserContext.managers.events;
     // FETCH FIRST FOLLOWERS
     (0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
         if (!scEvent) {
             return;
         }
-        if (followers.length === 0) {
+        const status = scEventsManager === null || scEventsManager === void 0 ? void 0 : scEventsManager.subscriptionStatus(scEvent);
+        if ((status === types_1.SCEventSubscriptionStatusType.GOING ||
+            status === types_1.SCEventSubscriptionStatusType.NOT_GOING ||
+            status === types_1.SCEventSubscriptionStatusType.SUBSCRIBED) &&
+            followers.length === 0) {
             api_services_1.EventService.getUsersGoingToEvent(scEvent.id, { limit: 3 }).then((res) => {
                 setFollowers([...res.results]);
                 setOffset(4);

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

@@ -119,7 +119,7 @@ function Events(inProps) {
             url: endpoint.url({}),
             method: endpoint.method,
             params: Object.assign(Object.assign({}, endpointQueryParams), (general
-                ? Object.assign(Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { past: showPastEvents })) : Object.assign(Object.assign({ subscription_status: types_1.SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents })), (search !== '' && { search: search }))))
+                ? Object.assign(Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: types_1.SCEventDateFilterType.PAST })) : Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), { subscription_status: types_1.SCEventSubscriptionStatusType.GOING }), (showPastEvents && { date_filter: types_1.SCEventDateFilterType.PAST }))))
         })
             .then((res) => {
             setEvents(res.data.results);
@@ -197,7 +197,7 @@ function Events(inProps) {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 showFollowed: showFollowed, deleteIcon: showFollowed ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== types_1.SCEventDateFilterType.ANY }) }))] })) }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !events.length ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !react_core_1.UserUtils.isStaff(scUserContext.user)) ||
-                        (onlyStaffEnabled && react_core_1.UserUtils.isStaff(scUserContext.user) && general) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredEvents.map((event) => ((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)(Event_1.default, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), filteredEvents.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.itemSkeleton }, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })] }));
+                        (onlyStaffEnabled && react_core_1.UserUtils.isStaff(scUserContext.user) && general) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, {}) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [filteredEvents.map((event) => ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, { children: (0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), filteredEvents.length % 2 !== 0 && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (0, jsx_runtime_1.jsx)(CreateEventButton_1.default, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.button.seeMore", defaultMessage: "ui.events.button.seeMore" }) })))] })) })] }));
     /**
      * Renders root object (if content availability community option is false and user is anonymous, component is hidden)
      */

package/lib/cjs/components/InviteEventButton/InviteEventButton.js

@@ -20,7 +20,7 @@ const InviteButton = (0, styles_1.styled)(lab_1.LoadingButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root
-})();
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Invite Event Button component. Learn about the available props and the CSS API.
 
@@ -59,7 +59,7 @@ function InviteEventButton(inProps) {
         if (invited) {
             api_services_1.EventService.removeInviteEvent(scEvent.id, { users: [scUser.id] })
                 .then(() => {
-                setInvited(!invited);
+                setInvited(false);
                 setInvitedNumber((prev) => prev - 1);
             })
                 .catch((_error) => {
@@ -69,14 +69,14 @@ function InviteEventButton(inProps) {
         else {
             api_services_1.EventService.inviteOrAcceptEventRequest(scEvent.id, { users: [scUser.id] })
                 .then(() => {
-                setInvited(!invited);
+                setInvited(true);
                 setInvitedNumber((prev) => prev + 1);
             })
                 .catch((_error) => {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, _error);
             });
         }
-    }, [scEvent, scUser]);
+    }, [scEvent, scUser, invited]);
     return ((0, jsx_runtime_1.jsx)(InviteButton, Object.assign({ size: "small", variant: "outlined", onClick: handleInviteAction, loading: invited === null, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: invited ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.inviteEventButton.remove", id: "ui.inviteEventButton.remove" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.inviteEventButton.invite", id: "ui.inviteEventButton.invite" })) })));
 }
 exports.default = InviteEventButton;

package/lib/cjs/components/RelatedEventsWidget/RelatedEventsWidget.js

@@ -29,6 +29,7 @@ const messages = (0, react_intl_1.defineMessages)({
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     content: `${constants_1.PREFIX}-content`,
+    header: `${constants_1.PREFIX}-header`,
     avatarWrapper: `${constants_1.PREFIX}-avatar-wrapper`,
     avatar: `${constants_1.PREFIX}-avatar`,
     eventWrapper: `${constants_1.PREFIX}-event-wrapper`,
@@ -43,12 +44,12 @@ const Root = (0, system_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root
-})();
+})(() => ({}));
 const DialogRoot = (0, system_1.styled)(BaseDialog_1.default, {
     name: constants_1.PREFIX,
     slot: 'DialogRoot',
     overridesResolver: (_props, styles) => styles.dialogRoot
-})();
+})(() => ({}));
 function RelatedEventsWidget(inProps) {
     var _a;
     // PROPS
@@ -117,9 +118,9 @@ function RelatedEventsWidget(inProps) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
     // RENDER
-    if (!scEvent) {
+    if (!scEvent || (state === null || state === void 0 ? void 0 : state.count) === 0) {
         return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(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.jsxs)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, { id: (_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id }), className: classes.avatarWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "rounded", src: scEvent.managed_by.avatar, alt: scEvent.managed_by.username, className: classes.avatar }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3" }, { children: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.eventWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_event, i, array) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ event: _event, eventId: _event.id }, eventComponentProps, { className: classes.event }), i), i < array.length - 1 && (0, jsx_runtime_1.jsx)(material_1.Divider, {})] }))) }))] })), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.relatedEventsWidget.showAll", defaultMessage: "ui.relatedEventsWidget.showAll" }) })) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), 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)(Event_1.EventSkeleton, Object.assign({ elevation: 0 }, eventComponentProps)), className: classes.infiniteScroll, 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.relatedEventsWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((event) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ elevation: 0, event: event }, eventComponentProps)) }, event.id))) }) })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(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.jsxs)(material_1.Stack, Object.assign({ className: classes.header }, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, { id: (_a = scUserContext.user) === null || _a === void 0 ? void 0 : _a.id }), className: classes.avatarWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "rounded", src: scEvent.managed_by.avatar, alt: scEvent.managed_by.username, className: classes.avatar }) })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)("b", { children: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }) }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.eventWrapper }, { children: state === null || state === void 0 ? void 0 : state.results.map((_event, i, array) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ event: _event, eventId: _event.id }, eventComponentProps, { className: classes.event }), i), i < array.length - 1 && (0, jsx_runtime_1.jsx)(material_1.Divider, {})] }))) }))] })), state.count > state.visibleItems && ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.relatedEventsWidget.showAll", defaultMessage: "ui.relatedEventsWidget.showAll" }) })) })) }))), openDialog && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: intl.formatMessage(messages.title, { user: scEvent.managed_by.username }), 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)(Event_1.EventSkeleton, Object.assign({ elevation: 0 }, eventComponentProps)), className: classes.infiniteScroll, 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.relatedEventsWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: state.results.map((event) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(Event_1.default, Object.assign({ elevation: 0, event: event }, eventComponentProps)) }, event.id))) }) })) })))] })));
 }
 exports.default = RelatedEventsWidget;

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

@@ -21,7 +21,7 @@ const Root = (0, system_1.styled)(Widget_1.default, {
     name: constants_1.PREFIX,
     slot: 'SkeletonRoot',
     overridesResolver: (_props, styles) => styles.skeletonRoot
-})();
+})(() => ({}));
 function RelatedEventsWidgetSkeleton() {
     return ((0, jsx_runtime_1.jsxs)(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)(User_1.UserSkeleton, { className: classes.user, elevation: 0 }), (0, jsx_runtime_1.jsx)(material_1.Stack, Object.assign({ className: classes.eventWrapper }, { children: [1, 2, 3, 4].map((_event, i, array) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, { elevation: 0, className: classes.event }, i), i < array.length - 1 && (0, jsx_runtime_1.jsx)(material_1.Divider, {})] }))) }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Skeleton, { animation: "wave", width: "52px", height: "20px" }) }))] })));
 }

package/lib/cjs/components/SuggestedEventsWidget/Arrow.js

@@ -12,7 +12,7 @@ function Arrow(props) {
     const swiper = (0, react_2.useSwiper)();
     (0, react_1.useEffect)(() => {
         setItemsLength(swiper.slides.length);
-    }, []);
+    }, [currentItem]);
     const handleChange = (0, react_1.useCallback)((type) => {
         if (type === 'prev') {
             swiper.slidePrev();

package/lib/esm/components/Event/Skeleton.js

@@ -1,14 +1,14 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { AvatarGroup, Box, Button, CardContent, Divider, Icon, Stack } from '@mui/material';
-import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
-import { PREFIX } from './constants';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
 import BaseItem from '../../shared/BaseItem';
 import { SCEventTemplateType } from '../../types/event';
 import Widget from '../Widget';
-import { useThemeProps } from '@mui/system';
-import classNames from 'classnames';
+import { PREFIX } from './constants';
 const classes = {
     root: `${PREFIX}-skeleton-root`,
     skeletonDetailRoot: `${PREFIX}-skeleton-detail-root`,
@@ -76,7 +76,7 @@ export default function EventSkeleton(inProps) {
         contentObj = (_jsxs(SkeletonDetailRoot, Object.assign({ className: classes.skeletonDetailRoot }, { children: [_jsxs(Box, Object.assign({ position: "relative" }, { children: [_jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "170px" }), _jsx(Skeleton, { className: classes.skeletonDetailCalendar, variant: "rounded", animation: skeletonsAnimation, width: "60px", height: "60px" })] })), _jsxs(CardContent, Object.assign({ className: classes.skeletonDetailContent }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "36%", height: "40px" }), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "50%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "9px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "35%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "20px" })] })), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", className: classes.skeletonDetailUser }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "36px", height: "36px" }), _jsxs(Stack, Object.assign({ gap: "1px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "75px", height: "15px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "86px", height: "16px" })] }))] })), _jsx(Divider, { className: classes.skeletonDetailFirstDivider }), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, width: "68px", height: "20px" }), _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] })] })), _jsx(Divider, { className: classes.skeletonDetailSecondDivider })] }))] })));
     }
     else if (template === SCEventTemplateType.PREVIEW) {
-        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "30%", height: "16px" })] })), _jsx(Skeleton, { animation: skeletonsAnimation, width: "46%", height: "20px" }), _jsx(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "14px" }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "16px" }) })), _jsxs(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: [_jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" })] }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "10%", height: "20px" })] }))] }))] })));
+        contentObj = (_jsxs(SkeletonPreviewRoot, Object.assign({ className: classes.skeletonPreviewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative" }, { children: _jsx(Skeleton, { variant: "rectangular", animation: skeletonsAnimation, width: "100%", height: "80px" }) })), _jsxs(CardContent, Object.assign({ className: classes.skeletonPreviewContent }, { children: [_jsxs(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px" }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "21px", height: "21px" }), _jsx(Skeleton, { animation: skeletonsAnimation, width: "30%", height: "16px" })] })), _jsx(Skeleton, { animation: skeletonsAnimation, width: "46%", height: "20px" }), _jsx(Stack, Object.assign({ direction: "row", alignItems: "center", gap: "8px", marginBottom: "2px" }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, width: "27%", height: "16px" }) })), _jsx(Stack, Object.assign({ direction: "row", gap: "8px", alignItems: "center", height: "28px" }, { children: _jsxs(AvatarGroup, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "28px", height: "28px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "28px", height: "28px" }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "circular", width: "28px", height: "28px" })] }) }))] }))] })));
     }
     else {
         contentObj = (_jsx(SkeletonSnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.skeletonSnippetRoot, image: _jsxs(Box, Object.assign({ className: classes.skeletonSnippetImage }, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", width: 100, height: 60 }), " ", _jsx(Icon, Object.assign({ fontSize: "large" }, { children: "CalendarIcon" }))] })), primary: _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "40%", style: { marginBottom: 12 } }), secondary: _jsxs(_Fragment, { children: [_jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "60%", style: { marginBottom: 10, marginRight: 5 } }), _jsx(Skeleton, { animation: skeletonsAnimation, variant: "rectangular", height: 10, width: "35%" })] }), actions: _jsx(_Fragment, { children: actions !== null && actions !== void 0 ? actions : (_jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: skeletonsAnimation, height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) }))) }) }));

package/lib/esm/components/EventMembersWidget/EventMembersWidget.js

@@ -1,48 +1,35 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TabContext, TabList, TabPanel } from '@mui/lab';
-import { Box, Button, CardActions, CardContent, List, ListItem, Stack, Tab, Typography, useThemeProps } from '@mui/material';
+import { CardContent, Stack, Tab, Typography, useThemeProps } from '@mui/material';
 import { styled } from '@mui/system';
-import { Endpoints, EventService, http } from '@selfcommunity/api-services';
+import { EventService } from '@selfcommunity/api-services';
 import { SCCache, useSCFetchEvent, useSCUser } from '@selfcommunity/react-core';
 import { Logger } from '@selfcommunity/utils';
-import { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
+import { useCallback, useEffect, useReducer, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import 'swiper/css';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
-import BaseDialog from '../../shared/BaseDialog';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
-import InfiniteScroll from '../../shared/InfiniteScroll';
 import { actionWidgetTypes, dataWidgetReducer, stateWidgetInitializer } from '../../utils/widget';
-import InviteEventButton from '../InviteEventButton';
-import User, { UserSkeleton } from '../User';
 import Widget from '../Widget';
 import { PREFIX } from './constants';
 import Skeleton from './Skeleton';
+import TabContentComponent from './TabContentComponent';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
     title: `${PREFIX}-title`,
     tabsWrapper: `${PREFIX}-tabs-wrapper`,
     tabLabelWrapper: `${PREFIX}-tab-label-wrapper`,
-    tabPanel: `${PREFIX}-tab-panel`,
-    actions: `${PREFIX}-actions`,
-    actionButton: `${PREFIX}-action-button`,
-    dialogRoot: `${PREFIX}-dialog-root`,
-    infiniteScroll: `${PREFIX}-infinite-scroll`,
-    endMessage: `${PREFIX}-end-message`
+    tabPanel: `${PREFIX}-tab-panel`
 };
 const Root = styled(Widget, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (_props, styles) => styles.root
-})();
-const DialogRoot = styled(BaseDialog, {
-    name: PREFIX,
-    slot: 'DialogRoot',
-    overridesResolver: (_props, styles) => styles.dialogRoot
-})();
+})(() => ({}));
 export default function EventMembersWidget(inProps) {
     // PROPS
     const props = useThemeProps({
@@ -63,13 +50,10 @@ export default function EventMembersWidget(inProps) {
         next: null,
         cacheKey: SCCache.getWidgetStateCacheKey(SCCache.USER_INVITED_EVENTS_STATE_CACHE_PREFIX_KEY, eventId || event.id),
         cacheStrategy,
-        visibleItems: DEFAULT_PAGINATION_LIMIT
+        visibleItems: limit
     }, stateWidgetInitializer);
-    const [openDialog, setOpenDialog] = useState(false);
     const [invitedNumber, setInvitedNumber] = useState(0);
     const [tabValue, setTabValue] = useState('1');
-    const state = useMemo(() => (tabValue === '1' ? participants : invited), [tabValue, participants, invited]);
-    const dispatch = useCallback((value) => (tabValue === '1' ? dispatchParticipants(value) : dispatchInvited(value)), [tabValue, dispatchParticipants, dispatchInvited]);
     // CONTEXT
     const scUserContext = useSCUser();
     // HOOKS
@@ -116,32 +100,18 @@ export default function EventMembersWidget(inProps) {
         }
     }, [scUserContext.user, scEvent]);
     // HANDLERS
-    /**
-     * Handles pagination
-     */
-    const handleNext = useCallback(() => {
-        dispatch({ type: actionWidgetTypes.LOADING_NEXT });
-        http
-            .request({
-            url: state.next,
-            method: Endpoints.UserSuggestion.method
-        })
-            .then((res) => {
-            dispatch({ type: actionWidgetTypes.LOAD_NEXT_SUCCESS, payload: res.data });
-        });
-    }, [dispatch, state.next, state.isLoadingNext, state.initialized]);
-    const handleToggleDialogOpen = useCallback(() => {
-        setOpenDialog((prev) => !prev);
-    }, []);
     const handleTabChange = useCallback((_evt, newTabValue) => {
         setTabValue(newTabValue);
     }, []);
-    if (!scEvent && !state.initialized) {
+    if (!scEvent && !participants.initialized) {
         return _jsx(Skeleton, {});
     }
     // RENDER
     if (!scEvent) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsx(Box, Object.assign({ className: classes.tabsWrapper }, { children: _jsxs(TabList, Object.assign({ onChange: handleTabChange, textColor: "secondary", indicatorColor: "secondary", variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: participants.count })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: "1" }), invited && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: invitedNumber })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: "2" }))] })) })), _jsx(TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: _jsx(List, { children: participants.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })), invited && (_jsx(TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: _jsx(List, { children: invited.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps, { actions: _jsx(InviteEventButton, { event: scEvent, userId: user.id, setInvitedNumber: setInvitedNumber }) })) }, user.id))) }) })))] }))] })), state.count > state.visibleItems && (_jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ onClick: handleToggleDialogOpen, className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.showAll", defaultMessage: "ui.eventMembersWidget.showAll" }) })) })) }))), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventMembersWidget.title", id: "ui.eventMembersWidget.title" }), onClose: handleToggleDialogOpen, open: openDialog }, dialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, userProps)), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.noMoreResults", defaultMessage: "ui.eventMembersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, userProps)) }, user.id))) }) })) })))] })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: _jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) })), _jsxs(TabContext, Object.assign({ value: tabValue }, { children: [_jsxs(TabList, Object.assign({ className: classes.tabsWrapper, onChange: handleTabChange, textColor: "primary", indicatorColor: "primary", variant: "fullWidth" }, { children: [_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: participants.count })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.participants", defaultMessage: "ui.eventMembersWidget.participants" }) }))] })), value: "1" }), invited && (_jsx(Tab, { label: _jsxs(Stack, Object.assign({ className: classes.tabLabelWrapper }, { children: [_jsx(Typography, Object.assign({ variant: "h3" }, { children: invitedNumber })), _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: _jsx(FormattedMessage, { id: "ui.eventMembersWidget.invited", defaultMessage: "ui.eventMembersWidget.invited" }) }))] })), value: "2" }))] })), _jsx(TabPanel, Object.assign({ value: "1", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { state: participants, dispatch: dispatchParticipants, userProps: userProps, dialogProps: dialogProps }) })), invited && (_jsx(TabPanel, Object.assign({ value: "2", className: classes.tabPanel }, { children: _jsx(TabContentComponent, { state: invited, dispatch: dispatchInvited, userProps: userProps, dialogProps: dialogProps, actionProps: {
+                                    scEvent,
+                                    setInvitedNumber
+                                } }) })))] }))] })) })));
 }