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

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Box, Button, Chip, FormControl, Grid, Icon, InputLabel, MenuItem, Radio, Select, TextField, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useThemeProps } from '@mui/system';
-import { Endpoints, EventService, http } from '@selfcommunity/api-services';
+import { Endpoints, http } from '@selfcommunity/api-services';
 import { SCPreferences, SCPreferencesContext, SCUserContext, UserUtils } from '@selfcommunity/react-core';
 import { SCEventDateFilterType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
 import { Logger, sortByAttr } from '@selfcommunity/utils';
@@ -16,6 +16,7 @@ import CreateEventButton from '../CreateEventButton';
 import Event, { EventSkeleton } from '../Event';
 import Skeleton from '../Events/Skeleton';
 import { PREFIX } from './constants';
+import PastEventsFilter from './PastEventsFilter';
 const classes = {
     root: `${PREFIX}-root`,
     filters: `${PREFIX}-filters`,
@@ -37,9 +38,10 @@ const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));
-const ChipRoot = styled(Chip, {
+export const EventsChipRoot = styled(Chip, {
     name: 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.
@@ -74,19 +76,15 @@ export default function Events(inProps) {
         props: inProps,
         name: PREFIX
     });
-    // TODO:
-    /**
-     *  Add as prop API Endpoint
-     * endpoint: EndpointType;
-     */
-    const { endpointQueryParams = { limit: 8, offset: DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventSkeletonComponentProps = { elevation: 0, square: true }, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpointQueryParams", "className", "EventComponentProps", "EventSkeletonComponentProps", "showFilters", "filters", "general"]);
+    const { endpoint = Endpoints.SearchEvents, endpointQueryParams = { limit: 8, offset: DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventSkeletonComponentProps = { elevation: 0, square: true }, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpoint", "endpointQueryParams", "className", "EventComponentProps", "EventSkeletonComponentProps", "showFilters", "filters", "general"]);
     // STATE
     const [events, setEvents] = useState([]);
     const [loading, setLoading] = useState(true);
     const [next, setNext] = useState(null);
     const [search, setSearch] = useState('');
     const [dateSearch, setDateSearch] = useState(options[0].value);
-    const [selected, setSelected] = useState(false);
+    const [showFollowed, setShowFollowed] = useState(false);
+    const [showPastEvents, setShowPastEvents] = useState(false);
     // CONTEXT
     const scUserContext = useContext(SCUserContext);
     const scPreferencesContext = useContext(SCPreferencesContext);
@@ -98,26 +96,31 @@ export default 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 = EventService.searchEvents(Object.assign(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })), (dateSearch !== SCEventDateFilterType.ANY && { date_filter: dateSearch })), (selected && { follows: selected })));
-        }
-        else {
-            eventService = EventService.getUserEvents(Object.assign(Object.assign(Object.assign({}, endpointQueryParams), { subscription_status: SCEventSubscriptionStatusType.GOING }), (search !== '' && { search: search })));
-        }
-        eventService
+        return 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 !== SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { past: showPastEvents })) : Object.assign(Object.assign({ subscription_status: 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) => {
@@ -134,7 +137,7 @@ export default function Events(inProps) {
         else {
             fetchEvents();
         }
-    }, [contentAvailability, authUserId, search, dateSearch, selected]);
+    }, [contentAvailability, authUserId, search, dateSearch, showFollowed, showPastEvents]);
     const handleNext = useMemo(() => () => {
         if (!next) {
             return;
@@ -178,19 +181,19 @@ export default function Events(inProps) {
      * Renders events list
      */
     const filteredEvents = sortByAttr(getFilteredEvents(), 'order');
-    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: _jsx(TextField, { size: 'small', fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(InputLabel, { children: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), _jsx(Select, Object.assign({ size: 'small', label: _jsx(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) => (_jsxs(MenuItem, Object.assign({ value: option.value }, { children: [_jsx(Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsx(ChipRoot
+    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick }) }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: _jsx(TextField, { size: 'small', fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsxs(FormControl, Object.assign({ fullWidth: true }, { children: [_jsx(InputLabel, { children: _jsx(FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), _jsx(Select, Object.assign({ disabled: showPastEvents, size: 'small', label: _jsx(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) => (_jsxs(MenuItem, Object.assign({ value: option.value }, { children: [_jsx(Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(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: _jsx(FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick, 
+                                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
-                                selected: selected, deleteIcon: selected ? _jsx(Icon, { children: "close" }) : null, onDelete: selected ? handleDeleteClick : null }) }))] })) }))), _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 }) }))] })) }))), _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

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

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { useThemeProps } from '@mui/system';
+import { PREFIX } from './constants';
+import { EventsChipRoot } from './Events';
+export default function PastEventsFilter(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { showPastEvents, handleClick, handleDeleteClick } = props;
+    return (_jsx(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: _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 }));
+}

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 {
     /**

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

@@ -7,21 +7,25 @@ import { Link, SCRoutes, useSCRouting } from '@selfcommunity/react-core';
 import { Logger } from '@selfcommunity/utils';
 import { useCallback, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import 'swiper/css';
+import { Navigation } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
+import { SCEventTemplateType } from '../../types/event';
+import Event from '../Event';
 import Widget from '../Widget';
+import Arrow from './Arrow';
 import { PREFIX } from './constants';
 import Skeleton from './Skeleton';
-import { SCEventTemplateType } from '../../types/event';
-import Event from '../Event';
 const classes = {
     root: `${PREFIX}-root`,
     content: `${PREFIX}-content`,
     title: `${PREFIX}-title`,
     swiper: `${PREFIX}-swiper`,
+    swiperSlide: `${PREFIX}-swiper-slide`,
+    swiperPrevArrow: `${PREFIX}-swiper-prev-arrow`,
+    swiperNextArrow: `${PREFIX}-swiper-next-arrow`,
     event: `${PREFIX}-event`,
     actions: `${PREFIX}-actions`,
     actionButton: `${PREFIX}-action-button`
@@ -41,6 +45,8 @@ export default function SuggestedEventsWidget(inProps) {
     // STATE
     const [eventsData, setEventsData] = useState(null);
     const [loading, setLoading] = useState(true);
+    const [showSkeleton, setShowSkeleton] = useState(false);
+    const [currentItem, setCurrentItem] = useState(0);
     // CONTEXT
     const scRoutingContext = useSCRouting();
     useEffect(() => {
@@ -54,13 +60,17 @@ export default function SuggestedEventsWidget(inProps) {
         });
     }, []);
     const handleReachEnd = useCallback(() => {
-        if (eventsData.count > eventsData.results.length) {
+        if (eventsData.count > eventsData.results.length && eventsData.next) {
+            setShowSkeleton(true);
             http
                 .request({
                 url: eventsData.next,
                 method: Endpoints.GetEventSuggestedUsers.method
             })
-                .then((res) => console.log('*** res ***', res))
+                .then((res) => {
+                setEventsData(res.data);
+                setShowSkeleton(false);
+            })
                 .catch((error) => {
                 Logger.error(SCOPE_SC_UI, error);
             });
@@ -73,5 +83,5 @@ export default function SuggestedEventsWidget(inProps) {
     if (!eventsData) {
         return _jsx(HiddenPlaceholder, {});
     }
-    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.title", defaultMessage: "ui.suggestedEventsWidget.title" }) })), _jsx(Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto", onReachEnd: handleReachEnd }, { children: eventsData === null || eventsData === void 0 ? void 0 : eventsData.results.map((event, i) => (_jsx(SwiperSlide, Object.assign({ className: classes.swiper }, { children: _jsx(Event, { event: event, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.event }) }), i))) }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENT_ROUTE_NAME, {}), className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.showAll", defaultMessage: "ui.suggestedEventsWidget.showAll" }) })) })) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classes.content }, { children: [_jsx(Typography, Object.assign({ variant: "h5", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.title", defaultMessage: "ui.suggestedEventsWidget.title" }) })), _jsxs(Swiper, Object.assign({ spaceBetween: 8, slidesPerView: "auto", grabCursor: true, modules: [Navigation], onReachEnd: handleReachEnd, className: classes.swiper }, { children: [(showSkeleton ? [...eventsData.results, undefined] : eventsData.results).map((event, i) => (_jsx(SwiperSlide, Object.assign({ className: classes.swiperSlide }, { children: _jsx(Event, { event: event, template: SCEventTemplateType.PREVIEW, actions: _jsx(_Fragment, {}), variant: "outlined", className: classes.event }) }), i))), _jsx(Arrow, { className: classes.swiperPrevArrow, type: "prev", currentItem: currentItem, setCurrentItem: setCurrentItem }), _jsx(Arrow, { className: classes.swiperNextArrow, type: "next", currentItem: currentItem, setCurrentItem: setCurrentItem })] }))] })), _jsx(CardActions, Object.assign({ className: classes.actions }, { children: _jsx(Button, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_SUGGESTED_ROUTE_NAME, {}), className: classes.actionButton }, { children: _jsx(Typography, Object.assign({ variant: "caption" }, { children: _jsx(FormattedMessage, { id: "ui.suggestedEventsWidget.showAll", defaultMessage: "ui.suggestedEventsWidget.showAll" }) })) })) }))] })));
 }

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

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