@selfcommunity/react-ui 0.7.56-alpha.0 → 0.8.0-alpha.1

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

@@ -1,7 +1,8 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Avatar, AvatarGroup, Skeleton, useTheme } from '@mui/material';
+import { useThemeProps } from '@mui/system';
 const PREFIX = 'SCAvatarGroupSkeleton';
 const classes = {
     root: `${PREFIX}-root`
@@ -31,9 +32,13 @@ const Root = styled(AvatarGroup, {
  |root|.SCAvatarGroupSkeleton-root|Styles applied to the root element.|
  *
  */
-export default function AvatarGroupSkeleton(props) {
-    const { count = 2 } = props, rest = __rest(props, ["count"]);
+export default function AvatarGroupSkeleton(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, skeletonsAnimation = 'wave', count = 2 } = props, rest = __rest(props, ["className", "skeletonsAnimation", "count"]);
     const theme = useTheme();
-    return (React.createElement(Root, Object.assign({ className: classes.root }, rest), [...Array(count + 1)].map((x, i) => (React.createElement(Avatar, { key: i },
-        React.createElement(Skeleton, { variant: "circular", width: theme.selfcommunity.user.avatar.sizeSmall, height: theme.selfcommunity.user.avatar.sizeSmall }))))));
+    return (_jsx(Root, Object.assign({ className: classes.root }, rest, { children: [...Array(count + 1)].map((x, i) => (_jsx(Avatar, { children: _jsx(Skeleton, { variant: "circular", width: theme.selfcommunity.user.avatar.sizeSmall, height: theme.selfcommunity.user.avatar.sizeSmall, animation: skeletonsAnimation }) }, i))) })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Widget from '../Widget';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
@@ -31,10 +31,6 @@ const Root = styled(Widget)(({ theme }) => ({}));
  *
  */
 function GenericSkeleton(props) {
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props),
-        React.createElement(CardContent, null,
-            React.createElement(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 10 } }),
-            React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 5 } }),
-            React.createElement(Skeleton, { animation: "wave", height: 10, width: "60%", style: { marginBottom: 5 } }))));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsxs(CardContent, { children: [_jsx(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 10 } }), _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 5 } }), _jsx(Skeleton, { animation: "wave", height: 10, width: "60%", style: { marginBottom: 5 } })] }) })));
 }
 export default GenericSkeleton;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { List, ListItem, useTheme } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
@@ -37,6 +37,6 @@ const Root = styled(List, {
  */
 export default function SnippetNotificationSkeleton(props) {
     const theme = useTheme();
-    const notificationSkeleton = (React.createElement(NotificationItem, { className: classes.item, template: SCNotificationObjectTemplateType.SNIPPET, image: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeSmall, height: theme.selfcommunity.user.avatar.sizeSmall }), primary: React.createElement(Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: React.createElement(Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) }));
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props), [...Array(7)].map((x, i) => (React.createElement(ListItem, { className: classes.item, key: i }, notificationSkeleton)))));
+    const notificationSkeleton = (_jsx(NotificationItem, { className: classes.item, template: SCNotificationObjectTemplateType.SNIPPET, image: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeSmall, height: theme.selfcommunity.user.avatar.sizeSmall }), primary: _jsx(Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: _jsx(Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }) }));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: [...Array(7)].map((x, i) => (_jsx(ListItem, Object.assign({ className: classes.item }, { children: notificationSkeleton }), i))) })));
 }

package/lib/esm/components/SnippetNotifications/SnippetNotifications.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import CommentNotification from '../Notification/Comment';
 import UserFollowNotification from '../Notification/UserFollow';
@@ -32,6 +33,7 @@ import ContributionNotification from '../Notification/Contribution';
 import NotificationItem from '../../shared/NotificationItem';
 import { PREFIX } from './constants';
 import GroupNotification from '../Notification/Group';
