@selfcommunity/react-ui 0.7.55 → 0.8.0-alpha.0

package/lib/cjs/components/SnippetNotifications/SnippetNotifications.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const Comment_1 = tslib_1.__importDefault(require("../Notification/Comment"));
 const UserFollow_1 = tslib_1.__importDefault(require("../Notification/UserFollow"));
@@ -34,6 +35,7 @@ const Contribution_1 = tslib_1.__importDefault(require("../Notification/Contribu
 const NotificationItem_1 = tslib_1.__importDefault(require("../../shared/NotificationItem"));
 const constants_1 = require("./constants");
 const Group_1 = tslib_1.__importDefault(require("../Notification/Group"));
+const Event_1 = tslib_1.__importDefault(require("../Notification/Event/Event"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     notificationsWrap: `${constants_1.PREFIX}-notifications-wrap`,
@@ -196,70 +198,76 @@ function SnippetNotifications(inProps) {
         const type = n.type;
         let content;
         if (type === types_2.SCNotificationTypologyType.COMMENT || type === types_2.SCNotificationTypologyType.NESTED_COMMENT) {
-            content = react_1.default.createElement(Comment_1.default, { notificationObject: n, key: i, index: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(Comment_1.default, { notificationObject: n, index: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.FOLLOW) {
-            content = react_1.default.createElement(ContributionFollow_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(ContributionFollow_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.USER_FOLLOW) {
-            content = react_1.default.createElement(UserFollow_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(UserFollow_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.CONNECTION_REQUEST || type === types_2.SCNotificationTypologyType.CONNECTION_ACCEPT) {
-            content = react_1.default.createElement(UserConnection_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(UserConnection_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.VOTE_UP) {
-            content = react_1.default.createElement(VoteUp_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(VoteUp_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.KINDLY_NOTICE_ADVERTISING ||
             type === types_2.SCNotificationTypologyType.KINDLY_NOTICE_AGGRESSIVE ||
             type === types_2.SCNotificationTypologyType.KINDLY_NOTICE_POOR ||
             type === types_2.SCNotificationTypologyType.KINDLY_NOTICE_VULGAR ||
             type === types_2.SCNotificationTypologyType.KINDLY_NOTICE_OFFTOPIC) {
-            content = react_1.default.createElement(KindlyNoticeFor_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(KindlyNoticeFor_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.KINDLY_NOTICE_FLAG) {
-            content = react_1.default.createElement(KindlyNoticeFlag_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(KindlyNoticeFlag_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.DELETED_FOR_ADVERTISING ||
             type === types_2.SCNotificationTypologyType.DELETED_FOR_AGGRESSIVE ||
             type === types_2.SCNotificationTypologyType.DELETED_FOR_POOR ||
             type === types_2.SCNotificationTypologyType.DELETED_FOR_VULGAR ||
             type === types_2.SCNotificationTypologyType.DELETED_FOR_OFFTOPIC) {
-            content = react_1.default.createElement(DeletedFor_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(DeletedFor_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.UNDELETED_FOR) {
-            content = react_1.default.createElement(UndeletedFor_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(UndeletedFor_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.COLLAPSED_FOR_ADVERTISING ||
             type === types_2.SCNotificationTypologyType.COLLAPSED_FOR_AGGRESSIVE ||
             type === types_2.SCNotificationTypologyType.COLLAPSED_FOR_POOR ||
             type === types_2.SCNotificationTypologyType.COLLAPSED_FOR_VULGAR ||
             type === types_2.SCNotificationTypologyType.COLLAPSED_FOR_OFFTOPIC) {
-            content = react_1.default.createElement(CollapsedFor_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(CollapsedFor_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.PRIVATE_MESSAGE) {
-            content = react_1.default.createElement(PrivateMessage_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(PrivateMessage_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.BLOCKED_USER || type === types_2.SCNotificationTypologyType.UNBLOCKED_USER) {
-            content = react_1.default.createElement(UserBlocked_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(UserBlocked_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.MENTION) {
-            content = react_1.default.createElement(Mention_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(Mention_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.INCUBATOR_APPROVED) {
-            content = react_1.default.createElement(IncubatorApproved_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(IncubatorApproved_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === types_2.SCNotificationTypologyType.CUSTOM_NOTIFICATION && handleCustomNotification) {
             content = handleCustomNotification(n);
         }
         else if (type === types_2.SCNotificationTypologyType.CONTRIBUTION) {
-            content = react_1.default.createElement(Contribution_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            content = (0, jsx_runtime_1.jsx)(Contribution_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (n.type === types_2.SCNotificationTypologyType.USER_ADDED_TO_GROUP ||
             n.type === types_2.SCNotificationTypologyType.USER_INVITED_TO_JOIN_GROUP ||
             n.type === types_2.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP ||
             n.type === types_2.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP) {
-            return react_1.default.createElement(Group_1.default, { notificationObject: n, key: i, template: types_1.SCNotificationObjectTemplateType.SNIPPET });
+            return (0, jsx_runtime_1.jsx)(Group_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
+        }
+        else if (n.type === types_2.SCNotificationTypologyType.USER_ADDED_TO_EVENT ||
+            n.type === types_2.SCNotificationTypologyType.USER_INVITED_TO_JOIN_EVENT ||
+            n.type === types_2.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_EVENT ||
+            n.type === types_2.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
+            return (0, jsx_runtime_1.jsx)(Event_1.default, { notificationObject: n, template: types_1.SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         if (type && handleNotification) {
             /** Override content */
@@ -270,16 +278,10 @@ function SnippetNotifications(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest),
-        react_1.default.createElement(material_1.Box, { className: classes.notificationsWrap }, !initialized || loading ? (react_1.default.createElement(Skeleton_1.default, { elevation: 0 })) : (react_1.default.createElement(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps),
-            react_1.default.createElement(material_1.MenuList, { className: classes.list, disabledItemsFocusable: true, disableListWrap: true },
-                scUserContext.user.unseen_notification_banners_counter ? (react_1.default.createElement(material_1.MenuItem, { className: (0, classnames_1.default)(classes.item, classes.broadcastMessagesBanner), key: "banner", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
-                    react_1.default.createElement(NotificationItem_1.default, { template: types_1.SCNotificationObjectTemplateType.SNIPPET, isNew: true, disableTypography: true, image: react_1.default.createElement(material_1.Avatar, { alt: preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME], src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), primary: react_1.default.createElement(material_1.Typography, { component: 'div' }, intl.formatMessage({ id: 'ui.snippetNotifications.broadcastMessages', defaultMessage: 'ui.snippetNotifications.broadcastMessages' }, {
-                            count: scUserContext.user.unseen_notification_banners_counter,
-                            b: (...chunks) => react_1.default.createElement("strong", null, chunks),
-                            link: (...chunks) => react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, chunks)
-                        })) }))) : null,
-                notifications.length === 0 ? (react_1.default.createElement(material_1.MenuItem, { className: classes.emptyBoxNotifications },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.snippetNotifications.noNotifications", defaultMessage: "ui.snippetNotifications.noNotifications" }))) : (notifications.slice(0, showMax).map((notificationObject, i) => notificationObject.aggregated.map((n, k) => (react_1.default.createElement(material_1.MenuItem, { className: classes.item, key: k, onClick: (e) => handleSingleNotificationClick(e, n), disableRipple: true, disableTouchRipple: true }, renderAggregatedItem(n, i))))))))))));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.notificationsWrap }, { children: !initialized || loading ? ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: 0 })) : ((0, jsx_runtime_1.jsx)(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps, { children: (0, jsx_runtime_1.jsxs)(material_1.MenuList, Object.assign({ className: classes.list, disabledItemsFocusable: true, disableListWrap: true }, { children: [scUserContext.user.unseen_notification_banners_counter ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: (0, classnames_1.default)(classes.item, classes.broadcastMessagesBanner), component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(NotificationItem_1.default, { template: types_1.SCNotificationObjectTemplateType.SNIPPET, isNew: true, disableTypography: true, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: preferences[react_core_1.SCPreferences.TEXT_APPLICATION_NAME], src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), primary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: 'div' }, { children: intl.formatMessage({ id: 'ui.snippetNotifications.broadcastMessages', defaultMessage: 'ui.snippetNotifications.broadcastMessages' }, {
+                                        count: scUserContext.user.unseen_notification_banners_counter,
+                                        b: (...chunks) => (0, jsx_runtime_1.jsx)("strong", { children: chunks }),
+                                        link: (...chunks) => (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: chunks }))
+                                    }) })) }) }), "banner")) : null, notifications.length === 0 ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.emptyBoxNotifications }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.snippetNotifications.noNotifications", defaultMessage: "ui.snippetNotifications.noNotifications" }) }))) : (notifications.slice(0, showMax).map((notificationObject, i) => notificationObject.aggregated.map((n, k) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: (e) => handleSingleNotificationClick(e, n), disableRipple: true, disableTouchRipple: true }, { children: renderAggregatedItem(n, i) }), k)))))] })) }))) })) })));
 }
 exports.default = SnippetNotifications;

package/lib/cjs/components/SuggestedEventsWidget/Arrow.d.ts

@@ -0,0 +1,8 @@
+import { Dispatch, HTMLAttributes, SetStateAction } from 'react';
+export interface ArrowProps {
+    type: 'prev' | 'next';
+    currentItem: number;
+    setCurrentItem: Dispatch<SetStateAction<number>>;
+    className?: HTMLAttributes<HTMLButtonElement>['className'];
+}
+export default function Arrow(props: ArrowProps): JSX.Element;

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_1 = require("react");
+const react_2 = require("swiper/react");
+function Arrow(props) {
+    const { type, currentItem, setCurrentItem, className } = props;
+    // STATE
+    const [itemsLength, setItemsLength] = (0, react_1.useState)(0);
+    // HOOKS
+    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();
+        }
+        else {
+            swiper.slideNext();
+        }
+        setCurrentItem(swiper.snapIndex);
+    }, [type]);
+    if (type === 'prev') {
+        return (currentItem > 0 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", className: className, size: "medium", onClick: () => handleChange('prev') }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chevron_left" }) }))));
+    }
+    return (currentItem < itemsLength - 1 && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "contained", className: className, size: "medium", onClick: () => handleChange('next') }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "chevron_right" }) }))));
+}
+exports.default = Arrow;

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

@@ -0,0 +1,2 @@
+import 'swiper/css';
+export default function SuggestedEventsWidgetSkeleton(): JSX.Element;

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

@@ -0,0 +1,28 @@
+"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 system_1 = require("@mui/system");
+require("swiper/css");
+const react_1 = require("swiper/react");
+const event_1 = require("../../types/event");
+const Event_1 = require("../Event");
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const constants_1 = require("./constants");
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    content: `${constants_1.PREFIX}-content`,
+    title: `${constants_1.PREFIX}-title`,
+    swiperSlide: `${constants_1.PREFIX}-swiper-slide`,
+    actions: `${constants_1.PREFIX}-actions`
+};
+const Root = (0, system_1.styled)(Widget_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot',
+    overridesResolver: (_props, styles) => styles.skeletonRoot
+})(() => ({}));
+function SuggestedEventsWidgetSkeleton() {
+    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, { className: classes.title, animation: "wave", width: "141px", height: "23px" }), (0, jsx_runtime_1.jsx)(react_1.Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto" }, { children: [1, 2, 3, 4, 5, 6, 7].map((_element, i) => ((0, jsx_runtime_1.jsx)(react_1.SwiperSlide, Object.assign({ className: classes.swiperSlide }, { children: (0, jsx_runtime_1.jsx)(Event_1.EventSkeleton, { template: event_1.SCEventTemplateType.PREVIEW, variant: "outlined", actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}) }) }), 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" }) }))] })));
+}
+exports.default = SuggestedEventsWidgetSkeleton;

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

@@ -0,0 +1,13 @@
+import { WidgetProps } from '../Widget';
+export interface SuggestedEventsWidgetProps extends WidgetProps {
+    /**
+     * Feed API Query Params
+     * @default [{'limit': 20, 'offset': 0}]
+     */
+    endpointQueryParams?: Record<string, string | number>;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+export default function SuggestedEventsWidget(inProps: SuggestedEventsWidgetProps): JSX.Element;

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

@@ -0,0 +1,121 @@
+"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 system_1 = require("@mui/system");
+const api_services_1 = require("@selfcommunity/api-services");
+const react_core_1 = require("@selfcommunity/react-core");
+const utils_1 = require("@selfcommunity/utils");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
+const react_2 = require("swiper/react");
+const Errors_1 = require("../../constants/Errors");
+const Pagination_1 = require("../../constants/Pagination");
+const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
+const event_1 = require("../../types/event");
+const Event_1 = tslib_1.__importDefault(require("../Event"));
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const Arrow_1 = tslib_1.__importDefault(require("./Arrow"));
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`,
+    content: `${constants_1.PREFIX}-content`,
+    title: `${constants_1.PREFIX}-title`,
+    swiper: `${constants_1.PREFIX}-swiper`,
+    swiperSlide: `${constants_1.PREFIX}-swiper-slide`,
+    swiperArrow: `${constants_1.PREFIX}-swiper-arrow`,
+    swiperPrevArrow: `${constants_1.PREFIX}-swiper-prev-arrow`,
+    swiperNextArrow: `${constants_1.PREFIX}-swiper-next-arrow`,
+    event: `${constants_1.PREFIX}-event`,
+    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: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+function SuggestedEventsWidget(inProps) {
+    // PROPS
+    const props = (0, material_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { endpointQueryParams = { limit: 3, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET } } = props, rest = tslib_1.__rest(props, ["endpointQueryParams"]);
+    // STATE
+    const [count, setCount] = (0, react_1.useState)(null);
+    const [next, setNext] = (0, react_1.useState)(null);
+    const [events, setEvents] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [showSkeleton, setShowSkeleton] = (0, react_1.useState)(false);
+    const [currentItem, setCurrentItem] = (0, react_1.useState)(0);
+    const [hideMarginLeft, setHideMarginLeft] = (0, react_1.useState)(false);
+    const [hideMarginRight, setHideMarginRight] = (0, react_1.useState)(true);
+    // CONTEXT
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    //HOOKS
+    const theme = (0, material_1.useTheme)();
+    (0, react_1.useEffect)(() => {
+        api_services_1.SuggestionService.getEventSuggestion(Object.assign({}, endpointQueryParams))
+            .then((payload) => {
+            setCount(payload.count);
+            setNext(payload.next);
+            setEvents(payload.results);
+            setLoading(false);
+        })
+            .catch((error) => {
+            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+        });
+    }, []);
+    const handleReachBeginning = (0, react_1.useCallback)(() => {
+        setHideMarginLeft(false);
+    }, []);
+    const handleReachEnd = (0, react_1.useCallback)(() => {
+        if (count > events.length && next) {
+            setShowSkeleton(true);
+            api_services_1.http
+                .request({
+                url: next,
+                method: api_services_1.Endpoints.GetEventSuggestedUsers.method
+            })
+                .then((res) => {
+                setCount(res.data.count);
+                setNext(res.data.next);
+                setEvents((prevEvents) => [...prevEvents, ...res.data.results]);
+                setShowSkeleton(false);
+            })
+                .catch((error) => {
+                utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
+            });
+        }
+        else {
+            setHideMarginRight(false);
+        }
+    }, [count, events, next]);
+    const handleChange = (0, react_1.useCallback)((swiper) => {
+        setCurrentItem(swiper.snapIndex);
+        if (swiper.snapIndex > 0 && swiper.snapIndex < count) {
+            if (!hideMarginLeft) {
+                setHideMarginLeft(true);
+            }
+            if (!hideMarginRight) {
+                setHideMarginRight(true);
+            }
+        }
+    }, [count, hideMarginLeft, hideMarginRight]);
+    // RENDER
+    if (!events && loading) {
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
+    }
+    if (!events || 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.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.suggestedEventsWidget.title", defaultMessage: "ui.suggestedEventsWidget.title" }) })), (0, jsx_runtime_1.jsxs)(react_2.Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto", grabCursor: true, onReachBeginning: handleReachBeginning, onReachEnd: handleReachEnd, onSlideChange: handleChange, className: classes.swiper, style: {
+                            marginLeft: hideMarginLeft ? `-${theme.spacing(2)}` : 0,
+                            marginRight: hideMarginRight ? `-${theme.spacing(2)}` : 0
+                        } }, { children: [(showSkeleton ? [...events, undefined] : events).map((event, i) => ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, Object.assign({ className: classes.swiperSlide }, { children: (0, jsx_runtime_1.jsx)(Event_1.default, { event: event, template: event_1.SCEventTemplateType.PREVIEW, actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), variant: "outlined", className: classes.event }) }), i))), (0, jsx_runtime_1.jsx)(Arrow_1.default, { className: (0, classnames_1.default)(classes.swiperArrow, classes.swiperPrevArrow), type: "prev", currentItem: currentItem, setCurrentItem: setCurrentItem }), (0, jsx_runtime_1.jsx)(Arrow_1.default, { className: (0, classnames_1.default)(classes.swiperArrow, classes.swiperNextArrow), type: "next", currentItem: currentItem, setCurrentItem: setCurrentItem })] }))] })), (0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.actions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_SUGGESTED_ROUTE_NAME, {}), 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.suggestedEventsWidget.showAll", defaultMessage: "ui.suggestedEventsWidget.showAll" }) })) })) }))] })));
+}
+exports.default = SuggestedEventsWidget;

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

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

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

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

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

@@ -0,0 +1,5 @@
+import Arrow, { ArrowProps } from './Arrow';
+import SuggestedEventsWidgetSkeleton from './Skeleton';
+import SuggestedEventsWidget, { SuggestedEventsWidgetProps } from './SuggestedEventsWidget';
+export default SuggestedEventsWidget;
+export { Arrow, SuggestedEventsWidgetSkeleton, type ArrowProps, type SuggestedEventsWidgetProps };

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SuggestedEventsWidgetSkeleton = exports.Arrow = void 0;
+const tslib_1 = require("tslib");
+const Arrow_1 = tslib_1.__importDefault(require("./Arrow"));
+exports.Arrow = Arrow_1.default;
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
+exports.SuggestedEventsWidgetSkeleton = Skeleton_1.default;
+const SuggestedEventsWidget_1 = tslib_1.__importDefault(require("./SuggestedEventsWidget"));
+exports.default = SuggestedEventsWidget_1.default;

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Notification_1 = require("../Notification");
 const styles_1 = require("@mui/material/styles");
 const constants_1 = require("./constants");
@@ -33,6 +32,6 @@ const Root = (0, styles_1.styled)(Notification_1.NotificationSkeleton, {
  *
  */
 function ToastNotificationsSkeleton() {
-    return react_1.default.createElement(Root, { className: classes.root });
+    return (0, jsx_runtime_1.jsx)(Root, { className: classes.root });
 }
 exports.default = ToastNotificationsSkeleton;

package/lib/cjs/components/ToastNotifications/ToastNotifications.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -25,6 +26,7 @@ const system_1 = require("@mui/system");
 const Contribution_1 = tslib_1.__importDefault(require("../Notification/Contribution"));
 const constants_1 = require("./constants");
 const Group_1 = tslib_1.__importDefault(require("../Notification/Group"));
+const Event_1 = tslib_1.__importDefault(require("../Notification/Event/Event"));
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
@@ -80,48 +82,54 @@ function UserToastNotifications(inProps) {
             /** Notification of types: comment, nested_comment, etc... */
             type = react_core_1.SCNotification.SCNotificationMapping[n.activity_type];
             if (type === types_1.SCNotificationTypologyType.COMMENT || type === types_1.SCNotificationTypologyType.NESTED_COMMENT) {
-                content = react_1.default.createElement(Comment_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+                content = (0, jsx_runtime_1.jsx)(Comment_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === types_1.SCNotificationTypologyType.FOLLOW) {
-                content = react_1.default.createElement(ContributionFollow_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+                content = (0, jsx_runtime_1.jsx)(ContributionFollow_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === types_1.SCNotificationTypologyType.USER_FOLLOW) {
-                content = react_1.default.createElement(UserFollow_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+                content = (0, jsx_runtime_1.jsx)(UserFollow_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === types_1.SCNotificationTypologyType.CONNECTION_REQUEST || type === types_1.SCNotificationTypologyType.CONNECTION_ACCEPT) {
-                content = react_1.default.createElement(UserConnection_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+                content = (0, jsx_runtime_1.jsx)(UserConnection_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === types_1.SCNotificationTypologyType.VOTE_UP) {
-                content = react_1.default.createElement(VoteUp_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+                content = (0, jsx_runtime_1.jsx)(VoteUp_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === types_1.SCNotificationTypologyType.PRIVATE_MESSAGE) {
-                content = react_1.default.createElement(PrivateMessage_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+                content = (0, jsx_runtime_1.jsx)(PrivateMessage_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === types_1.SCNotificationTypologyType.BLOCKED_USER || type === types_1.SCNotificationTypologyType.UNBLOCKED_USER) {
-                return react_1.default.createElement(UserBlocked_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+                return (0, jsx_runtime_1.jsx)(UserBlocked_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === types_1.SCNotificationTypologyType.MENTION) {
-                content = react_1.default.createElement(Mention_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+                content = (0, jsx_runtime_1.jsx)(Mention_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === types_1.SCNotificationTypologyType.KINDLY_NOTICE_FLAG) {
-                content = react_1.default.createElement(KindlyNoticeFlag_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+                content = (0, jsx_runtime_1.jsx)(KindlyNoticeFlag_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === types_1.SCNotificationTypologyType.INCUBATOR_APPROVED) {
-                content = react_1.default.createElement(IncubatorApproved_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+                content = (0, jsx_runtime_1.jsx)(IncubatorApproved_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === types_1.SCNotificationTypologyType.CONTRIBUTION) {
-                content = react_1.default.createElement(Contribution_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+                content = (0, jsx_runtime_1.jsx)(Contribution_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === types_1.SCNotificationTypologyType.USER_ADDED_TO_GROUP ||
                 type === types_1.SCNotificationTypologyType.USER_INVITED_TO_JOIN_GROUP ||
                 type === types_1.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP ||
                 type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP) {
-                content = react_1.default.createElement(Group_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+                content = (0, jsx_runtime_1.jsx)(Group_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
+            }
+            else if (type === types_1.SCNotificationTypologyType.USER_ADDED_TO_EVENT ||
+                type === types_1.SCNotificationTypologyType.USER_INVITED_TO_JOIN_EVENT ||
+                type === types_1.SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_EVENT ||
+                type === types_1.SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
+                content = (0, jsx_runtime_1.jsx)(Event_1.default, { notificationObject: n.notification_obj, template: types_2.SCNotificationObjectTemplateType.TOAST });
             }
         }
         if (n.activity_type && n.activity_type === types_1.SCNotificationTypologyType.NOTIFICATION_BANNER) {
             /** Notification of type: 'notification_banner' */
-            content = react_1.default.createElement(Message_1.default, { key: n.notification_obj.id, message: n.notification_obj, elevation: 0, template: types_2.SCBroadcastMessageTemplateType.TOAST });
+            content = (0, jsx_runtime_1.jsx)(Message_1.default, { message: n.notification_obj, elevation: 0, template: types_2.SCBroadcastMessageTemplateType.TOAST }, n.notification_obj.id);
         }
         if (handleNotification && type) {
             /** Override content */
@@ -174,6 +182,6 @@ function UserToastNotifications(inProps) {
     (0, react_1.useEffect)(() => {
         setOptions(Object.assign(Object.assign({}, options), { Components: Object.assign(Object.assign({}, options === null || options === void 0 ? void 0 : options.Components), { notification: CustomSnackMessage_1.default }) }));
     }, [scUserContext.managers.settings.all]);
-    return react_1.default.createElement(Root, null);
+    return (0, jsx_runtime_1.jsx)(Root, {});
 }
 exports.default = UserToastNotifications;

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

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

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

@@ -1,6 +1,6 @@
-import React from 'react';
 import { ButtonBaseProps } from '@mui/material';
 import { SCUserType } from '@selfcommunity/types';
+import React, { ReactNode } from 'react';
 import { FollowUserButtonProps } from '../FollowUserButton/FollowUserButton';
 import { FriendshipButtonProps } from '../FriendshipUserButton/FriendshipUserButton';
 import { WidgetProps } from '../Widget';
@@ -49,6 +49,7 @@ export interface UserProps extends WidgetProps {
      * @default {}
      */
     buttonProps?: ButtonBaseProps | null;
+    secondary?: ReactNode | null;
     /**
      * Any other properties
      */