@selfcommunity/react-ui 0.7.50-events.56 → 0.7.50-events.58

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

@@ -1,8 +1,8 @@
-import React from 'react';
 import { SCEventType } from '@selfcommunity/types';
+import React from 'react';
+import { SCEventTemplateType } from '../../types/event';
 import { WidgetProps } from '../Widget';
 import { EventSkeletonProps } from './Skeleton';
-import { SCEventTemplateType } from '../../types/event';
 export interface EventProps extends WidgetProps {
     /**
      * Event Object

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

@@ -2,22 +2,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
-const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
-const types_1 = require("@selfcommunity/types");
+const styles_1 = require("@mui/material/styles");
+const system_1 = require("@mui/system");
 const react_core_1 = require("@selfcommunity/react-core");
-const react_intl_1 = require("react-intl");
+const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const system_1 = require("@mui/system");
+const react_intl_1 = require("react-intl");
 const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
-const Widget_1 = tslib_1.__importDefault(require("../Widget"));
-const constants_1 = require("./constants");
-const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const Calendar_1 = tslib_1.__importDefault(require("../../shared/Calendar"));
 const EventInfoDetails_1 = tslib_1.__importDefault(require("../../shared/EventInfoDetails"));
-const User_1 = tslib_1.__importDefault(require("../User"));
-const EventPartecipantsButton_1 = tslib_1.__importDefault(require("../EventPartecipantsButton"));
 const event_1 = require("../../types/event");
+const EventPartecipantsButton_1 = tslib_1.__importDefault(require("../EventPartecipantsButton"));
+const User_1 = tslib_1.__importDefault(require("../User"));
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const constants_1 = require("./constants");
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     detailRoot: `${constants_1.PREFIX}-detail-root`,
@@ -119,13 +119,13 @@ function Event(inProps) {
      */
     let contentObj;
     if (template === event_1.SCEventTemplateType.DETAIL) {
-        contentObj = ((0, jsx_runtime_1.jsxs)(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.detailImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_big, alt: scEvent.name, className: classes.detailImage }), (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.detailContent }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent }), !hideEventPlanner && ((0, jsx_runtime_1.jsx)(User_1.default, { user: scEvent.managed_by, elevation: 0, secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), className: classes.detailUser })), !hideEventParticipants && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailFirstDivider }), (0, jsx_runtime_1.jsx)(EventPartecipantsButton_1.default, { event: scEvent, eventId: scEvent.id })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.detailActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+        contentObj = ((0, jsx_runtime_1.jsxs)(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.detailImageWrapper }, { children: [(0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), (0, jsx_runtime_1.jsx)(Calendar_1.default, { day: new Date(scEvent.start_date).getDate() })] })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.detailContent }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), (0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent }), !hideEventPlanner && ((0, jsx_runtime_1.jsx)(User_1.default, { user: scEvent.managed_by, elevation: 0, secondary: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), className: classes.detailUser })), !hideEventParticipants && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailFirstDivider }), (0, jsx_runtime_1.jsx)(EventPartecipantsButton_1.default, { event: scEvent, eventId: scEvent.id })] })), (0, jsx_runtime_1.jsx)(material_1.Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.detailActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else if (template === event_1.SCEventTemplateType.PREVIEW) {
         contentObj = ((0, jsx_runtime_1.jsxs)(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.CardMedia, { component: "img", height: "100px", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }) })), (0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: classes.previewContent }, { children: [(0, jsx_runtime_1.jsx)(EventInfoDetails_1.default, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && (0, jsx_runtime_1.jsx)(EventPartecipantsButton_1.default, { event: scEvent })] })), actions !== null && actions !== void 0 ? actions : ((0, jsx_runtime_1.jsx)(material_1.CardActions, Object.assign({ className: classes.previewActions }, { children: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else {
-        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_small, className: classes.snippetAvatar }), primary: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
+        contentObj = ((0, jsx_runtime_1.jsx)(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), primary: (0, jsx_runtime_1.jsxs)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
                             weekday: 'long',
                             month: 'long',
                             day: 'numeric'

package/lib/cjs/components/EventSubscribeButton/EventSubscribeButton.js

@@ -132,9 +132,11 @@ function EventSubscribeButton(inProps) {
             }
             else {
                 s =
-                    scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.NOT_GOING
-                        ? types_1.SCEventSubscriptionStatusType.SUBSCRIBED
-                        : types_1.SCEventSubscriptionStatusType.NOT_GOING;
+                    scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.REQUESTED
+                        ? null
+                        : scEvent.subscription_status === types_1.SCEventSubscriptionStatusType.NOT_GOING
+                            ? types_1.SCEventSubscriptionStatusType.SUBSCRIBED
+                            : types_1.SCEventSubscriptionStatusType.NOT_GOING;
             }
             onSubscribe && onSubscribe(scEvent, s);
         })
@@ -189,6 +191,6 @@ function EventSubscribeButton(inProps) {
     }
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) !== types_1.SCEventPrivacyType.PRIVATE ||
             ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === types_1.SCEventPrivacyType.PRIVATE && status && status !== types_1.SCEventSubscriptionStatusType.REQUESTED) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SelectRoot, Object.assign({ className: (0, classnames_1.default)(classes.selectRoot, className, { [classes.going]: status && status === types_1.SCEventSubscriptionStatusType.GOING }, { [classes.notGoing]: status && status === types_1.SCEventSubscriptionStatusType.NOT_GOING }), onClick: handleOpen, endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: open ? 'expand_less' : 'expand_more' }), startIcon: status &&