+import EventNotification from '../Notification/Event/Event';
 const classes = {
     root: `${PREFIX}-root`,
     notificationsWrap: `${PREFIX}-notifications-wrap`,
@@ -194,70 +196,76 @@ export default function SnippetNotifications(inProps) {
         const type = n.type;
         let content;
         if (type === SCNotificationTypologyType.COMMENT || type === SCNotificationTypologyType.NESTED_COMMENT) {
-            content = React.createElement(CommentNotification, { notificationObject: n, key: i, index: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(CommentNotification, { notificationObject: n, index: i, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.FOLLOW) {
-            content = React.createElement(ContributionFollowNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(ContributionFollowNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.USER_FOLLOW) {
-            content = React.createElement(UserFollowNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(UserFollowNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.CONNECTION_REQUEST || type === SCNotificationTypologyType.CONNECTION_ACCEPT) {
-            content = React.createElement(UserConnectionNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(UserConnectionNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.VOTE_UP) {
-            content = React.createElement(VoteUpNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(VoteUpNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.KINDLY_NOTICE_ADVERTISING ||
             type === SCNotificationTypologyType.KINDLY_NOTICE_AGGRESSIVE ||
             type === SCNotificationTypologyType.KINDLY_NOTICE_POOR ||
             type === SCNotificationTypologyType.KINDLY_NOTICE_VULGAR ||
             type === SCNotificationTypologyType.KINDLY_NOTICE_OFFTOPIC) {
-            content = React.createElement(KindlyNoticeForNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(KindlyNoticeForNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.KINDLY_NOTICE_FLAG) {
-            content = React.createElement(KindlyNoticeFlagNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(KindlyNoticeFlagNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.DELETED_FOR_ADVERTISING ||
             type === SCNotificationTypologyType.DELETED_FOR_AGGRESSIVE ||
             type === SCNotificationTypologyType.DELETED_FOR_POOR ||
             type === SCNotificationTypologyType.DELETED_FOR_VULGAR ||
             type === SCNotificationTypologyType.DELETED_FOR_OFFTOPIC) {
-            content = React.createElement(DeletedForNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(DeletedForNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.UNDELETED_FOR) {
-            content = React.createElement(UndeletedForNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(UndeletedForNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.COLLAPSED_FOR_ADVERTISING ||
             type === SCNotificationTypologyType.COLLAPSED_FOR_AGGRESSIVE ||
             type === SCNotificationTypologyType.COLLAPSED_FOR_POOR ||
             type === SCNotificationTypologyType.COLLAPSED_FOR_VULGAR ||
             type === SCNotificationTypologyType.COLLAPSED_FOR_OFFTOPIC) {
-            content = React.createElement(CollapsedForNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(CollapsedForNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.PRIVATE_MESSAGE) {
-            content = React.createElement(PrivateMessageNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(PrivateMessageNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.BLOCKED_USER || type === SCNotificationTypologyType.UNBLOCKED_USER) {
-            content = React.createElement(UserBlockedNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(UserBlockedNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.MENTION) {
-            content = React.createElement(MentionNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(MentionNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.INCUBATOR_APPROVED) {
-            content = React.createElement(IncubatorApprovedNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(IncubatorApprovedNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (type === SCNotificationTypologyType.CUSTOM_NOTIFICATION && handleCustomNotification) {
             content = handleCustomNotification(n);
         }
         else if (type === SCNotificationTypologyType.CONTRIBUTION) {
-            content = React.createElement(ContributionNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            content = _jsx(ContributionNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         else if (n.type === SCNotificationTypologyType.USER_ADDED_TO_GROUP ||
             n.type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_GROUP ||
             n.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP ||
             n.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP) {
-            return React.createElement(GroupNotification, { notificationObject: n, key: i, template: SCNotificationObjectTemplateType.SNIPPET });
+            return _jsx(GroupNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
+        }
+        else if (n.type === SCNotificationTypologyType.USER_ADDED_TO_EVENT ||
+            n.type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_EVENT ||
+            n.type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_EVENT ||
+            n.type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
+            return _jsx(EventNotification, { notificationObject: n, template: SCNotificationObjectTemplateType.SNIPPET }, i);
         }
         if (type && handleNotification) {
             /** Override content */
@@ -268,15 +276,9 @@ export default function SnippetNotifications(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        React.createElement(Box, { className: classes.notificationsWrap }, !initialized || loading ? (React.createElement(Skeleton, { elevation: 0 })) : (React.createElement(ScrollContainer, Object.assign({}, ScrollContainerProps),
-            React.createElement(MenuList, { className: classes.list, disabledItemsFocusable: true, disableListWrap: true },
-                scUserContext.user.unseen_notification_banners_counter ? (React.createElement(MenuItem, { className: classNames(classes.item, classes.broadcastMessagesBanner), key: "banner", component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) },
-                    React.createElement(NotificationItem, { template: SCNotificationObjectTemplateType.SNIPPET, isNew: true, disableTypography: true, image: React.createElement(Avatar, { alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), primary: React.createElement(Typography, { component: 'div' }, intl.formatMessage({ id: 'ui.snippetNotifications.broadcastMessages', defaultMessage: 'ui.snippetNotifications.broadcastMessages' }, {
-                            count: scUserContext.user.unseen_notification_banners_counter,
-                            b: (...chunks) => React.createElement("strong", null, chunks),
-                            link: (...chunks) => React.createElement(Link, { to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, chunks)
-                        })) }))) : null,
-                notifications.length === 0 ? (React.createElement(MenuItem, { className: classes.emptyBoxNotifications },
-                    React.createElement(FormattedMessage, { id: "ui.snippetNotifications.noNotifications", defaultMessage: "ui.snippetNotifications.noNotifications" }))) : (notifications.slice(0, showMax).map((notificationObject, i) => notificationObject.aggregated.map((n, k) => (React.createElement(MenuItem, { className: classes.item, key: k, onClick: (e) => handleSingleNotificationClick(e, n), disableRipple: true, disableTouchRipple: true }, renderAggregatedItem(n, i))))))))))));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsx(Box, Object.assign({ className: classes.notificationsWrap }, { children: !initialized || loading ? (_jsx(Skeleton, { elevation: 0 })) : (_jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsxs(MenuList, Object.assign({ className: classes.list, disabledItemsFocusable: true, disableListWrap: true }, { children: [scUserContext.user.unseen_notification_banners_counter ? (_jsx(MenuItem, Object.assign({ className: classNames(classes.item, classes.broadcastMessagesBanner), component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: _jsx(NotificationItem, { template: SCNotificationObjectTemplateType.SNIPPET, isNew: true, disableTypography: true, image: _jsx(Avatar, { alt: preferences[SCPreferences.TEXT_APPLICATION_NAME], src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE] }), primary: _jsx(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) => _jsx("strong", { children: chunks }),
+                                        link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: chunks }))
+                                    }) })) }) }), "banner")) : null, notifications.length === 0 ? (_jsx(MenuItem, Object.assign({ className: classes.emptyBoxNotifications }, { children: _jsx(FormattedMessage, { id: "ui.snippetNotifications.noNotifications", defaultMessage: "ui.snippetNotifications.noNotifications" }) }))) : (notifications.slice(0, showMax).map((notificationObject, i) => notificationObject.aggregated.map((n, k) => (_jsx(MenuItem, Object.assign({ className: classes.item, onClick: (e) => handleSingleNotificationClick(e, n), disableRipple: true, disableTouchRipple: true }, { children: renderAggregatedItem(n, i) }), k)))))] })) }))) })) })));
 }

package/lib/esm/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/esm/components/SuggestedEventsWidget/Arrow.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button, Icon } from '@mui/material';
+import { useCallback, useEffect, useState } from 'react';
+import { useSwiper } from 'swiper/react';
+export default function Arrow(props) {
+    const { type, currentItem, setCurrentItem, className } = props;
+    // STATE
+    const [itemsLength, setItemsLength] = useState(0);
+    // HOOKS
+    const swiper = useSwiper();
+    useEffect(() => {
+        setItemsLength(swiper.slides.length);
+    }, [currentItem]);
+    const handleChange = useCallback((type) => {
+        if (type === 'prev') {
+            swiper.slidePrev();
+        }
+        else {
+            swiper.slideNext();
+        }
+        setCurrentItem(swiper.snapIndex);
+    }, [type]);
+    if (type === 'prev') {
+        return (currentItem > 0 && (_jsx(Button, Object.assign({ variant: "contained", className: className, size: "medium", onClick: () => handleChange('prev') }, { children: _jsx(Icon, { children: "chevron_left" }) }))));
+    }
+    return (currentItem < itemsLength - 1 && (_jsx(Button, Object.assign({ variant: "contained", className: className, size: "medium", onClick: () => handleChange('next') }, { children: _jsx(Icon, { children: "chevron_right" }) }))));
+}

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

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

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

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CardActions, CardContent, Skeleton } from '@mui/material';
+import { styled } from '@mui/system';
+import 'swiper/css';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { SCEventTemplateType } from '../../types/event';
+import { EventSkeleton } from '../Event';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+const classes = {
+    root: `${PREFIX}-skeleton-root`,
+    content: `${PREFIX}-content`,
+    title: `${PREFIX}-title`,
+    swiperSlide: `${PREFIX}-swiper-slide`,
+    actions: `${PREFIX}-actions`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'SkeletonRoot',
+    overridesResolver: (_props, styles) => styles.skeletonRoot
+})(() => ({}));
+export default function SuggestedEventsWidgetSkeleton() {
+    return (_jsxs(Root, Object.assign({ className: classes.root }, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { className: classes.title, animation: "wave", width: "141px", height: "23px" }), _jsx(Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto" }, { children: [1, 2, 3, 4, 5, 6, 7].map((_element, i) => (_jsx(SwiperSlide, Object.assign({ className: classes.swiperSlide }, { children: _jsx(EventSkeleton, { template: SCEventTemplateType.PREVIEW, variant: "outlined", actions: _jsx(_Fragment, {}) }) }), i))) }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Skeleton, { animation: "wave", width: "52px", height: "20px" }) }))] })));
+}

package/lib/esm/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/esm/components/SuggestedEventsWidget/SuggestedEventsWidget.js

@@ -0,0 +1,118 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, CardActions, CardContent, Typography, useTheme, useThemeProps } from '@mui/material';
+import { styled } from '@mui/system';
+import { Endpoints, http, SuggestionService } from '@selfcommunity/api-services';
+import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
+import { Logger } from '@selfcommunity/utils';
+import classNames from 'classnames';
+import { useCallback, useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
+import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import { SCEventTemplateType } from '../../types/event';
+import Event from '../Event';
+import Widget from '../Widget';
+import Arrow from './Arrow';
+import { PREFIX } from './constants';
+import Skeleton from './Skeleton';
+const classes = {
+    root: `${PREFIX}-root`,
+    content: `${PREFIX}-content`,
+    title: `${PREFIX}-title`,
+    swiper: `${PREFIX}-swiper`,
+    swiperSlide: `${PREFIX}-swiper-slide`,
+    swiperArrow: `${PREFIX}-swiper-arrow`,
+    swiperPrevArrow: `${PREFIX}-swiper-prev-arrow`,
+    swiperNextArrow: `${PREFIX}-swiper-next-arrow`,
+    event: `${PREFIX}-event`,
+    actions: `${PREFIX}-actions`,
+    actionButton: `${PREFIX}-action-button`
+};
+const Root = styled(Widget, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
+export default function SuggestedEventsWidget(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { endpointQueryParams = { limit: 3, offset: DEFAULT_PAGINATION_OFFSET } } = props, rest = __rest(props, ["endpointQueryParams"]);
+    // STATE
+    const [count, setCount] = useState(null);
+    const [next, setNext] = useState(null);
+    const [events, setEvents] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [showSkeleton, setShowSkeleton] = useState(false);
+    const [currentItem, setCurrentItem] = useState(0);
+    const [hideMarginLeft, setHideMarginLeft] = useState(false);
+    const [hideMarginRight, setHideMarginRight] = useState(true);
+    // CONTEXT
+    const scRoutingContext = useSCRouting();
+    //HOOKS
+    const theme = useTheme();
+    useEffect(() => {
+        SuggestionService.getEventSuggestion(Object.assign({}, endpointQueryParams))
+            .then((payload) => {
+            setCount(payload.count);
+            setNext(payload.next);
+            setEvents(payload.results);
+            setLoading(false);
+        })
+            .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
+        });
+    }, []);
+    const handleReachBeginning = useCallback(() => {
+        setHideMarginLeft(false);
+    }, []);
+    const handleReachEnd = useCallback(() => {
+        if (count > events.length && next) {
+            setShowSkeleton(true);
+            http
+                .request({
+                url: next,
+                method: Endpoints.GetEventSuggestedUsers.method
+            })
+                .then((res) => {
+                setCount(res.data.count);
+                setNext(res.data.next);
+                setEvents((prevEvents) => [...prevEvents, ...res.data.results]);
+                setShowSkeleton(false);
+            })
+                .catch((error) => {
+                Logger.error(SCOPE_SC_UI, error);
+            });
+        }
+        else {
+            setHideMarginRight(false);
+        }
+    }, [count, events, next]);
+    const handleChange = 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 _jsx(Skeleton, {});
+    }
+    if (!events || count === 0) {
+        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.suggestedEventsWidget.title", defaultMessage: "ui.suggestedEventsWidget.title" }) })), _jsxs(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) => (_jsx(SwiperSlide, Object.assign({ className: classes.swiperSlide }, { children: _jsx(Event, { event: event, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.event }) }), i))), _jsx(Arrow, { className: classNames(classes.swiperArrow, classes.swiperPrevArrow), type: "prev", currentItem: currentItem, setCurrentItem: setCurrentItem }), _jsx(Arrow, { className: classNames(classes.swiperArrow, classes.swiperNextArrow), type: "next", currentItem: currentItem, setCurrentItem: setCurrentItem })] }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_SUGGESTED_ROUTE_NAME, {}), className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.showAll", defaultMessage: "ui.suggestedEventsWidget.showAll" }) })) })) }))] })));
+}

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

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

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

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

package/lib/esm/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/esm/components/SuggestedEventsWidget/index.js

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { NotificationSkeleton } from '../Notification';
 import { styled } from '@mui/material/styles';
 import { PREFIX } from './constants';
@@ -30,5 +30,5 @@ const Root = styled(NotificationSkeleton, {
  *
  */
 export default function ToastNotificationsSkeleton() {
-    return React.createElement(Root, { className: classes.root });
+    return _jsx(Root, { className: classes.root });
 }

package/lib/esm/components/ToastNotifications/ToastNotifications.js

@@ -1,4 +1,5 @@
-import React, { useEffect, useRef } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
 import { SCNotification, useSCAlertMessages, useSCContext, useSCUser } from '@selfcommunity/react-core';
@@ -22,6 +23,7 @@ import { useThemeProps } from '@mui/system';
 import ContributionNotification from '../Notification/Contribution';
 import { PREFIX } from './constants';
 import GroupNotification from '../Notification/Group';
+import EventNotification from '../Notification/Event/Event';
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root'
@@ -77,48 +79,54 @@ export default function UserToastNotifications(inProps) {
             /** Notification of types: comment, nested_comment, etc... */
             type = SCNotification.SCNotificationMapping[n.activity_type];
             if (type === SCNotificationTypologyType.COMMENT || type === SCNotificationTypologyType.NESTED_COMMENT) {
-                content = React.createElement(CommentNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+                content = _jsx(CommentNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === SCNotificationTypologyType.FOLLOW) {
-                content = React.createElement(ContributionFollowNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+                content = _jsx(ContributionFollowNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === SCNotificationTypologyType.USER_FOLLOW) {
-                content = React.createElement(UserFollowNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+                content = _jsx(UserFollowNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === SCNotificationTypologyType.CONNECTION_REQUEST || type === SCNotificationTypologyType.CONNECTION_ACCEPT) {
-                content = React.createElement(UserConnectionNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+                content = _jsx(UserConnectionNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === SCNotificationTypologyType.VOTE_UP) {
-                content = React.createElement(VoteUpNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+                content = _jsx(VoteUpNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === SCNotificationTypologyType.PRIVATE_MESSAGE) {
-                content = React.createElement(PrivateMessageNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+                content = _jsx(PrivateMessageNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === SCNotificationTypologyType.BLOCKED_USER || type === SCNotificationTypologyType.UNBLOCKED_USER) {
-                return React.createElement(UserBlockedNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+                return _jsx(UserBlockedNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === SCNotificationTypologyType.MENTION) {
-                content = React.createElement(MentionNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+                content = _jsx(MentionNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === SCNotificationTypologyType.KINDLY_NOTICE_FLAG) {
-                content = React.createElement(KindlyNoticeFlagNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+                content = _jsx(KindlyNoticeFlagNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === SCNotificationTypologyType.INCUBATOR_APPROVED) {
-                content = React.createElement(IncubatorApprovedNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+                content = _jsx(IncubatorApprovedNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === SCNotificationTypologyType.CONTRIBUTION) {
-                content = React.createElement(ContributionNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+                content = _jsx(ContributionNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
             else if (type === SCNotificationTypologyType.USER_ADDED_TO_GROUP ||
                 type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_GROUP ||
                 type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_GROUP ||
                 type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_GROUP) {
-                content = React.createElement(GroupNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+                content = _jsx(GroupNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
+            }
+            else if (type === SCNotificationTypologyType.USER_ADDED_TO_EVENT ||
+                type === SCNotificationTypologyType.USER_INVITED_TO_JOIN_EVENT ||
+                type === SCNotificationTypologyType.USER_ACCEPTED_TO_JOIN_EVENT ||
+                type === SCNotificationTypologyType.USER_REQUESTED_TO_JOIN_EVENT) {
+                content = _jsx(EventNotification, { notificationObject: n.notification_obj, template: SCNotificationObjectTemplateType.TOAST });
             }
         }
         if (n.activity_type && n.activity_type === SCNotificationTypologyType.NOTIFICATION_BANNER) {
             /** Notification of type: 'notification_banner' */
-            content = React.createElement(Message, { key: n.notification_obj.id, message: n.notification_obj, elevation: 0, template: SCBroadcastMessageTemplateType.TOAST });
+            content = _jsx(Message, { message: n.notification_obj, elevation: 0, template: SCBroadcastMessageTemplateType.TOAST }, n.notification_obj.id);
         }
         if (handleNotification && type) {
             /** Override content */
@@ -171,5 +179,5 @@ export default function UserToastNotifications(inProps) {
     useEffect(() => {
         setOptions(Object.assign(Object.assign({}, options), { Components: Object.assign(Object.assign({}, options === null || options === void 0 ? void 0 : options.Components), { notification: CustomSnackMessage }) }));
     }, [scUserContext.managers.settings.all]);
-    return React.createElement(Root, null);
+    return _jsx(Root, {});
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
@@ -33,6 +33,5 @@ const Root = styled(BaseItem, {
  */
 export default function UserSkeleton(props) {
     const theme = useTheme();
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props, { image: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), primary: React.createElement(Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: React.createElement(Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: React.createElement(Button, { size: "small", variant: "outlined", disabled: true },
-            React.createElement(Skeleton, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } })) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { image: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), primary: _jsx(Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: _jsx(Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: _jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) })) })));
 }

package/lib/esm/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
      */