@selfcommunity/react-ui 0.11.0-mui7.29 → 0.11.0-react-17.0.1.3

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

@@ -43,10 +43,10 @@ const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));
-const EventsChipRoot = styled(Chip, {
+export const EventsChipRoot = styled(Chip, {
     name: PREFIX,
     slot: 'EventsChipRoot',
-    shouldForwardProp: (prop) => prop !== 'showFollowed'
+    shouldForwardProp: (prop) => prop !== 'showFollowed' && prop !== 'showPastEvents' && prop !== 'showOngoingEvents'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Events component. Learn about the available props and the CSS API.
@@ -220,24 +220,18 @@ export default function Events(inProps) {
     /**
      * Renders events list
      */
-    const content = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, width: "100%", className: classes.filters, gap: 2 }, { children: filters ? (filters) : showUserEvents ? (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(EventsChipRoot, { color: showMyEvents ? 'secondary' : 'default', variant: showMyEvents ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByCreatedByMe", defaultMessage: "ui.events.filterByCreatedByMe" }), onClick: () => setShowMyEvents(!showMyEvents), 
+    const content = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : showUserEvents ? (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot, { color: showMyEvents ? 'secondary' : 'default', variant: showMyEvents ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByCreatedByMe", defaultMessage: "ui.events.filterByCreatedByMe" }), onClick: () => setShowMyEvents(!showMyEvents), 
                                 // @ts-expect-error this is needed to use showFollowed into SCEvents
-                                showFollowed: showMyEvents, deleteIcon: showMyEvents ? _jsx(Icon, { children: "close" }) : null, onDelete: showMyEvents ? () => setShowMyEvents(false) : null, disabled: loading }) })), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: loading }) })), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(LocationEventsFilter, { value: location, disabled: loading, handleOnChange: handleOnChangeLocation }) }))] })) : general ? (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, md: 3 } }, { children: _jsx(TextField, { className: classes.search, size: "small", fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+                                showFollowed: showMyEvents, deleteIcon: showMyEvents ? _jsx(Icon, { children: "close" }) : null, onDelete: showMyEvents ? () => setShowMyEvents(false) : null, disabled: loading }) })), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: loading }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: _jsx(LocationEventsFilter, { value: location, disabled: loading, handleOnChange: handleOnChangeLocation }) }))] })) : general ? (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 3 }, { children: _jsx(TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: _jsx(FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
                                     e.preventDefault();
                                     if (e.key === 'Enter') {
                                         fetchEvents();
                                     }
-                                }, slotProps: {
-                                    input: {
-                                        endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchEvents(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchEvents(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading })) })))
-                                    }
-                                } }) })), _jsx(Grid, Object.assign({ size: { 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: showOngoingEvents || loading, 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", slotProps: {
-                                                        input: {
-                                                            'aria-label': `${option.label}`
-                                                        }
-                                                    } }), option.label] }), option.value))) }))] })) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 2 } }, { children: _jsx(LocationEventsFilter, { value: location, disabled: loading, handleOnChange: handleOnChangeLocation }) })), authUserId && (_jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(EventsChipRoot, { color: showFollowed ? 'secondary' : 'default', variant: showFollowed ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick, 
+                                }, InputProps: {
+                                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchEvents(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchEvents(), endIcon: _jsx(Icon, { children: "search" }), 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: showOngoingEvents || loading, 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(LocationEventsFilter, { value: location, disabled: loading, handleOnChange: handleOnChangeLocation }) })), authUserId && (_jsx(Grid, Object.assign({ item: true }, { children: _jsx(EventsChipRoot, { color: showFollowed ? 'secondary' : 'default', variant: showFollowed ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByFollowedInterest", defaultMessage: "ui.events.filterByFollowedInterest" }), onClick: handleChipClick, 
                                 // @ts-expect-error this is needed to use showFollowed into SCEvents
-                                showFollowed: showFollowed, deleteIcon: showFollowed ? _jsx(Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading }) }))), _jsx(Grid, Object.assign({ size: "grow" }, { children: _jsx(OngoingEventsFilter, { showOngoingEvents: showOngoingEvents, handleClick: handleChipOngoingClick, handleDeleteClick: handleDeleteOngoingClick, disabled: dateSearch !== SCEventDateFilterType.ALL || loading }) }))] })) : null }))), _jsx(_Fragment, { children: loading ? (_jsx(Skeleton, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }))) : (_jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: general ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user)) || !onlyStaffEnabled ? (_jsx(CreateEventButton, Object.assign({}, CreateEventButtonProps))) : null })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : showUserEvents ? (_jsx(_Fragment, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.personal", defaultMessage: "ui.events.noEvents.title.personal" }) })) })) : null }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [events.map((event) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classes.item }, GridItemComponentProps, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && events.length % 2 !== 0 && (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classes.itemSkeleton }, GridItemComponentProps, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, Object.assign({ variant: "outlined", color: "primary", size: "small" }, CreateEventButtonProps, { 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" }) })))] })) })) })] }));
+                                showFollowed: showFollowed, deleteIcon: showFollowed ? _jsx(Icon, { children: "close" }) : null, onDelete: showFollowed ? handleDeleteClick : null, disabled: loading }) }))), _jsx(Grid, Object.assign({ item: true }, { children: _jsx(OngoingEventsFilter, { showOngoingEvents: showOngoingEvents, handleClick: handleChipOngoingClick, handleDeleteClick: handleDeleteOngoingClick, disabled: dateSearch !== SCEventDateFilterType.ALL || loading }) }))] })) : null }))), _jsx(_Fragment, { children: loading ? (_jsx(Skeleton, Object.assign({}, EventsSkeletonComponentProps, { EventSkeletonProps: EventSkeletonComponentProps }))) : (_jsx(_Fragment, { children: !events.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: general ? (_jsxs(_Fragment, { children: [_jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user)) || !onlyStaffEnabled ? (_jsx(CreateEventButton, Object.assign({}, CreateEventButtonProps))) : null })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title", defaultMessage: "ui.events.noEvents.title" }) }))] })) : showUserEvents ? (_jsx(_Fragment, { children: _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.personal", defaultMessage: "ui.events.noEvents.title.personal" }) })) })) : null }))) : (_jsxs(_Fragment, { children: [_jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.events }, GridContainerComponentProps, { children: _jsxs(_Fragment, { children: [events.map((event) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.item }, GridItemComponentProps, { children: _jsx(Event, Object.assign({ event: event, eventId: event.id }, EventComponentProps)) }), event.id))), authUserId && events.length % 2 !== 0 && (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6, className: classes.itemSkeleton }, GridItemComponentProps, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonComponentProps, { skeletonsAnimation: false, actions: _jsx(CreateEventButton, Object.assign({ variant: "outlined", color: "primary", size: "small" }, CreateEventButtonProps, { 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/LocationEventsFilter.js

@@ -36,9 +36,5 @@ export default function LocationEventsFilter(inProps) {
     if (autoHide) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), fullWidth: true }, { children: [_jsx(InputLabel, { children: _jsx(FormattedMessage, { id: "ui.events.filterByLocation", defaultMessage: "ui.events.filterByLocation" }) }), _jsx(Select, Object.assign({ disabled: disabled, size: "small", label: _jsx(FormattedMessage, { id: "ui.events.location", defaultMessage: "ui.events.location" }), value: value, onChange: handleOnChange, renderValue: (selected) => locationOptions.find((option) => option.value === selected).label }, { children: locationOptions.map((option) => (_jsxs(MenuItem, Object.assign({ value: option.value }, { children: [_jsx(Radio, { checked: value === option.value, value: option.value, name: "radio-button-select", slotProps: {
-                                input: {
-                                    'aria-label': `${option.label}`
-                                }
-                            } }), option.label] }), option.value))) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), fullWidth: true }, { children: [_jsx(InputLabel, { children: _jsx(FormattedMessage, { id: "ui.events.filterByLocation", defaultMessage: "ui.events.filterByLocation" }) }), _jsx(Select, Object.assign({ disabled: disabled, size: 'small', label: _jsx(FormattedMessage, { id: "ui.events.location", defaultMessage: "ui.events.location" }), value: value, onChange: handleOnChange, renderValue: (selected) => locationOptions.find((option) => option.value === selected).label }, { children: locationOptions.map((option) => (_jsxs(MenuItem, Object.assign({ value: option.value }, { children: [_jsx(Radio, { checked: value === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })));
 }

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

@@ -1,13 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Chip, Icon, styled, useThemeProps } from '@mui/material';
+import { Icon, useThemeProps } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { PREFIX } from './constants';
-const EventsChipRoot = styled(Chip, {
-    name: PREFIX,
-    slot: 'EventsChipRoot',
-    shouldForwardProp: (prop) => prop !== 'showOngoingEvents'
-})(() => ({}));
+import { EventsChipRoot } from './Events';
 export default function OngoingEventsFilter(inProps) {
     // PROPS
     const props = useThemeProps({

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

@@ -1,13 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Chip, Icon, styled, useThemeProps } from '@mui/material';
+import { Icon, useThemeProps } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
 import { PREFIX } from './constants';
-const EventsChipRoot = styled(Chip, {
-    name: PREFIX,
-    slot: 'EventsChipRoot',
-    shouldForwardProp: (prop) => prop !== 'showPastEvents'
-})(() => ({}));
+import { EventsChipRoot } from './Events';
 export default function PastEventsFilter(inProps) {
     // PROPS
     const props = useThemeProps({

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

@@ -36,5 +36,5 @@ const Root = styled(Box, {
  */
 export default function EventsSkeleton(inProps) {
     const { className, EventSkeletonProps = {}, eventsNumber = 8, GridContainerComponentProps = {}, GridItemComponentProps = {} } = inProps, rest = __rest(inProps, ["className", "EventSkeletonProps", "eventsNumber", "GridContainerComponentProps", "GridItemComponentProps"]);
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, width: "100%", spacing: { xs: 3 }, className: classes.events }, GridContainerComponentProps, { children: [...Array(eventsNumber)].map((_event, index) => (_jsx(Grid, Object.assign({ size: { xs: 12, md: 6 } }, GridItemComponentProps, { className: classes.item }, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonProps)) }), index))) })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 3 }, className: classes.events }, GridContainerComponentProps, { children: [...Array(eventsNumber)].map((event, index) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 12, md: 6 }, GridItemComponentProps, { className: classes.item }, { children: _jsx(EventSkeleton, Object.assign({}, EventSkeletonProps)) }), index))) })) })));
 }

package/lib/esm/components/Feed/Feed.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// @ts-nocheck
 import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Link, SCCache, SCPreferences, SCPreferencesContext, SCUserContext, useIsComponentMountedRef, usePreviousValue, useSCFetchFeed } from '@selfcommunity/react-core';
-import { styled, useTheme, Box, Button, CardContent, Grid, Typography, useMediaQuery } from '@mui/material';
+import { styled, useTheme, Box, Button, CardContent, Grid, Hidden, Typography, useMediaQuery } from '@mui/material';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { GenericSkeleton } from '../Skeleton';
 import CustomAdv from '../CustomAdv';
@@ -89,11 +90,11 @@ const Feed = (inProps, ref) => {
     const scUserContext = useContext(SCUserContext);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
-    const limit = +useMemo(() => endpointQueryParams.limit || DEFAULT_PAGINATION_LIMIT, [endpointQueryParams]);
+    const limit = useMemo(() => endpointQueryParams.limit || DEFAULT_PAGINATION_LIMIT, [endpointQueryParams]);
     const offset = useMemo(() => {
         if (prefetchedData) {
-            const currentOffset = +getQueryStringParameter(prefetchedData.previous, 'offset') || 0;
-            return prefetchedData.previous ? currentOffset + limit : 0;
+            const currentOffset = getQueryStringParameter(prefetchedData.previous, 'offset') || 0;
+            return prefetchedData.previous ? parseInt(currentOffset) + limit : 0;
         }
         return endpointQueryParams.offset || 0;
     }, [endpointQueryParams, prefetchedData]);
@@ -287,10 +288,10 @@ const Feed = (inProps, ref) => {
     }, [feedDataObject.componentLoaded, setHeadData, setFeedDataLeft, setFeedDataRight]);
     /**
      * Callback subscribe events
-     * @param _msg
+     * @param msg
      * @param data
      */
-    const subscriber = (_msg, data) => {
+    const subscriber = (msg, data) => {
         if (data.refresh) {
             refresh();
         }
@@ -397,8 +398,8 @@ const Feed = (inProps, ref) => {
             setHeadData([...[data], ...headData]);
             if (syncPagination) {
                 // Adding an element, re-sync next and previous of feedDataObject
-                const nextOffset = (parseInt(getQueryStringParameter(feedDataObject.next, 'offset')) || feedDataObject.results.length - 1) + 1;
-                const previousOffset = (parseInt(getQueryStringParameter(feedDataObject.previous, 'offset')) || +offset) + 1;
+                const nextOffset = parseInt(getQueryStringParameter(feedDataObject.next, 'offset') || feedDataObject.results.length - 1) + 1;
+                const previousOffset = parseInt(getQueryStringParameter(feedDataObject.previous, 'offset') || offset) + 1;
                 feedDataObject.updateState({
                     previous: updateQueryStringParameter(feedDataObject.previous, 'offset', previousOffset),
                     next: updateQueryStringParameter(feedDataObject.next, 'offset', nextOffset),
@@ -425,8 +426,8 @@ const Feed = (inProps, ref) => {
         return (_jsx(VirtualScrollChild, Object.assign({ onHeightChange: onItemHeightChange }, { children: item.type === 'widget' ? (_jsx(item.component, Object.assign({ id: `${WIDGET_PREFIX_KEY}${item.position}` }, item.componentProps, (item.publishEvents && { publicationChannel: id }), savedState, { onStateChange: onItemStateChange, onHeightChange: onItemHeightChange }))) : (_jsx(ItemComponent, Object.assign({ id: `item_${itemIdGenerator(item)}` }, itemPropsGenerator(scUserContext.user, item), ItemProps, { sx: { width: '100%' } }, savedState, { onStateChange: onItemStateChange, onHeightChange: onItemHeightChange }))) })));
     }, [authUserId]);
     if (feedDataObject.isLoadingNext && !feedDataLeft.length) {
-        return (_jsx(FeedSkeleton, { children: [...Array(3)].map((_v, i) => (_jsx(ItemSkeleton, Object.assign({}, ItemSkeletonProps), i))) }));
+        return (_jsx(FeedSkeleton, { children: [...Array(3)].map((v, i) => (_jsx(ItemSkeleton, Object.assign({}, ItemSkeletonProps), i))) }));
     }
-    return (_jsxs(Root, Object.assign({ container: true, width: "100%", spacing: 2, id: id, className: classNames(classes.root, className) }, { children: [advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(SCCustomAdvPosition.POSITION_BELOW_TOPBAR) ? (_jsx(Grid, Object.assign({ size: 12 }, { children: _jsx(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_BELOW_TOPBAR }, CustomAdvProps)) }))) : null, _jsx(Grid, Object.assign({ size: { xs: 12, md: 7 } }, { children: _jsxs(InfiniteScroll, Object.assign({ ref: containerRef, className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: _jsx(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: _jsx(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: "90%", endMessage: _jsxs(Box, Object.assign({ className: classes.end }, { children: [_jsx(Widget, Object.assign({ className: classes.endMessage }, { children: _jsx(CardContent, { children: endMessage }) })), FooterComponent ? _jsx(FooterComponent, Object.assign({}, FooterComponentProps)) : null] })), refreshFunction: refresh, pullDownToRefresh: true, pullDownToRefreshThreshold: 1000, pullDownToRefreshContent: null, releaseToRefreshContent: _jsx(Button, Object.assign({ color: "secondary", variant: "contained", className: classes.refresh }, { children: refreshMessage })), style: { overflow: 'visible' } }, (scrollableTargetId && { scrollableTarget: scrollableTargetId }), { children: [renderHeaderComponent(), feedDataObject.count === 0 && emptyFeedPlaceholder && emptyFeedPlaceholder, _jsx(VirtualizedScroller, Object.assign({ className: classes.leftItems, items: feedDataLeft, itemComponent: InnerItem, onMount: onScrollerMount, onScrollerStateChange: onScrollerStateChange, getItemId: getScrollItemId, preserveScrollPosition: true, preserveScrollPositionOnPrependItems: true, cacheScrollStateKey: SCCache.getVirtualizedScrollStateCacheKey(id), cacheScrollerPositionKey: SCCache.getFeedSPCacheKey(id), cacheStrategy: cacheStrategy }, (scrollableTargetId && { getScrollableContainer: () => document.getElementById(scrollableTargetId) }), VirtualizedScrollerProps))] })) })), feedDataRight.length > 0 && !hideAdvs && (_jsx(Grid, Object.assign({ sx: { display: { xs: 'none', sm: 'block' } }, size: { xs: 12, md: 5 } }, { children: _jsx(StickyBoxComp, Object.assign({ className: classes.right }, FeedSidebarProps, { children: _jsx(React.Suspense, Object.assign({ fallback: _jsx(GenericSkeleton, {}) }, { children: feedDataRight.map((d, i) => (_jsx(d.component, Object.assign({}, d.componentProps), i))) })) })) })))] })));
+    return (_jsxs(Root, Object.assign({ container: true, spacing: 2, id: id, className: classNames(classes.root, className) }, { children: [advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(SCCustomAdvPosition.POSITION_BELOW_TOPBAR) ? (_jsx(Grid, Object.assign({ item: true, xs: 12 }, { children: _jsx(CustomAdv, Object.assign({ position: SCCustomAdvPosition.POSITION_BELOW_TOPBAR }, CustomAdvProps)) }))) : null, _jsx(Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: _jsxs(InfiniteScroll, Object.assign({ ref: containerRef, className: classes.left, dataLength: feedDataLeft.length, next: getNextPage, previous: getPreviousPage, hasMoreNext: Boolean(feedDataObject.next), hasMorePrevious: Boolean(feedDataObject.previous), header: PreviousPageLink, footer: NextPageLink, loaderNext: _jsx(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: _jsx(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: '90%', endMessage: _jsxs(Box, Object.assign({ className: classes.end }, { children: [_jsx(Widget, Object.assign({ className: classes.endMessage }, { children: _jsx(CardContent, { children: endMessage }) })), FooterComponent ? _jsx(FooterComponent, Object.assign({}, FooterComponentProps)) : null] })), refreshFunction: refresh, pullDownToRefresh: true, pullDownToRefreshThreshold: 1000, pullDownToRefreshContent: null, releaseToRefreshContent: _jsx(Button, Object.assign({ color: "secondary", variant: "contained", className: classes.refresh }, { children: refreshMessage })), style: { overflow: 'visible' } }, (scrollableTargetId && { scrollableTarget: scrollableTargetId }), { children: [renderHeaderComponent(), feedDataObject.count === 0 && emptyFeedPlaceholder && emptyFeedPlaceholder, _jsx(VirtualizedScroller, Object.assign({ className: classes.leftItems, items: feedDataLeft, itemComponent: InnerItem, onMount: onScrollerMount, onScrollerStateChange: onScrollerStateChange, getItemId: getScrollItemId, preserveScrollPosition: true, preserveScrollPositionOnPrependItems: true, cacheScrollStateKey: SCCache.getVirtualizedScrollStateCacheKey(id), cacheScrollerPositionKey: SCCache.getFeedSPCacheKey(id), cacheStrategy: cacheStrategy }, (scrollableTargetId && { getScrollableContainer: () => document.getElementById(scrollableTargetId) }), VirtualizedScrollerProps))] })) })), feedDataRight.length > 0 && !hideAdvs && (_jsx(Hidden, Object.assign({ smDown: true }, { children: _jsx(Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: _jsx(StickyBoxComp, Object.assign({ className: classes.right }, FeedSidebarProps, { children: _jsx(React.Suspense, Object.assign({ fallback: _jsx(GenericSkeleton, {}) }, { children: feedDataRight.map((d, i) => (_jsx(d.component, Object.assign({}, d.componentProps), i))) })) })) })) })))] })));
 };
 export default forwardRef(Feed);

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { styled, Grid } from '@mui/material';
+import { styled, Grid, Hidden } from '@mui/material';
 import { GenericSkeleton } from '../Skeleton';
 import classNames from 'classnames';
 import { PREFIX } from './constants';
@@ -38,5 +38,5 @@ const Root = styled(Grid, {
 export default function FeedSkeleton(props) {
     // PROPS
     const { children = (_jsxs(React.Fragment, { children: [_jsx(GenericSkeleton, { sx: { mb: 2 } }), _jsx(GenericSkeleton, { sx: { mb: 2 } }), _jsx(GenericSkeleton, { sx: { mb: 2 } })] })), sidebar = (_jsxs(React.Fragment, { children: [_jsx(GenericSkeleton, { sx: { mb: 2 } }), _jsx(GenericSkeleton, { sx: { mb: 2 } })] })), className } = props;
-    return (_jsxs(Root, Object.assign({ container: true, width: "100%", spacing: 2, className: classNames(classes.root, className) }, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, md: 7 } }, { children: _jsx("div", Object.assign({ className: classes.left }, { children: children })) })), _jsx(Grid, Object.assign({ sx: { display: { xs: 'none', sm: 'block' } }, size: { xs: 12, md: 5 } }, { children: _jsx("div", Object.assign({ className: classes.right }, { children: sidebar })) }))] })));
+    return (_jsxs(Root, Object.assign({ container: true, spacing: 2, className: classNames(classes.root, className) }, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: _jsx("div", Object.assign({ className: classes.left }, { children: children })) })), _jsx(Hidden, Object.assign({ smDown: true }, { children: _jsx(Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: _jsx("div", Object.assign({ className: classes.right }, { children: sidebar })) })) }))] })));
 }