-                        status !== types_1.SCEventSubscriptionStatusType.SUBSCRIBED && ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: status === types_1.SCEventSubscriptionStatusType.GOING ? 'circle_checked' : 'circle_closed' })) }, rest, { children: getStatus })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: open, onClose: handleClose }, { children: renderMenuItems() })))] })) : ((0, jsx_runtime_1.jsx)(RequestRoot, Object.assign({ className: (0, classnames_1.default)(classes.requestRoot, className), variant: "outlined", size: "small", loading: scUserContext.user ? scEventsManager.isLoading(scEvent) : null, disabled: status === types_1.SCEventSubscriptionStatusType.REQUESTED, onClick: handleToggleAction }, rest, { children: getStatus }))) }));
+                        status !== types_1.SCEventSubscriptionStatusType.SUBSCRIBED && ((0, jsx_runtime_1.jsx)(material_1.Icon, { children: status === types_1.SCEventSubscriptionStatusType.GOING ? 'circle_checked' : 'circle_closed' })) }, rest, { children: getStatus })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: open, onClose: handleClose }, { children: renderMenuItems() })))] })) : ((0, jsx_runtime_1.jsx)(RequestRoot, Object.assign({ className: (0, classnames_1.default)(classes.requestRoot, className), variant: "outlined", size: "small", loading: scUserContext.user ? scEventsManager.isLoading(scEvent) : null, onClick: handleToggleAction }, rest, { children: getStatus }))) }));
 }
 exports.default = EventSubscribeButton;

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

