@selfcommunity/react-ui 0.7.50-events.55 → 0.7.50-events.57

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/Events/Events.d.ts

@@ -1,10 +1,20 @@
+import { EndpointType } from '@selfcommunity/api-services';
+import React from 'react';
 import { EventProps, EventSkeletonProps } from '../Event';
+export declare const EventsChipRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, "avatar" | "label" | "style" | "className" | "tabIndex" | "color" | "children" | "sx" | "classes" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export interface EventsProps {
     /**
      * Overrides or extends the styles applied to the component.
      * @default null
      */
     className?: string;
+    /**
+     * Event API Endpoint
+     * @default Endpoints.SearchEvents
+     */
+    endpoint: EndpointType;
     /**
      * Feed API Query Params
      * @default [{'limit': 20, 'offset': 0}]
@@ -31,7 +41,7 @@ export interface EventsProps {
      */
     filters?: JSX.Element;
     /** If true, it means that the endpoint fetches all events available
-     * @default false
+     * @default true
      */
     general?: boolean;
     /**

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.EventsChipRoot = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
@@ -18,6 +19,7 @@ const CreateEventButton_1 = tslib_1.__importDefault(require("../CreateEventButto
 const Event_1 = tslib_1.__importStar(require("../Event"));
 const Skeleton_1 = tslib_1.__importDefault(require("../Events/Skeleton"));
 const constants_1 = require("./constants");
+const PastEventsFilter_1 = tslib_1.__importDefault(require("./PastEventsFilter"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     filters: `${constants_1.PREFIX}-filters`,
@@ -39,9 +41,10 @@ const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
     slot: 'Root'
 })(() => ({}));
-const ChipRoot = (0, styles_1.styled)(material_1.Chip, {
+exports.EventsChipRoot = (0, styles_1.styled)(material_1.Chip, {
     name: constants_1.PREFIX,
-    slot: 'ChipRoot'
+    slot: 'EventsChipRoot',
+    shouldForwardProp: (prop) => prop !== 'showFollowed' && prop !== 'showPastEvents'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Events component. Learn about the available props and the CSS API.
@@ -76,19 +79,15 @@ function Events(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    // TODO:
-    /**
-     *  Add as prop API Endpoint
-     * endpoint: EndpointType;
-     */
-    const { endpointQueryParams = { limit: 8, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventSkeletonComponentProps = { elevation: 0, square: true }, showFilters = false, filters, general = true } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "EventComponentProps", "EventSkeletonComponentProps", "showFilters", "filters", "general"]);
+    const { endpoint = api_services_1.Endpoints.SearchEvents, endpointQueryParams = { limit: 8, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventSkeletonComponentProps = { elevation: 0, square: true }, showFilters = false, filters, general = true } = props, rest = tslib_1.__rest(props, ["endpoint", "endpointQueryParams", "className", "EventComponentProps", "EventSkeletonComponentProps", "showFilters", "filters", "general"]);
     // STATE
     const [events, setEvents] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [next, setNext] = (0, react_1.useState)(null);
     const [search, setSearch] = (0, react_1.useState)('');
     const [dateSearch, setDateSearch] = (0, react_1.useState)(options[0].value);
-    const [selected, setSelected] = (0, react_1.useState)(false);
+    const [showFollowed, setShowFollowed] = (0, react_1.useState)(false);
+    const [showPastEvents, setShowPastEvents] = (0, react_1.useState)(false);
     // CONTEXT
     const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
     const scPreferencesContext = (0, react_1.useContext)(react_core_1.SCPreferencesContext);
@@ -100,26 +99,31 @@ function Events(inProps) {
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     // HANDLERS
     const handleChipClick = () => {
-        setSelected(!selected);
+        setShowFollowed(!showFollowed);
     };
     const handleDeleteClick = () => {
-        setSelected(false);
+        setShowFollowed(false);
+    };
+    const handleChipPastClick = () => {
+        setShowPastEvents(!showPastEvents);
+    };
+    const handleDeletePastClick = () => {
+        setShowPastEvents(false);
     };
     /**
      * Fetches events list
      */
     const fetchEvents = () => {
-        let eventService;
-        if (general) {
-            eventService = api_services_1.EventService.searchEvents(Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (selected && { follows: selected })));
-        }
-        else {
-            eventService = api_services_1.EventService.getUserEvents(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), { subscription_status: types_1.SCEventSubscriptionStatusType.GOING }), (search !== '' && { search: search })));
-        }
-        eventService
+        return api_services_1.http
+            .request({
+            url: endpoint.url({}),
+            method: endpoint.method,
+            params: Object.assign(Object.assign({}, endpointQueryParams), (general
+                ? Object.assign(Object.assign(Object.assign(Object.assign({}, (search !== '' && { search: search })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { past: showPastEvents })) : Object.assign(Object.assign({ subscription_status: types_1.SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents })), (search !== '' && { search: search }))))
+        })
             .then((res) => {
-            setEvents(res.results);
-            setNext(res.next);
+            setEvents(res.data.results);
+            setNext(res.data.next);
             setLoading(false);
         })
             .catch((error) => {
@@ -136,7 +140,7 @@ function Events(inProps) {
         else {
             fetchEvents();
         }
-    }, [contentAvailability, authUserId, search, dateSearch, selected]);
+    }, [contentAvailability, authUserId, search, dateSearch, showFollowed, showPastEvents]);
     const handleNext = (0, react_1.useMemo)(() => () => {
         if (!next) {
             return;
@@ -180,19 +184,19 @@ function Events(inProps) {
      * Renders events list
      */
     const filteredEvents = (0, utils_1.sortByAttr)(getFilteredEvents(), 'order');
-    const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { size: 'small', fullWidth: true, value: search, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsx)(ChipRoot
+    const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? ((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.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { size: 'small', fullWidth: true, value: search, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: showPastEvents, size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                             // @ts-ignore
                             , { 
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
-                                color: selected ? 'secondary' : 'default', 
+                                color: showFollowed ? 'secondary' : 'default', 
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
-                                variant: selected ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick, 
+                                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
-                                selected: selected, deleteIcon: selected ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: selected ? handleDeleteClick : null }) }))] })) }))), (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 }) }))] })) }))), (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

@@ -0,0 +1,6 @@
+export interface PastEventsFilterProps {
+    showPastEvents: boolean;
+    handleClick: () => void;
+    handleDeleteClick?: () => void;
+}
+export default function PastEventsFilter(inProps: PastEventsFilterProps): JSX.Element;

package/lib/cjs/components/Events/PastEventsFilter.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_intl_1 = require("react-intl");
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const Events_1 = require("./Events");
+function PastEventsFilter(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { showPastEvents, handleClick, handleDeleteClick } = props;
+    return ((0, jsx_runtime_1.jsx)(Events_1.EventsChipRoot
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+    // @ts-ignore
+    , { 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        color: showPastEvents ? 'secondary' : 'default', 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        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 }));
+}
+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, 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/Events/Events.d.ts

@@ -1,10 +1,20 @@
+import { EndpointType } from '@selfcommunity/api-services';
+import React from 'react';
 import { EventProps, EventSkeletonProps } from '../Event';
+export declare const EventsChipRoot: import("@emotion/styled").StyledComponent<import("@mui/material").ChipOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+}, "avatar" | "label" | "style" | "className" | "tabIndex" | "color" | "children" | "sx" | "classes" | "variant" | "disabled" | "size" | "icon" | "clickable" | "deleteIcon" | "onDelete" | "skipFocusWhenDisabled"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export interface EventsProps {
     /**
      * Overrides or extends the styles applied to the component.
      * @default null
      */
     className?: string;
+    /**
+     * Event API Endpoint
+     * @default Endpoints.SearchEvents
+     */
+    endpoint: EndpointType;
     /**
      * Feed API Query Params
      * @default [{'limit': 20, 'offset': 0}]
@@ -31,7 +41,7 @@ export interface EventsProps {
      */
     filters?: JSX.Element;
     /** If true, it means that the endpoint fetches all events available
-     * @default false
+     * @default true
      */
     general?: boolean;
     /**