package/lib/esm/components/FeedObject/Actions/Actions.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Grid, styled } from '@mui/material';
+import { styled } from '@mui/material';
+import { Grid } from '@mui/material';
 import Vote from './Vote';
 import Comment from './Comment';
 import Share from './Share';
@@ -40,5 +41,5 @@ export default function Actions(props) {
      * Renders action section
      */
     const columnWidth = getColumnWidth();
-    return (_jsxs(Root, Object.assign({ container: true, width: "100%", className: classNames(classes.root, className) }, { children: [!hideVoteAction && (_jsx(Grid, Object.assign({ size: columnWidth, className: classes.action }, { children: _jsx(Vote, Object.assign({ feedObjectId: feedObjectId || obj.id, feedObject: obj, feedObjectType: feedObjectType || obj.type }, VoteActionProps)) }))), !hideCommentAction && (_jsx(Grid, Object.assign({ size: columnWidth, className: classes.action }, { children: _jsx(Comment, Object.assign({ feedObject: obj, feedObjectType: feedObjectType, feedObjectTemplate: feedObjectTemplate, onCommentAction: handleExpandActivities }, CommentActionProps)) }))), !hideShareAction && (_jsx(Grid, Object.assign({ size: columnWidth, className: classes.action }, { children: _jsx(Share, Object.assign({ feedObject: obj, feedObjectType: feedObjectType, id: feedObjectId }, ShareActionProps)) })))] })));
+    return (_jsxs(Root, Object.assign({ container: true, className: classNames(classes.root, className) }, { children: [!hideVoteAction && (_jsx(Grid, Object.assign({ item: true, xs: columnWidth, className: classes.action }, { children: _jsx(Vote, Object.assign({ feedObjectId: feedObjectId || obj.id, feedObject: obj, feedObjectType: feedObjectType || obj.type }, VoteActionProps)) }))), !hideCommentAction && (_jsx(Grid, Object.assign({ item: true, xs: columnWidth, className: classes.action }, { children: _jsx(Comment, Object.assign({ feedObject: obj, feedObjectType: feedObjectType, feedObjectTemplate: feedObjectTemplate, onCommentAction: handleExpandActivities }, CommentActionProps)) }))), !hideShareAction && (_jsx(Grid, Object.assign({ item: true, xs: columnWidth, className: classes.action }, { children: _jsx(Share, Object.assign({ feedObject: obj, feedObjectType: feedObjectType, id: feedObjectId }, ShareActionProps)) })))] })));
 }