@@ -196,7 +196,7 @@ function Events(inProps) {
                                 variant: showFollowed ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick, 
                                 // 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 }) }))] })) }))), (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)) ||
+                                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, { 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/Events/PastEventsFilter.d.ts

@@ -1,4 +1,5 @@
-export interface PastEventsFilterProps {
+import { ChipProps } from '@mui/material';
+export interface PastEventsFilterProps extends ChipProps {
     showPastEvents: boolean;
     handleClick: () => void;
     handleDeleteClick?: () => void;

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

@@ -1,5 +1,6 @@
 "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 react_intl_1 = require("react-intl");
@@ -12,11 +13,11 @@ function PastEventsFilter(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { showPastEvents, handleClick, handleDeleteClick } = props;
+    const { showPastEvents, handleClick, handleDeleteClick } = props, rest = tslib_1.__rest(props, ["showPastEvents", "handleClick", "handleDeleteClick"]);
     return ((0, jsx_runtime_1.jsx)(Events_1.EventsChipRoot
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    , { 
+    , Object.assign({ 
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
         color: showPastEvents ? 'secondary' : 'default', 
@@ -25,6 +26,6 @@ function PastEventsFilter(inProps) {
         variant: showPastEvents ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByPastEvents", defaultMessage: "ui.events.filterByPastEvents" }), onClick: handleClick, 
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
-        showPastEvents: showPastEvents, deleteIcon: showPastEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showPastEvents ? handleDeleteClick : undefined }));
+        showPastEvents: showPastEvents, deleteIcon: showPastEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showPastEvents ? handleDeleteClick : undefined }, rest)));
 }
 exports.default = PastEventsFilter;

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);
+    }, []);
+    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.IconButton, Object.assign({ 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.IconButton, Object.assign({ 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.js

@@ -6,15 +6,15 @@ 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 Event_1 = require("../Event");
-const event_1 = require("../../types/event");
 const classes = {
     root: `${constants_1.PREFIX}-skeleton-root`,
     content: `${constants_1.PREFIX}-content`,
     title: `${constants_1.PREFIX}-title`,
-    swiper: `${constants_1.PREFIX}-swiper`,
+    swiperSlide: `${constants_1.PREFIX}-swiper-slide`,
     actions: `${constants_1.PREFIX}-actions`
 };
 const Root = (0, system_1.styled)(Widget_1.default, {
@@ -23,6 +23,6 @@ const Root = (0, system_1.styled)(Widget_1.default, {
     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.swiper }, { 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" }) }))] })));
+    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

@@ -1,4 +1,3 @@
-import 'swiper/css';
 import { WidgetProps } from '../Widget';
 export interface SuggestedEventsWidgetProps extends WidgetProps {
     /**

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

@@ -9,21 +9,25 @@ const react_core_1 = require("@selfcommunity/react-core");
 const utils_1 = require("@selfcommunity/utils");
 const react_1 = require("react");
 const react_intl_1 = require("react-intl");
-require("swiper/css");
+const modules_1 = require("swiper/modules");
 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 event_1 = require("../../types/event");
-const Event_1 = tslib_1.__importDefault(require("../Event"));
 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`,
+    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`
@@ -43,6 +47,8 @@ function SuggestedEventsWidget(inProps) {
     // STATE
     const [eventsData, setEventsData] = (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);
     // CONTEXT
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     (0, react_1.useEffect)(() => {
@@ -56,13 +62,17 @@ function SuggestedEventsWidget(inProps) {
         });
     }, []);
     const handleReachEnd = (0, react_1.useCallback)(() => {
-        if (eventsData.count > eventsData.results.length) {
+        if (eventsData.count > eventsData.results.length && eventsData.next) {
+            setShowSkeleton(true);
             api_services_1.http
                 .request({
                 url: eventsData.next,
                 method: api_services_1.Endpoints.GetEventSuggestedUsers.method
             })
-                .then((res) => console.log('*** res ***', res))
+                .then((res) => {
+                setEventsData(res.data);
+                setShowSkeleton(false);
+            })
                 .catch((error) => {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
             });
@@ -75,6 +85,6 @@ function SuggestedEventsWidget(inProps) {
     if (!eventsData) {
         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.jsx)(react_2.Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto", onReachEnd: handleReachEnd }, { children: eventsData === null || eventsData === void 0 ? void 0 : eventsData.results.map((event, i) => ((0, jsx_runtime_1.jsx)(react_2.SwiperSlide, Object.assign({ className: classes.swiper }, { 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)(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.EVENT_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" }) })) })) }))] })));
+    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, modules: [modules_1.Navigation], onReachEnd: handleReachEnd, onSlideChange: (swiper) => setCurrentItem(swiper.snapIndex), className: classes.swiper }, { children: [(showSkeleton ? [...eventsData.results, undefined] : eventsData.results).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: classes.swiperPrevArrow, type: "prev", currentItem: currentItem, setCurrentItem: setCurrentItem }), (0, jsx_runtime_1.jsx)(Arrow_1.default, { className: 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/index.d.ts

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

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

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SuggestedEventsWidgetSkeleton = void 0;
+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"));

package/lib/esm/components/Event/Event.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
 import { SCEventType } from '@selfcommunity/types';
+import React from 'react';
+import { SCEventTemplateType } from '../../types/event';
 import { WidgetProps } from '../Widget';
 import { EventSkeletonProps } from './Skeleton';
-import { SCEventTemplateType } from '../../types/event';
 export interface EventProps extends WidgetProps {
     /**
      * Event Object

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

@@ -1,21 +1,21 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { styled } from '@mui/material/styles';
 import { Avatar, Box, Button, CardActions, CardContent, CardMedia, Divider, Typography } from '@mui/material';
-import { SCEventLocationType } from '@selfcommunity/types';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
 import { Link, SCRoutes, useSCFetchEvent, useSCRouting } from '@selfcommunity/react-core';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { SCEventLocationType } from '@selfcommunity/types';
 import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
+import { FormattedMessage, useIntl } from 'react-intl';
 import BaseItem from '../../shared/BaseItem';
-import Widget from '../Widget';
-import { PREFIX } from './constants';
-import EventSkeleton from './Skeleton';
 import Calendar from '../../shared/Calendar';
 import EventInfoDetails from '../../shared/EventInfoDetails';
-import User from '../User';
-import EventPartecipantsButton from '../EventPartecipantsButton';
 import { SCEventTemplateType } from '../../types/event';
+import EventPartecipantsButton from '../EventPartecipantsButton';
+import User from '../User';
+import Widget from '../Widget';
+import { PREFIX } from './constants';
+import EventSkeleton from './Skeleton';
 const classes = {
     root: `${PREFIX}-root`,
     detailRoot: `${PREFIX}-detail-root`,
@@ -117,13 +117,13 @@ export default function Event(inProps) {
      */
     let contentObj;
     if (template === SCEventTemplateType.DETAIL) {
-        contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_big, alt: scEvent.name, className: classes.detailImage }), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), !hideEventParticipants && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.detailFirstDivider }), _jsx(EventPartecipantsButton, { event: scEvent, eventId: scEvent.id })] })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
+        contentObj = (_jsxs(DetailRoot, Object.assign({ className: classes.detailRoot }, { children: [_jsxs(Box, Object.assign({ className: classes.detailImageWrapper }, { children: [_jsx(CardMedia, { component: "img", image: scEvent.image_medium, alt: scEvent.name, className: classes.detailImage }), _jsx(Calendar, { day: new Date(scEvent.start_date).getDate() })] })), _jsxs(CardContent, Object.assign({ className: classes.detailContent }, { children: [_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.detailNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h3", className: classes.detailName }, { children: scEvent.name })) })), _jsx(EventInfoDetails, { event: scEvent }), !hideEventPlanner && (_jsx(User, { user: scEvent.managed_by, elevation: 0, secondary: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.myEventsWidget.planner", defaultMessage: "ui.myEventsWidget.planner" }) })), actions: _jsx(_Fragment, {}), className: classes.detailUser })), !hideEventParticipants && (_jsxs(_Fragment, { children: [_jsx(Divider, { className: classes.detailFirstDivider }), _jsx(EventPartecipantsButton, { event: scEvent, eventId: scEvent.id })] })), _jsx(Divider, { className: classes.detailSecondDivider })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.detailActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else if (template === SCEventTemplateType.PREVIEW) {
         contentObj = (_jsxs(PreviewRoot, Object.assign({ className: classes.previewRoot }, { children: [_jsx(Box, Object.assign({ position: "relative", className: classes.previewImageWrapper }, { children: _jsx(CardMedia, { component: "img", height: "100px", image: scEvent.image_medium, alt: scEvent.name, className: classes.previewImage }) })), _jsxs(CardContent, Object.assign({ className: classes.previewContent }, { children: [_jsx(EventInfoDetails, { event: scEvent, hidePrivacyIcon: true, hasLocationInfo: false, beforePrivacyInfo: _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.previewNameWrapper }, { children: _jsx(Typography, Object.assign({ variant: "h5", className: classes.previewName }, { children: scEvent.name })) })) }), !hideEventParticipants && _jsx(EventPartecipantsButton, { event: scEvent })] })), actions !== null && actions !== void 0 ? actions : (_jsx(CardActions, Object.assign({ className: classes.previewActions }, { children: _jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent) }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.event.see", id: "ui.event.see" }) })) })))] })));
     }
     else {
-        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_small, className: classes.snippetAvatar }), primary: _jsxs(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
+        contentObj = (_jsx(SnippetRoot, { elevation: 0, square: true, disableTypography: true, className: classes.snippetRoot, image: _jsx(Avatar, { variant: "square", alt: scEvent.name, src: scEvent.image_medium, className: classes.snippetAvatar }), primary: _jsxs(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, scEvent), className: classes.snippetPrimary }, { children: [_jsx(Typography, Object.assign({ component: "span" }, { children: `${intl.formatDate(scEvent.start_date, {
                             weekday: 'long',
                             month: 'long',
                             day: 'numeric'

package/lib/esm/components/EventSubscribeButton/EventSubscribeButton.js

@@ -130,9 +130,11 @@ export default function EventSubscribeButton(inProps) {
             }
             else {
                 s =
-                    scEvent.subscription_status === SCEventSubscriptionStatusType.NOT_GOING
-                        ? SCEventSubscriptionStatusType.SUBSCRIBED
-                        : SCEventSubscriptionStatusType.NOT_GOING;
+                    scEvent.subscription_status === SCEventSubscriptionStatusType.REQUESTED
+                        ? null
+                        : scEvent.subscription_status === SCEventSubscriptionStatusType.NOT_GOING
+                            ? SCEventSubscriptionStatusType.SUBSCRIBED
+                            : SCEventSubscriptionStatusType.NOT_GOING;
             }
             onSubscribe && onSubscribe(scEvent, s);
         })
@@ -187,5 +189,5 @@ export default function EventSubscribeButton(inProps) {
     }
     return (_jsx(_Fragment, { children: (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) !== SCEventPrivacyType.PRIVATE ||
             ((scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PRIVATE && status && status !== SCEventSubscriptionStatusType.REQUESTED) ? (_jsxs(_Fragment, { children: [_jsx(SelectRoot, Object.assign({ className: classNames(classes.selectRoot, className, { [classes.going]: status && status === SCEventSubscriptionStatusType.GOING }, { [classes.notGoing]: status && status === SCEventSubscriptionStatusType.NOT_GOING }), onClick: handleOpen, endIcon: _jsx(Icon, { children: open ? 'expand_less' : 'expand_more' }), startIcon: status &&
-                        status !== SCEventSubscriptionStatusType.SUBSCRIBED && (_jsx(Icon, { children: status === SCEventSubscriptionStatusType.GOING ? 'circle_checked' : 'circle_closed' })) }, rest, { children: getStatus })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: open, onClose: handleClose }, { children: renderMenuItems() })))] })) : (_jsx(RequestRoot, Object.assign({ className: classNames(classes.requestRoot, className), variant: "outlined", size: "small", loading: scUserContext.user ? scEventsManager.isLoading(scEvent) : null, disabled: status === SCEventSubscriptionStatusType.REQUESTED, onClick: handleToggleAction }, rest, { children: getStatus }))) }));
+                        status !== SCEventSubscriptionStatusType.SUBSCRIBED && (_jsx(Icon, { children: status === SCEventSubscriptionStatusType.GOING ? 'circle_checked' : 'circle_closed' })) }, rest, { children: getStatus })), isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, PaperProps: { className: classes.paper }, open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: open, onClose: handleClose }, { children: renderMenuItems() })))] })) : (_jsx(RequestRoot, Object.assign({ className: classNames(classes.requestRoot, className), variant: "outlined", size: "small", loading: scUserContext.user ? scEventsManager.isLoading(scEvent) : null, onClick: handleToggleAction }, rest, { children: getStatus }))) }));
 }

package/lib/esm/components/Events/Events.js

@@ -193,7 +193,7 @@ export default function Events(inProps) {
                                 variant: showFollowed ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick, 
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
-                                showFollowed: showFollowed, deleteIcon: showFollowed ? _jsx(Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null }) })), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick }) }))] })) }))), _jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !UserUtils.isStaff(scUserContext.user)) ||
+                                showFollowed: showFollowed, deleteIcon: showFollowed ? _jsx(Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null }) })), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== SCEventDateFilterType.ANY }) }))] })) }))), _jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: (onlyStaffEnabled && !UserUtils.isStaff(scUserContext.user)) ||
                         (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user) && general) ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps)), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { actions: _jsx(CreateEventButton, {}) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.onlyStaff", defaultMessage: "ui.events.noEvents.title.onlyStaff" }) }))] })) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, { children: _jsxs(_Fragment, { children: [filteredEvents.map((event) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), filteredEvents.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.itemSkeleton }, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { actions: _jsx(CreateEventButton, Object.assign({ variant: "outlined", color: "primary", size: "small" }, { children: _jsx(FormattedMessage, { id: "ui.events.skeleton.action.add", defaultMessage: "ui.events.skeleton.action.add" }) })) })) }), 'skeleton-item'))] }) })), Boolean(next) && (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleNext, className: classes.showMore }, { children: _jsx(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/esm/components/Events/PastEventsFilter.d.ts

@@ -1,4 +1,5 @@
-export interface PastEventsFilterProps {
+import { ChipProps } from '@mui/material';
+export interface PastEventsFilterProps extends ChipProps {
     showPastEvents: boolean;
     handleClick: () => void;
     handleDeleteClick?: () => void;

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

@@ -1,3 +1,4 @@
+import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Icon } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
@@ -10,11 +11,11 @@ export default function PastEventsFilter(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { showPastEvents, handleClick, handleDeleteClick } = props;
+    const { showPastEvents, handleClick, handleDeleteClick } = props, rest = __rest(props, ["showPastEvents", "handleClick", "handleDeleteClick"]);
     return (_jsx(EventsChipRoot
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
-    , { 
+    , Object.assign({ 
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
         color: showPastEvents ? 'secondary' : 'default', 
@@ -23,5 +24,5 @@ export default function PastEventsFilter(inProps) {
         variant: showPastEvents ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByPastEvents", defaultMessage: "ui.events.filterByPastEvents" }), onClick: handleClick, 
         // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
         // @ts-ignore
-        showPastEvents: showPastEvents, deleteIcon: showPastEvents ? _jsx(Icon, { children: "close" }) : null, onDelete: showPastEvents ? handleDeleteClick : undefined }));
+        showPastEvents: showPastEvents, deleteIcon: showPastEvents ? _jsx(Icon, { children: "close" }) : null, onDelete: showPastEvents ? handleDeleteClick : undefined }, rest)));
 }

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 { Icon, IconButton } 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);
+    }, []);
+    const handleChange = useCallback((type) => {
+        if (type === 'prev') {
+            swiper.slidePrev();
+        }
+        else {
+            swiper.slideNext();
+        }
+        setCurrentItem(swiper.snapIndex);
+    }, [type]);
+    if (type === 'prev') {
+        return (currentItem > 0 && (_jsx(IconButton, Object.assign({ className: className, size: "medium", onClick: () => handleChange('prev') }, { children: _jsx(Icon, { children: "chevron_left" }) }))));
+    }
+    return (currentItem < itemsLength - 1 && (_jsx(IconButton, Object.assign({ className: className, size: "medium", onClick: () => handleChange('next') }, { children: _jsx(Icon, { children: "chevron_right" }) }))));
+}

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

@@ -3,15 +3,15 @@ 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';
-import { EventSkeleton } from '../Event';
-import { SCEventTemplateType } from '../../types/event';
 const classes = {
     root: `${PREFIX}-skeleton-root`,
     content: `${PREFIX}-content`,
     title: `${PREFIX}-title`,
-    swiper: `${PREFIX}-swiper`,
+    swiperSlide: `${PREFIX}-swiper-slide`,
     actions: `${PREFIX}-actions`
 };
 const Root = styled(Widget, {
@@ -20,5 +20,5 @@ const Root = styled(Widget, {
     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.swiper }, { 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" }) }))] })));
+    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

@@ -1,4 +1,3 @@
-import 'swiper/css';
 import { WidgetProps } from '../Widget';
 export interface SuggestedEventsWidgetProps extends WidgetProps {
     /**