package/lib/esm/components/FeedObject/Actions/Comment/Comment.js

@@ -34,7 +34,7 @@ export default function Comment(props) {
     // PROPS
     const { className, feedObjectId, feedObject, feedObjectType = SCContributionType.POST, feedObjectTemplate = SCFeedObjectTemplateType, withAction = true, withAudience = true, inlineAction = false, onViewCommentsAction, onCommentAction } = props, rest = __rest(props, ["className", "feedObjectId", "feedObject", "feedObjectType", "feedObjectTemplate", "withAction", "withAudience", "inlineAction", "onViewCommentsAction", "onCommentAction"]);
     // STATE
-    const { obj } = useSCFetchFeedObject({ id: feedObjectId, feedObject, feedObjectType });
+    const { obj, setObj } = useSCFetchFeedObject({ id: feedObjectId, feedObject, feedObjectType });
     // CONTEXT
     const scRoutingContext = useSCRouting();
     // INTL
@@ -50,7 +50,7 @@ export default function Comment(props) {
                 audience = (_jsx(Button, Object.assign({ variant: "text", size: "small", disabled: true, color: "inherit" }, { children: _jsx(Skeleton, { animation: "wave", height: 18, width: 50 }) })));
             }
             else {
-                audience = (_jsx(_Fragment, { children: onViewCommentsAction ? (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: onViewCommentsAction, color: "inherit" }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) : (_jsx(_Fragment, { children: feedObjectTemplate === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: "body2" }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) : (_jsx(Button, Object.assign({ variant: "text", size: "small", component: Link, to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), classes: { root: classes.viewAudienceButton } }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) })) }));
+                audience = (_jsx(_Fragment, { children: onViewCommentsAction ? (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: onViewCommentsAction, color: "inherit" }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) : (_jsx(_Fragment, { children: feedObjectTemplate === SCFeedObjectTemplateType.DETAIL ? (_jsx(Typography, Object.assign({ variant: 'body2' }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) : (_jsx(Button, Object.assign({ variant: "text", size: "small", component: Link, to: scRoutingContext.url(getContributionRouteName(obj), getRouteData(obj)), classes: { root: classes.viewAudienceButton } }, { children: `${intl.formatMessage(messages.comments, { total: obj.comment_count })}` }))) })) }));
             }
         }
         return audience;

package/lib/esm/components/FeedObject/Actions/Follow/Follow.js

@@ -2,7 +2,8 @@ import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Box, Tooltip, styled, Icon, Button } from '@mui/material';
+import LoadingButton from '@mui/lab/LoadingButton';
+import { Box, Tooltip, styled, Icon } from '@mui/material';
 import { SCOPE_SC_UI } from '../../../../constants/Errors';
 import classNames from 'classnames';
 import { useSnackbar } from 'notistack';
@@ -60,7 +61,7 @@ export default function Follow(props) {
         else {
             setIsFollowing(true);
             performFollow()
-                .then(() => {
+                .then((data) => {
                 const isFollow = !obj.followed;
                 setObj(Object.assign({}, obj, { followed: isFollow }));
                 setIsFollowing(false);
@@ -87,7 +88,7 @@ export default function Follow(props) {
         if (obj.followed) {
             btnLabel = _jsx(FormattedMessage, { id: "ui.feedObject.unfollow", defaultMessage: "ui.feedObject.unfollow" });
         }
-        return (_jsx(React.Fragment, { children: scUserContext.user && obj.author.id !== scUserContext.user.id && !obj.deleted && (_jsx(Tooltip, Object.assign({ title: btnLabel }, { children: _jsx(Button, Object.assign({ className: classNames(classes.button, { [classes.iconized]: iconized, [classes.followed]: obj.followed }), loading: isFollowing, variant: iconized ? 'text' : 'contained', disabled: isFollowing, onClick: follow }, { children: iconized ? _jsx(Icon, { children: obj.followed ? 'bookmark_added' : 'bookmark_border' }) : btnLabel })) }))) }));
+        return (_jsx(React.Fragment, { children: scUserContext.user && obj.author.id !== scUserContext.user.id && !obj.deleted && (_jsx(Tooltip, Object.assign({ title: btnLabel }, { children: _jsx(LoadingButton, Object.assign({ className: classNames(classes.button, { [classes.iconized]: iconized, [classes.followed]: obj.followed }), loading: isFollowing, variant: iconized ? 'text' : 'contained', disabled: isFollowing, onClick: follow }, { children: iconized ? _jsx(Icon, { children: obj.followed ? 'bookmark_added' : 'bookmark_border' }) : btnLabel })) }))) }));
     }
     /**
      * Renders share action

package/lib/esm/components/FeedObject/Actions/Share/Share.js

@@ -2,6 +2,7 @@ import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useMemo, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import LoadingButton from '@mui/lab/LoadingButton';
 import SharesDialog from './SharesDialog';
 import { Box, Button, Divider, ListItemText, Menu, SwipeableDrawer, Tooltip, useMediaQuery, useTheme, Icon, MenuItem, ListItemIcon, styled, Skeleton } from '@mui/material';
 import { MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_TYPE_SHARE } from '../../../../constants/Media';
@@ -192,7 +193,7 @@ export default function Share(props) {
      * @return {JSX.Element}
      */
     function renderShareBtn() {
-        return (_jsx(React.Fragment, { children: withAction && (_jsxs(React.Fragment, { children: [!inlineAction && withAudience && _jsx(Divider, { className: classes.divider }), _jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.share)}` }, { children: _jsx(Button, Object.assign({ loading: isSharing, onClick: handleOpenShareMenu, className: classes.button }, { children: _jsx(Icon, { children: "share" }) })) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: !isMobile ? (_jsx(Menu, Object.assign({ anchorEl: anchorEl, open: true, onClose: handleClose, onClick: handleClose, slotProps: {
+        return (_jsx(React.Fragment, { children: withAction && (_jsxs(React.Fragment, { children: [!inlineAction && withAudience && _jsx(Divider, { className: classes.divider }), _jsx(Tooltip, Object.assign({ title: `${intl.formatMessage(messages.share)}` }, { children: _jsx(LoadingButton, Object.assign({ loading: isSharing, onClick: handleOpenShareMenu, className: classes.button }, { children: _jsx(Icon, { children: "share" }) })) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: !isMobile ? (_jsx(Menu, Object.assign({ anchorEl: anchorEl, open: true, onClose: handleClose, onClick: handleClose, slotProps: {
                                 paper: {
                                     elevation: 0,
                                     sx: {

package/lib/esm/components/FeedObject/Activities/ActivitiesMenu/ActivitiesMenu.js

@@ -67,32 +67,30 @@ export default function ActivitiesMenu(props) {
         };
     };
     function renderMenuContent() {
-        return (_jsxs(Box, { children: [!hideRelevantActivitiesItem && (_jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.relevantActivities) }), secondary: _jsx(FormattedMessage, { id: "ui.feedObject.activitiesMenu.relevantActivitiesDesc", defaultMessage: "ui.feedObject.activitiesMenu.relevantActivitiesDesc" }) }) }))), _jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.RECENT_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.RECENT_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.recentComments) }), secondary: _jsx(FormattedMessage, { id: "ui.feedObject.activitiesMenu.recentCommentsDesc", defaultMessage: "ui.feedObject.activitiesMenu.recentCommentsDesc" }) }) })), _jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.FIRST_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.FIRST_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.firstComments) }), secondary: _jsx(FormattedMessage, { id: "ui.feedObject.activitiesMenu.firstCommentsDesc", defaultMessage: "ui.feedObject.activitiesMenu.firstCommentsDesc" }) }) })), scUserContext.user && (_jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS) }, { children: (followEnabled || connectionEnabled) && (_jsx(ListItemText, { primary: _jsx("b", { children: followEnabled ? intl.formatMessage(messages.followedComments) : intl.formatMessage(messages.connectionsComments) }), secondary: followEnabled ? (_jsx(FormattedMessage, { id: "ui.feedObject.activitiesMenu.followedCommentsDesc", defaultMessage: "ui.feedObject.activitiesMenu.followedCommentsDesc" })) : (_jsx(FormattedMessage, { id: "ui.feedObject.activitiesMenu.connectionsCommentsDesc", defaultMessage: "ui.feedObject.activitiesMenu.connectionsCommentsDesc" })) })) })))] }));
+        return (_jsxs(Box, { children: [!hideRelevantActivitiesItem && (_jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.RELEVANCE_ACTIVITIES) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.relevantActivities) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.relevantActivitiesDesc', defaultMessage: 'ui.feedObject.activitiesMenu.relevantActivitiesDesc' }) }) }))), _jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.RECENT_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.RECENT_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.recentComments) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.recentCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.recentCommentsDesc' }) }) })), _jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.FIRST_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.FIRST_COMMENTS) }, { children: _jsx(ListItemText, { primary: _jsx("b", { children: intl.formatMessage(messages.firstComments) }), secondary: _jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.firstCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.firstCommentsDesc' }) }) })), scUserContext.user && (_jsx(ListItemButton, Object.assign({ selected: selectedActivities === SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS, onClick: handleChangeActivitiesType(SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS) }, { children: (followEnabled || connectionEnabled) && (_jsx(ListItemText, { primary: _jsx("b", { children: followEnabled ? intl.formatMessage(messages.followedComments) : intl.formatMessage(messages.connectionsComments) }), secondary: followEnabled ? (_jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.followedCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.followedCommentsDesc' })) : (_jsx(FormattedMessage, { id: 'ui.feedObject.activitiesMenu.connectionsCommentsDesc', defaultMessage: 'ui.feedObject.activitiesMenu.connectionsCommentsDesc' })) })) })))] }));
     }
     /**
      * Renders root object
      */
     return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Box, Object.assign({ className: classes.selector }, { children: _jsx(Tooltip, Object.assign({ title: _jsx(FormattedMessage, { id: "ui.feedObject.activitiesMenu.tooltipTitle", defaultMessage: "ui.feedObject.activitiesMenu.tooltipTitle" }) }, { children: _jsxs(Button, Object.assign({ variant: "text", size: "small", onClick: handleOpen }, { children: [selectedActivities === SCFeedObjectActivitiesType.CONNECTIONS_COMMENTS && followEnabled
                                 ? intl.formatMessage(messages.followedComments)
-                                : intl.formatMessage(messages[`${camelCase(selectedActivities)}`]), "\u00A0 ", _jsx(Icon, { children: "expand_more" })] })) })) })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuContent() }))) : (_jsx(Menu, Object.assign({ anchorEl: anchorEl, open: true, onClose: handleClose, onClick: handleClose, slotProps: {
-                        paper: {
-                            elevation: 0,
-                            sx: {
-                                overflow: 'visible',
-                                filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
-                                mt: 1.5,
-                                '&:before': {
-                                    content: '""',
-                                    display: 'block',
-                                    position: 'absolute',
-                                    top: 0,
-                                    right: 14,
-                                    width: 10,
-                                    height: 10,
-                                    bgcolor: 'background.paper',
-                                    transform: 'translateY(-50%) rotate(45deg)',
-                                    zIndex: 0
-                                }
+                                : intl.formatMessage(messages[`${camelCase(selectedActivities)}`]), "\u00A0 ", _jsx(Icon, { children: "expand_more" })] })) })) })), open && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: true, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuContent() }))) : (_jsx(Menu, Object.assign({ anchorEl: anchorEl, open: true, onClose: handleClose, onClick: handleClose, PaperProps: {
+                        elevation: 0,
+                        sx: {
+                            overflow: 'visible',
+                            filter: 'drop-shadow(0px 2px 8px rgba(0,0,0,0.32))',
+                            mt: 1.5,
+                            '&:before': {
+                                content: '""',
+                                display: 'block',
+                                position: 'absolute',
+                                top: 0,
+                                right: 14,
+                                width: 10,
+                                height: 10,
+                                bgcolor: 'background.paper',
+                                transform: 'translateY(-50%) rotate(45deg)',
+                                zIndex: 0
                             }
                         }
                     }, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, { children: renderMenuContent() }))) }))] })));

package/lib/esm/components/FeedObject/Activities/RelevantActivities/CommentActivity/CommentActivity.js

@@ -44,7 +44,7 @@ export default function CommentRelevantActivity(props) {
     // const summaryHtml = getContributionHtml(commentHtml, scRoutingContext.url);
     return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className), image: _jsx(Link, Object.assign({}, (!activityObject.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, activityObject.author) }), { onClick: activityObject.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(Avatar, { alt: activityObject.author.username, variant: "circular", src: activityObject.author.avatar, className: classes.avatar }) })), primary: _jsx(_Fragment, { children: intl.formatMessage(messages.comment, {
                         username: (_jsx(Link, Object.assign({}, (!activityObject.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, activityObject.author) }), { onClick: activityObject.author.deleted ? () => setOpenAlert(true) : null, className: classes.username }, { children: activityObject.author.username }))),
-                        link: (chunks) => (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(activityObject.comment)) }, { children: chunks }), "ui.feedObject.relevantActivities.comment.link"))
+                        link: (...chunks) => _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(activityObject.comment)) }, { children: chunks }))
                         // comment: (
                         //   <>
                         //     <Typography variant="body2" gutterBottom dangerouslySetInnerHTML={{__html: summaryHtml}} />

package/lib/esm/components/FeedObject/Activities/RelevantActivities/RelevantActivities.js

@@ -46,5 +46,5 @@ export default function RelevantActivities(props) {
     /**
      * Renders root object
      */
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: activities.length <= 0 ? (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.relevantActivities.noResults", defaultMessage: "ui.feedObject.relevantActivities.noResults" }) }))) : (_jsxs(List, { children: [activities.slice(0, showMaxRelevantActivities).map((a, i) => (_jsx(ListItem, Object.assign({ className: classes.activity }, { children: renderActivity(a, i) }), i))), !openOtherActivities && activities.length > showMaxRelevantActivities && (_jsxs(ListItemButton, Object.assign({ onClick: () => setOpenOtherActivities((prev) => !prev) }, { children: [_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.feedObject.relevantActivities.showOthers", defaultMessage: "ui.feedObject.relevantActivities.showOthers" }) }), openOtherActivities ? _jsx(Icon, { children: "expand_less" }) : _jsx(Icon, { children: "expand_more" })] }))), _jsx(Collapse, Object.assign({ in: openOtherActivities, timeout: "auto", unmountOnExit: true }, { children: activities.slice(showMaxRelevantActivities).map((a, i) => (_jsx(ListItem, Object.assign({ className: classes.activity }, { children: renderActivity(a, i) }), i))) }))] })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: activities.length <= 0 ? (_jsx(Typography, Object.assign({ variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.relevantActivities.noResults", defaultMessage: "ui.feedObject.relevantActivities.noResults" }) }))) : (_jsxs(List, { children: [activities.slice(0, showMaxRelevantActivities).map((a, i) => (_jsx(ListItem, Object.assign({ className: classes.activity }, { children: renderActivity(a, i) }), i))), !openOtherActivities && activities.length > showMaxRelevantActivities && (_jsxs(ListItemButton, Object.assign({ onClick: () => setOpenOtherActivities((prev) => !prev) }, { children: [_jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: 'ui.feedObject.relevantActivities.showOthers', defaultMessage: 'ui.feedObject.relevantActivities.showOthers' }) }), openOtherActivities ? _jsx(Icon, { children: "expand_less" }) : _jsx(Icon, { children: "expand_more" })] }))), _jsx(Collapse, Object.assign({ in: openOtherActivities, timeout: "auto", unmountOnExit: true }, { children: activities.slice(showMaxRelevantActivities).map((a, i) => (_jsx(ListItem, Object.assign({ className: classes.activity }, { children: renderActivity(a, i) }), i))) }))] })) })));
 }

package/lib/esm/components/FeedObject/Contributors/Contributors.js

@@ -47,5 +47,5 @@ export default function ContributorsFeedObject(props) {
     if (!contributorsObject.feedObject) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Box, { children: contributorsObject.isLoadingNext && !openContributorsDialog ? (_jsx(ContributorsSkeleton, Object.assign({}, ContributorsSkeletonProps))) : (_jsx(_Fragment, { children: contributorsObject.contributors.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Button, Object.assign({ variant: "text", onClick: () => setOpenContributorsDialog(true), classes: { root: classes.btnParticipants }, color: "inherit" }, { children: [_jsx(FormattedMessage, { id: "ui.feedObject.contributors.participants", defaultMessage: "ui.feedObject.contributors.participants" }), ":", _jsxs(AvatarGroup, Object.assign({}, rest, { children: [contributorsObject.contributors.map((c, i) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, i))), [...Array(Math.max(contributorsObject.total - contributorsObject.contributors.length, 0))].map((x, i) => (_jsx(Avatar, {}, i)))] }))] })), openContributorsDialog && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { defaultMessage: "ui.feedObject.contributors.title", id: "ui.feedObject.contributors.title", values: { total: contributorsObject.total } }), onClose: () => setOpenContributorsDialog(false), open: openContributorsDialog }, { children: contributorsObject.isLoadingNext ? (_jsx(CentralProgress, { size: 50 })) : (_jsx(InfiniteScroll, Object.assign({ dataLength: contributorsObject.contributors.length, next: contributorsObject.getNextPage(), hasMoreNext: Boolean(contributorsObject.next), loaderNext: _jsx(CentralProgress, { size: 30 }), height: 400, endMessage: _jsx(Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.contributors.noOtherContributors", defaultMessage: "ui.feedObject.contributors.noOtherContributors" }) })) }, { children: _jsx(List, { children: contributorsObject.contributors.map((c, i) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: c, sx: { m: 0 }, onClick: () => setOpenContributorsDialog(false) }, c.id) }, i))) }) }))) })))] })) : null })) }) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(Box, { children: contributorsObject.isLoadingNext && !openContributorsDialog ? (_jsx(ContributorsSkeleton, Object.assign({}, ContributorsSkeletonProps))) : (_jsx(_Fragment, { children: contributorsObject.contributors.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs(Button, Object.assign({ variant: "text", onClick: () => setOpenContributorsDialog(true), classes: { root: classes.btnParticipants }, color: "inherit" }, { children: [_jsx(FormattedMessage, { id: 'ui.feedObject.contributors.participants', defaultMessage: 'ui.feedObject.contributors.participants' }), ":", _jsxs(AvatarGroup, Object.assign({}, rest, { children: [contributorsObject.contributors.map((c, i) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, i))), [...Array(Math.max(contributorsObject.total - contributorsObject.contributors.length, 0))].map((x, i) => (_jsx(Avatar, {}, i)))] }))] })), openContributorsDialog && (_jsx(BaseDialog, Object.assign({ title: _jsx(FormattedMessage, { defaultMessage: "ui.feedObject.contributors.title", id: "ui.feedObject.contributors.title", values: { total: contributorsObject.total } }), onClose: () => setOpenContributorsDialog(false), open: openContributorsDialog }, { children: contributorsObject.isLoadingNext ? (_jsx(CentralProgress, { size: 50 })) : (_jsx(InfiniteScroll, Object.assign({ dataLength: contributorsObject.contributors.length, next: contributorsObject.getNextPage(), hasMoreNext: Boolean(contributorsObject.next), loaderNext: _jsx(CentralProgress, { size: 30 }), height: 400, endMessage: _jsx(Typography, Object.assign({ variant: "body2", align: "center", fontWeight: "bold" }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.contributors.noOtherContributors", defaultMessage: "ui.feedObject.contributors.noOtherContributors" }) })) }, { children: _jsx(List, { children: contributorsObject.contributors.map((c, i) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: c, sx: { m: 0 }, onClick: () => setOpenContributorsDialog(false) }, c.id) }, i))) }) }))) })))] })) : null })) }) })));
 }

package/lib/esm/components/FeedObject/Contributors/Skeleton.js

@@ -35,5 +35,5 @@ const Root = styled(Box, {
  */
 export default function ContributorsSkeleton(props) {
     const { className = null, AvatarGroupSkeletonProps = {} } = props, rest = __rest(props, ["className", "AvatarGroupSkeletonProps"]);
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Button, Object.assign({ variant: "text", disabled: true, classes: { root: classes.btnParticipants } }, { children: [_jsx(FormattedMessage, { id: "ui.feedObject.contributors.participants", defaultMessage: "ui.feedObject.contributors.participants" }), ":", _jsx(AvatarGroupSkeleton, Object.assign({}, props.AvatarGroupSkeletonProps))] })) })));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsxs(Button, Object.assign({ variant: "text", disabled: true, classes: { root: classes.btnParticipants } }, { children: [_jsx(FormattedMessage, { id: 'ui.feedObject.contributors.participants', defaultMessage: 'ui.feedObject.contributors.participants' }), ":", _jsx(AvatarGroupSkeleton, Object.assign({}, props.AvatarGroupSkeletonProps))] })) })));
 }

package/lib/esm/components/FeedObject/Poll/Choice/Choice.js

@@ -1,8 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSCContext, useSCUser } from '@selfcommunity/react-core';
-import { Box, Card, Typography, styled, Icon, LinearProgress, Button } from '@mui/material';
+import { Box, Card, Typography, styled, Icon, LinearProgress } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
+import { LoadingButton } from '@mui/lab';
 import classNames from 'classnames';
 import { PREFIX } from '../../constants';
 const classes = {
@@ -46,5 +47,5 @@ export default function Choice(props) {
     /**
      * Renders root element
      */
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ className: classes.label }, { children: choiceObj.choice })), _jsx(LinearProgressWithLabel, { className: classes.progress, value: renderVotes(choiceObj.vote_count, votes) }), _jsx(Button, Object.assign({ loading: isVoting === choiceObj.id, variant: choiceObj.voted ? 'contained' : 'outlined', size: "small", disabled: disabled || isVoting !== null || votable || feedObject.draft, className: classes.vote, onClick: handleVoteAction }, { children: choiceObj.voted ? (_jsx(Icon, { children: "check" })) : (_jsx(FormattedMessage, { id: "ui.feedObject.poll.choice.vote", defaultMessage: "ui.feedObject.poll.choice.vote" })) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Typography, Object.assign({ className: classes.label }, { children: choiceObj.choice })), _jsx(LinearProgressWithLabel, { className: classes.progress, value: renderVotes(choiceObj.vote_count, votes) }), _jsx(LoadingButton, Object.assign({ loading: isVoting === choiceObj.id, variant: choiceObj.voted ? 'contained' : 'outlined', size: "small", disabled: disabled || isVoting !== null || votable || feedObject.draft, className: classes.vote, onClick: handleVoteAction }, { children: choiceObj.voted ? (_jsx(Icon, { children: "check" })) : (_jsx(FormattedMessage, { id: "ui.feedObject.poll.choice.vote", defaultMessage: "ui.feedObject.poll.choice.vote" })) }))] })));
 }

package/lib/esm/components/FeedObjectMediaPreview/FeedObjectMediaPreview.js

@@ -57,6 +57,6 @@ export default (inProps) => {
      */
     return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: mediaObjectTypes.map((mediaObject) => {
             const { displayProps = {} } = mediaObject;
-            return (_jsx("div", { children: _jsx(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, (mediaObject.name !== 'share' && { onMediaClick: handleMediaClick }))) }, mediaObject.name));
+            return (_jsx("div", { children: _jsx(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, { onMediaClick: handleMediaClick })) }, mediaObject.name));
         }) })));
 };

package/lib/esm/components/FollowUserButton/FollowUserButton.js

@@ -1,8 +1,9 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
-import { Button, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { SCOPE_SC_UI } from '../../constants/Errors';
+import { LoadingButton } from '@mui/lab';
 import { FormattedMessage } from 'react-intl';
 import { useSnackbar } from 'notistack';
 import classNames from 'classnames';
@@ -14,7 +15,7 @@ const PREFIX = 'SCFollowUserButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const FollowButton = styled(Button, {
+const FollowButton = styled(LoadingButton, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root

package/lib/esm/components/FriendshipUserButton/FriendshipUserButton.js

@@ -1,12 +1,13 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
-import { Button, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { SCConnectionStatus } from '@selfcommunity/types';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { useSnackbar } from 'notistack';
 import { FormattedMessage } from 'react-intl';
+import { LoadingButton } from '@mui/lab';
 import { Logger } from '@selfcommunity/utils';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { catchUnauthorizedActionByBlockedUser } from '../../utils/errors';
@@ -15,10 +16,10 @@ const PREFIX = 'SCFriendshipUserButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(Button, {
+const Root = styled(LoadingButton, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
+    overridesResolver: (props, styles) => styles.root
 })(() => ({}));
 // TODO: fix component
 /**

package/lib/esm/components/GroupActionsMenu/index.js

@@ -148,13 +148,5 @@ export default function GroupActionsMenu(inProps) {
     if (!scGroup) {
         return null;
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, slotProps: {
-                        paper: {
-                            className: classes.paper
-                        }
-                    }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, slotProps: {
-                        paper: {
-                            className: classes.paper
-                        }
-                    } }, { children: renderList() }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.groupActionsMenu.dialog.msg", defaultMessage: "ui.groupActionsMenu.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.groupActionsMenu.dialog.confirm", defaultMessage: "ui.groupActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && _jsx(GroupForm, { onClose: handleEditClick, group: scGroup, onSuccess: handleEditSuccess })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleOpen }, { children: _jsx(Icon, { children: "more_vert" }) })), Boolean(anchorEl) && (_jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: true, onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: _jsx(List, { children: renderList() }) }))) : (_jsx(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: true, onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))) })), openConfirmDialog && (_jsx(ConfirmDialog, { open: openConfirmDialog, title: _jsx(FormattedMessage, { id: "ui.groupActionsMenu.dialog.msg", defaultMessage: "ui.groupActionsMenu.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.groupActionsMenu.dialog.confirm", defaultMessage: "ui.groupActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && _jsx(GroupForm, { onClose: handleEditClick, group: scGroup, onSuccess: handleEditSuccess })] }));
 }

package/lib/esm/components/GroupAutocomplete/GroupAutocomplete.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
@@ -14,7 +14,7 @@ const classes = {
 const Root = styled(Autocomplete, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (_props, styles) => styles.root
+    overridesResolver: (props, styles) => styles.root
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Group Autocomplete component. Learn about the available props and the CSS API.
@@ -70,7 +70,7 @@ const GroupAutocomplete = (inProps) => {
     const handleClose = () => {
         setOpen(false);
     };
-    const handleChange = (_event, value) => {
+    const handleChange = (event, value) => {
         setValue(value);
     };
     // Render
@@ -85,9 +85,7 @@ const GroupAutocomplete = (inProps) => {
             const parts = parse(option.name, matches);
             return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, { children: part.text }), index))) })] })));
         }, renderInput: (params) => {
-            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
-                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'groups', endAdornment: (_jsxs(_Fragment, { children: [isLoading && _jsx(CircularProgress, { color: "inherit", size: 20 }), params.InputProps.endAdornment] })) })
-                } })));
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'groups', endAdornment: (_jsxs(React.Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
         } }, rest)));
 };
 export default GroupAutocomplete;