@selfcommunity/react-ui 0.11.0-alpha.6 → 0.11.0-alpha.61

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

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Button, Chip, FormControl, Grid, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Radio, Select, styled, TextField, Typography, useMediaQuery, useTheme, useThemeProps } from '@mui/material';
+import { Box, Button, Chip, Divider, FormControl, Grid, Icon, IconButton, InputAdornment, InputLabel, MenuItem, Radio, Select, styled, TextField, Typography, useMediaQuery, useTheme, useThemeProps } from '@mui/material';
 import { Endpoints, http } from '@selfcommunity/api-services';
 import { SCPreferences, SCPreferencesContext, SCUserContext, UserUtils } from '@selfcommunity/react-core';
 import { SCEventDateFilterType, SCEventLocationFilterType, SCEventSubscriptionStatusType } from '@selfcommunity/types';
@@ -18,10 +18,13 @@ import Skeleton from '../Events/Skeleton';
 import { PREFIX } from './constants';
 import LocationEventsFilter from './LocationEventsFilter';
 import PastEventsFilter from './PastEventsFilter';
+import OngoingEventsFilter from './OngoingEventsFilter';
 const classes = {
     root: `${PREFIX}-root`,
     filters: `${PREFIX}-filters`,
     events: `${PREFIX}-events`,
+    sectionTitle: `${PREFIX}-section-title`,
+    divider: `${PREFIX}-divider`,
     item: `${PREFIX}-item`,
     itemSkeleton: `${PREFIX}-item-skeleton`,
     noResults: `${PREFIX}-no-results`,
@@ -29,7 +32,7 @@ const classes = {
     search: `${PREFIX}-search`
 };
 const options = [
-    { value: SCEventDateFilterType.ANY, label: _jsx(FormattedMessage, { id: "ui.events.select.any", defaultMessage: "ui.events.select.any" }) },
+    { value: SCEventDateFilterType.ALL, label: _jsx(FormattedMessage, { id: "ui.events.select.any", defaultMessage: "ui.events.select.any" }) },
     { value: SCEventDateFilterType.TODAY, label: _jsx(FormattedMessage, { id: "ui.events.select.today", defaultMessage: "ui.events.select.today" }) },
     { value: SCEventDateFilterType.TOMORROW, label: _jsx(FormattedMessage, { id: "ui.events.select.tomorrow", defaultMessage: "ui.events.select.tomorrow" }) },
     { value: SCEventDateFilterType.THIS_WEEK, label: _jsx(FormattedMessage, { id: "ui.events.select.thisWeek", defaultMessage: "ui.events.select.thisWeek" }) },
@@ -43,7 +46,7 @@ const Root = styled(Box, {
 export const EventsChipRoot = styled(Chip, {
     name: PREFIX,
     slot: 'EventsChipRoot',
-    shouldForwardProp: (prop) => prop !== 'showFollowed' && prop !== 'showPastEvents'
+    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.
@@ -78,7 +81,7 @@ export default function Events(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { endpoint = Endpoints.SearchEvents, endpointQueryParams = { limit: 8, offset: DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventsSkeletonComponentProps = {}, EventSkeletonComponentProps = { elevation: 0, square: true }, GridContainerComponentProps = {}, GridItemComponentProps = {}, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpoint", "endpointQueryParams", "className", "EventComponentProps", "EventsSkeletonComponentProps", "EventSkeletonComponentProps", "GridContainerComponentProps", "GridItemComponentProps", "showFilters", "filters", "general"]);
+    const { endpoint = Endpoints.SearchEvents, endpointQueryParams = { limit: 8, offset: DEFAULT_PAGINATION_OFFSET }, className, EventComponentProps = { elevation: 0, square: true }, EventsSkeletonComponentProps = {}, EventSkeletonComponentProps = { elevation: 0, square: true }, GridContainerComponentProps = {}, GridItemComponentProps = {}, CreateEventButtonProps = {}, showFilters = false, filters, general = true, hideTitle = false } = props, rest = __rest(props, ["endpoint", "endpointQueryParams", "className", "EventComponentProps", "EventsSkeletonComponentProps", "EventSkeletonComponentProps", "GridContainerComponentProps", "GridItemComponentProps", "CreateEventButtonProps", "showFilters", "filters", "general", "hideTitle"]);
     // STATE
     const [events, setEvents] = useState([]);
     const [loading, setLoading] = useState(true);
@@ -88,7 +91,9 @@ export default function Events(inProps) {
     const [location, setLocation] = useState(SCEventLocationFilterType.ANY);
     const [showFollowed, setShowFollowed] = useState(false);
     const [showPastEvents, setShowPastEvents] = useState(false);
+    const [showOngoingEvents, setShowOngoingEvents] = useState(false);
     const [showMyEvents, setShowMyEvents] = useState(false);
+    const showUserEvents = !general && (events.length || (!events.length && (showPastEvents || showMyEvents || location !== SCEventLocationFilterType.ANY)));
     // CONTEXT
     const scUserContext = useContext(SCUserContext);
     const scPreferencesContext = useContext(SCPreferencesContext);
@@ -115,6 +120,12 @@ export default function Events(inProps) {
     const handleDeletePastClick = () => {
         setShowPastEvents(false);
     };
+    const handleChipOngoingClick = () => {
+        setShowOngoingEvents(!showOngoingEvents);
+    };
+    const handleDeleteOngoingClick = () => {
+        setShowOngoingEvents(false);
+    };
     /**
      * Fetches events list
      */
@@ -125,7 +136,7 @@ export default function Events(inProps) {
             url: endpoint.url({}),
             method: endpoint.method,
             params: Object.assign(Object.assign({}, endpointQueryParams), (general
-                ? Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (query && { search: query })), (dateSearch !== SCEventDateFilterType.ANY && { date_filter: dateSearch })), (location !== SCEventLocationFilterType.ANY && { location })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: SCEventDateFilterType.PAST })) : Object.assign(Object.assign(Object.assign({ subscription_status: SCEventSubscriptionStatusType.GOING }, (location !== SCEventLocationFilterType.ANY && { location })), (showPastEvents && { past: showPastEvents })), (showMyEvents && { created_by: authUserId }))))
+                ? Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (query && { search: query })), (dateSearch !== SCEventDateFilterType.ALL && { date_filter: dateSearch })), (location !== SCEventLocationFilterType.ANY && { location })), (showFollowed && { follows: showFollowed })), (showOngoingEvents && { date_filter: SCEventDateFilterType.NOT_PAST })) : Object.assign(Object.assign(Object.assign({ subscription_status: SCEventSubscriptionStatusType.GOING }, (location !== SCEventLocationFilterType.ANY && { location })), (showPastEvents && { past: showPastEvents })), (showMyEvents && { created_by: authUserId }))))
         })
             .then((res) => {
             setEvents(res.data.results);
@@ -146,7 +157,7 @@ export default function Events(inProps) {
         else {
             fetchEvents();
         }
-    }, [contentAvailability, authUserId, dateSearch, location, showFollowed, showPastEvents, showMyEvents]);
+    }, [contentAvailability, authUserId, dateSearch, location, showFollowed, showPastEvents, showMyEvents, showOngoingEvents]);
     /**
      * Subscriber for pubsub callback
      */
@@ -209,23 +220,23 @@ export default function Events(inProps) {
     /**
      * Renders events list
      */
-    const c = (_jsxs(_Fragment, { children: [showFilters && (_jsx(Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? (_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), 
+    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({ 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 }) }))] })) : (_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) => {
+                                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();
                                     }
                                 }, 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: showPastEvents || 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, 
+                                } }) })), _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({ item: true }, { children: _jsx(PastEventsFilter, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, disabled: dateSearch !== SCEventDateFilterType.ANY || loading }) }))] })) }))), _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, {}) : null })), _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, { skeletonsAnimation: false, actions: (onlyStaffEnabled && UserUtils.isStaff(scUserContext.user)) || !onlyStaffEnabled ? _jsx(CreateEventButton, {}) : null })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.events.noEvents.title.personal", defaultMessage: "ui.events.noEvents.title.personal" }) }))] })) }))) : (_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" }, { 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)
      */
     if (!contentAvailability && !scUserContext.user) {
         return null;
     }
-    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: c })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(_Fragment, { children: showUserEvents && !hideTitle ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.sectionTitle }, { children: _jsx(FormattedMessage, { id: "ui.events.myEvents.title", defaultMessage: "ui.events.myEvents.title" }) })), _jsx(Divider, { className: classes.divider })] })) : general ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4", className: classes.sectionTitle }, { children: _jsx(FormattedMessage, { id: "ui.events.allEvents.title", defaultMessage: "ui.events.allEvents.title" }) })), _jsx(Divider, { className: classes.divider })] })) : null }), content] })));
 }

package/lib/esm/components/Events/OngoingEventsFilter.d.ts

@@ -0,0 +1,8 @@
+import { ChipProps } from '@mui/material';
+export interface OngoingEventsFilterProps extends ChipProps {
+    autoHide?: boolean;
+    showOngoingEvents: boolean;
+    handleClick: () => void;
+    handleDeleteClick?: () => void;
+}
+export default function OngoingEventsFilter(inProps: OngoingEventsFilterProps): JSX.Element;

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

@@ -0,0 +1,21 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon, useThemeProps } from '@mui/material';
+import { FormattedMessage } from 'react-intl';
+import { PREFIX } from './constants';
+import { EventsChipRoot } from './Events';
+export default function OngoingEventsFilter(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { autoHide = false, showOngoingEvents, handleClick, handleDeleteClick } = props, rest = __rest(props, ["autoHide", "showOngoingEvents", "handleClick", "handleDeleteClick"]);
+    if (autoHide) {
+        return null;
+    }
+    return (_jsx(EventsChipRoot, Object.assign({ color: showOngoingEvents ? 'secondary' : 'default', variant: showOngoingEvents ? 'filled' : 'outlined', label: _jsx(FormattedMessage, { id: "ui.events.filterByOngoingEvents", defaultMessage: "ui.events.filterByOngoingEvents" }), onClick: handleClick, 
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        showOngoingEvents: showOngoingEvents, deleteIcon: showOngoingEvents ? _jsx(Icon, { children: "close" }) : null, onDelete: showOngoingEvents ? handleDeleteClick : undefined }, rest)));
+}

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

@@ -73,6 +73,9 @@ export default function Share(props) {
     const showShareAction = useMemo(() => {
         return !scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value || UserUtils.isStaff(scUserContext.user);
     }, [scPreferencesContext, scUserContext.user]);
+    const showSocialShareActions = useMemo(() => {
+        return scPreferencesContext.preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
+    }, [scPreferencesContext]);
     // INTL
     const intl = useIntl();
     // HANDLERS
@@ -188,7 +191,7 @@ export default function Share(props) {
         return audience;
     }
     function renderShareMenuItems() {
-        return (_jsxs(Box, { children: [(!feedObject.group || isGroupPublic) && (_jsxs(_Fragment, { children: [showShareAction && (_jsxs(MenuItem, Object.assign({ onClick: () => share(false) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "redo" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.feedObject.share.shareNow", defaultMessage: "ui.feedObject.share.shareNow" }) })] }))), facebookShareEnabled && (_jsxs(MenuItem, Object.assign({ onClick: () => window.open(FACEBOOK_SHARE + url, 'facebook-share-dialog', 'width=626,height=436') }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "facebook" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.feedObject.share.facebook", defaultMessage: "ui.feedObject.share.facebook" }) })] }))), xShareEnabled && (_jsxs(MenuItem, Object.assign({ onClick: () => window.open(X_SHARE + url, 'x-share-dialog', 'width=626,height=436') }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "twitter" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.feedObject.share.x", defaultMessage: "ui.feedObject.share.x" }) })] }))), linkedinShareEnabled && (_jsxs(MenuItem, Object.assign({ onClick: () => window.open(LINKEDIN_SHARE + url, 'linkedin-share-dialog', 'width=626,height=436') }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "linkedin" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.feedObject.share.linkedin", defaultMessage: "ui.feedObject.share.linkedin" }) })] })))] })), _jsxs(MenuItem, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.feedObject.share.permanentLink", defaultMessage: "ui.feedObject.share.permanentLink" }), onClick: () => getPermalink() })] })] }));
+        return (_jsxs(Box, { children: [(!feedObject.group || isGroupPublic) && (_jsxs(_Fragment, { children: [showShareAction && (_jsxs(MenuItem, Object.assign({ onClick: () => share(false) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "redo" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.feedObject.share.shareNow", defaultMessage: "ui.feedObject.share.shareNow" }) })] }))), _jsx(_Fragment, { children: showSocialShareActions && (_jsxs(_Fragment, { children: [facebookShareEnabled && (_jsxs(MenuItem, Object.assign({ onClick: () => window.open(FACEBOOK_SHARE + url, 'facebook-share-dialog', 'width=626,height=436') }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "facebook" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.feedObject.share.facebook", defaultMessage: "ui.feedObject.share.facebook" }) })] }))), xShareEnabled && (_jsxs(MenuItem, Object.assign({ onClick: () => window.open(X_SHARE + url, 'x-share-dialog', 'width=626,height=436') }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "twitter" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.feedObject.share.x", defaultMessage: "ui.feedObject.share.x" }) })] }))), linkedinShareEnabled && (_jsxs(MenuItem, Object.assign({ onClick: () => window.open(LINKEDIN_SHARE + url, 'linkedin-share-dialog', 'width=626,height=436') }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "linkedin" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.feedObject.share.linkedin", defaultMessage: "ui.feedObject.share.linkedin" }) })] })))] })) })] })), _jsxs(MenuItem, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "link" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.feedObject.share.permanentLink", defaultMessage: "ui.feedObject.share.permanentLink" }), onClick: () => getPermalink() })] })] }));
     }
     /**
      * Renders vote action if withAction==true

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

@@ -41,7 +41,7 @@ export default function Activities(props) {
                 : SCCommentsOrderBy.ADDED_AT_DESC
     });
     const objId = commentsObject.feedObject ? commentsObject.feedObject.id : null;
-    const skeletonsCount = Math.min(3, commentsObject.feedObject ? commentsObject.feedObject.comment_count : 2);
+    const skeletonsCount = Math.min(2, commentsObject.feedObject ? commentsObject.feedObject.comment_count : 2);
     const existFeedObjectActivities = feedObjectActivities && feedObjectActivities.length > 0;
     /**
      * Sync activities type if prop change

package/lib/esm/components/Footer/Footer.js

@@ -10,7 +10,7 @@ import { Logger, sortByAttr } from '@selfcommunity/utils';
 import { Link, SCPreferences, useSCPreferences } from '@selfcommunity/react-core';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import FooterSkeleton from './Skeleton';
-import { PREFIX } from './constants';
+import { PREFIX, EXPLORE_MENU_ITEM } from './constants';
 const classes = {
     root: `${PREFIX}-root`,
     itemList: `${PREFIX}-item-list`,
@@ -20,7 +20,7 @@ const classes = {
 const Root = styled(Box, {
     name: PREFIX,
     slot: 'Root'
-})(({ theme }) => ({}));
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Footer component. Learn about the available props and the CSS API.
  *
@@ -55,12 +55,13 @@ export default function Footer(inProps) {
     });
     const { className, menu = null, startActions = null, endActions = null } = props, rest = __rest(props, ["className", "menu", "startActions", "endActions"]);
     // PREFERENCES
-    const scPreferences = useSCPreferences();
+    const { preferences } = useSCPreferences();
     const copyright = useMemo(() => {
-        return scPreferences.preferences && SCPreferences.TEXT_APPLICATION_COPYRIGHT in scPreferences.preferences
-            ? scPreferences.preferences[SCPreferences.TEXT_APPLICATION_COPYRIGHT].value.replace('$year', new Date().getFullYear())
+        return preferences && SCPreferences.TEXT_APPLICATION_COPYRIGHT in preferences
+            ? preferences[SCPreferences.TEXT_APPLICATION_COPYRIGHT].value.replace('$year', new Date().getFullYear())
             : null;
-    }, [scPreferences.preferences]);
+    }, [preferences]);
+    const exploreStreamEnabled = preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value;
     // STATE
     const [_menu, setMenu] = useState(menu);
     const [loading, setLoading] = useState(!menu);
@@ -93,5 +94,7 @@ export default function Footer(inProps) {
     if (loading) {
         return _jsx(FooterSkeleton, {});
     }
-    return (_jsxs(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: [startActions, _jsx(Box, Object.assign({ className: classes.itemList }, { children: sortByAttr(_menu.items, 'order').map((item, index) => (_jsx(Button, Object.assign({ component: Link, className: classes.item, to: item.url, variant: "text" }, { children: item.label }), item.id))) })), endActions, _jsx(Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })] })));
+    return (_jsxs(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: [startActions, _jsx(Box, Object.assign({ className: classes.itemList }, { children: sortByAttr(_menu.items, 'order')
+                    .filter((item) => exploreStreamEnabled || item.url !== EXPLORE_MENU_ITEM)
+                    .map((item, index) => (_jsx(Button, Object.assign({ component: Link, className: classes.item, to: item.url, variant: "text" }, { children: item.label }), item.id))) })), endActions, _jsx(Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })] })));
 }

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

@@ -1 +1,2 @@
 export declare const PREFIX = "SCFooter";
+export declare const EXPLORE_MENU_ITEM = "/explore/";

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

@@ -1 +1,2 @@
 export const PREFIX = 'SCFooter';
+export const EXPLORE_MENU_ITEM = '/explore/';

package/lib/esm/components/GroupForm/GroupForm.js

@@ -193,10 +193,10 @@ export default function GroupForm(inProps) {
         }
         groupService
             .then((data) => {
-            onSuccess && onSuccess(data);
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
             notifyChanges(data);
-            onClose && onClose();
             setField((prev) => (Object.assign(Object.assign({}, prev), { ['isSubmitting']: false })));
+            onClose === null || onClose === void 0 ? void 0 : onClose();
         })
             .catch((e) => {
             setError(Object.assign(Object.assign({}, error), formatHttpErrorCode(e)));

package/lib/esm/components/GroupInvitedWidget/GroupInvitedWidget.js

@@ -193,7 +193,7 @@ export default function GroupInvitedWidget(inProps) {
         setOpenDialog((prev) => !prev);
     };
     // RENDER
-    if ((!state.count && state.initialized) || !contentAvailability || !scGroup || !state.count || !state.results.length || !isGroupAdmin) {
+    if ((!state.count && state.initialized) || (!contentAvailability && !scUserContext.user) || !scGroup || !isGroupAdmin) {
         return _jsx(HiddenPlaceholder, {});
     }
     if (!state.initialized) {

package/lib/esm/components/GroupRequestsWidget/GroupRequestsWidget.js

@@ -179,7 +179,7 @@ export default function GroupRequestsWidget(inProps) {
         onSubscribeActon && onSubscribeActon(user);
     }, [dispatch, state.count, state.results, onSubscribeActon]);
     // RENDER
-    if ((!state.count && state.initialized) || !contentAvailability || !scGroup || !state.count || !state.results.length || !isGroupAdmin) {
+    if ((!state.count && state.initialized) || (!contentAvailability && !scUserContext.user) || !scGroup || !isGroupAdmin) {
         return _jsx(HiddenPlaceholder, {});
     }
     if (!state.initialized) {

package/lib/esm/components/Groups/Groups.js

@@ -1,10 +1,10 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Box, Button, Grid, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Box, Button, Grid, Icon, IconButton, InputAdornment, TextField, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { Endpoints, GroupService, http } from '@selfcommunity/api-services';
-import { Logger, sortByAttr } from '@selfcommunity/utils';
+import { Logger } from '@selfcommunity/utils';
 import { SCPreferences, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import Skeleton from './Skeleton';
 import { FormattedMessage } from 'react-intl';
@@ -21,6 +21,7 @@ import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 const classes = {
     root: `${PREFIX}-root`,
     filters: `${PREFIX}-filter`,
+    search: `${PREFIX}-search`,
     groups: `${PREFIX}-groups`,
     item: `${PREFIX}-item`,
     noResults: `${PREFIX}-no-results`,
@@ -94,13 +95,14 @@ export default function Groups(inProps) {
     /**
      * Fetches groups list
      */
-    const fetchGroups = () => {
+    const fetchGroups = (searchValue = search) => {
+        setLoading(true);
         let groupService;
         if (general) {
-            groupService = GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })));
+            groupService = GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
         }
         else {
-            groupService = GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })));
+            groupService = GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (searchValue && { search: searchValue })));
         }
         groupService
             .then((res) => {
@@ -122,7 +124,7 @@ export default function Groups(inProps) {
         else {
             fetchGroups();
         }
-    }, [contentAvailability, authUserId, search]);
+    }, [contentAvailability, authUserId]);
     /**
      * Subscriber for pubsub callback
      */
@@ -161,15 +163,6 @@ export default function Groups(inProps) {
             .catch((error) => console.log(error))
             .then(() => setLoading(false));
     }, [next]);
-    /**
-     * Get groups filtered
-     */
-    const getFilteredGroups = () => {
-        if (search) {
-            return groups.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
-        }
-        return groups;
-    };
     /**
      * Handle change filter name
      * @param event
@@ -180,12 +173,21 @@ export default function Groups(inProps) {
     /**
      * Renders groups list
      */
-    const filteredGroups = sortByAttr(getFilteredGroups(), 'order');
-    const content = (_jsxs(_Fragment, { children: [showFilters && groups.length !== 0 && (_jsx(Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: _jsx(TextField, { fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }) }))) }))), _jsx(_Fragment, { children: !groups.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: !onlyStaffEnabled ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? _jsx(GroupSkeleton, {}) : _jsx(Skeleton, { groupsNumber: 2 }), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
+    const content = (_jsxs(_Fragment, { children: [showFilters && (groups.length !== 0 || search.length !== 0) && (_jsx(Grid, Object.assign({ container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, { children: filters ? (filters) : (_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6 }, { children: _jsx(TextField, { className: classes.search, fullWidth: true, value: search, label: _jsx(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading, onKeyUp: (e) => {
+                            e.preventDefault();
+                            if (e.key === 'Enter') {
+                                fetchGroups();
+                            }
+                        }, InputProps: {
+                            endAdornment: (_jsxs(InputAdornment, Object.assign({ position: "end" }, { children: [search.length > 0 && (_jsx(IconButton, Object.assign({ onClick: () => {
+                                            setSearch('');
+                                            fetchGroups('');
+                                        }, disabled: loading }, { children: _jsx(Icon, { children: "close" }) }))), isMobile ? (_jsx(IconButton, Object.assign({ onClick: () => fetchGroups(), disabled: loading }, { children: _jsx(Icon, { children: "search" }) }))) : (_jsx(Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchGroups(), endIcon: _jsx(Icon, { children: "search" }), disabled: loading }))] })))
+                        } }) }))) }))), _jsx(_Fragment, { children: !groups.length ? (_jsx(Box, Object.assign({ className: classes.noResults }, { children: search.length ? (_jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noResults", defaultMessage: "ui.groups.noResults" }) }))) : !onlyStaffEnabled ? (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" }) }))] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.title.onlyStaff", defaultMessage: "ui.groups.noGroups.title.onlyStaff" }) })), _jsx(Typography, Object.assign({ variant: "body1" }, { children: _jsx(FormattedMessage, { id: "ui.groups.noGroups.subtitle.onlyStaff", defaultMessage: "ui.groups.noGroups.subtitle.onlyStaff" }) }))] })) }))) : (_jsx(InfiniteScroll, Object.assign({ dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: isMobile ? _jsx(GroupSkeleton, {}) : _jsx(Skeleton, { groupsNumber: 2 }), endMessage: _jsx(Typography, Object.assign({ component: "div", className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
                                 button: (chunk) => (_jsx(Button, Object.assign({ color: "secondary", variant: "text", onClick: handleScrollUp }, { children: chunk })))
-                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: filteredGroups.map((group) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: _jsx(Group, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
+                            } }) })) }, { children: _jsx(Grid, Object.assign({ container: true, spacing: { xs: 2 }, className: classes.groups }, { children: groups.map((group) => (_jsx(Grid, Object.assign({ item: true, xs: 12, sm: 8, md: 6, className: classes.item }, { children: _jsx(Group, Object.assign({ group: group, groupId: group.id, actionRedirect: true }, GroupComponentProps)) }), group.id))) })) }))) })] }));
     // RENDER
     if (!contentAvailability && !scUserContext.user) {
         return _jsx(HiddenPlaceholder, {});

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

@@ -0,0 +1,42 @@
+import { SCLessonActionsType } from '../../types';
+export interface LessonAppbarProps {
+    /**
+     * The appbar title
+     */
+    title: string;
+    /**
+     *  If comments are enabled for the lesson showed
+     */
+    showComments: boolean;
+    /**
+     * The edit mode
+     * @default false
+     */
+    editMode: boolean;
+    /**
+     * onArrowBack Callback
+     */
+    onArrowBackClick?: () => void;
+    /**
+     * onSaveCallback
+     */
+    onSave: () => void;
+    /**
+     * The active panel
+     */
+    activePanel: SCLessonActionsType | null;
+    /**
+     * Handles panel opening
+     * @param panel
+     */
+    handleOpen: (panel: SCLessonActionsType) => void;
+    /**
+     * Indicates whether an update is currently in progress.
+     */
+    updating: boolean;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function LessonAppbar(inProps: LessonAppbarProps): JSX.Element;

package/lib/esm/components/LessonAppbar/LessonAppbar.js

@@ -0,0 +1,31 @@
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import classNames from 'classnames';
+import { AppBar, Icon, IconButton, Toolbar, Typography, Box } from '@mui/material';
+import { PREFIX } from './constants';
+import { SCLessonActionsType } from '../../types';
+import { FormattedMessage } from 'react-intl';
+import { LoadingButton } from '@mui/lab';
+const classes = {
+    root: `${PREFIX}-root`,
+    startItems: `${PREFIX}-start-items`,
+    endItems: `${PREFIX}-end-items`,
+    title: `${PREFIX}-title`
+};
+const Root = styled(AppBar, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => [styles.root],
+    shouldForwardProp: (prop) => prop !== 'open'
+})(({ theme }) => ({}));
+export default function LessonAppbar(inProps) {
+    // PROPS
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, title = '', showComments, activePanel = null, handleOpen, onSave, editMode, onArrowBackClick, updating } = props, rest = __rest(props, ["className", "title", "showComments", "activePanel", "handleOpen", "onSave", "editMode", "onArrowBackClick", "updating"]);
+    return (_jsx(Root, Object.assign({ position: "fixed", open: Boolean(activePanel), className: classNames(classes.root, className) }, rest, { children: _jsxs(Toolbar, { children: [_jsxs(Box, Object.assign({ className: classes.startItems }, { children: [_jsx(IconButton, Object.assign({ edge: "start", onClick: onArrowBackClick }, { children: _jsx(Icon, { children: "arrow_back" }) })), _jsx(Typography, Object.assign({ variant: "h6", className: classes.title }, { children: title }))] })), editMode ? (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.SETTINGS), color: "primary" }, { children: _jsx(Icon, { children: "settings" }) })), _jsx(LoadingButton, Object.assign({ variant: "contained", size: "small", onClick: onSave, loading: updating }, { children: _jsx(FormattedMessage, { id: "ui.lessonAppbar.button.save", defaultMessage: "ui.lessonAppbar.button.save" }) }))] })) : (_jsxs(Box, Object.assign({ className: classes.endItems }, { children: [showComments && (_jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.COMMENTS) }, { children: _jsx(Icon, { children: "chat_bubble_outline" }) }))), _jsx(IconButton, Object.assign({ onClick: () => handleOpen(SCLessonActionsType.LESSONS) }, { children: _jsx(Icon, { children: "courses" }) }))] })))] }) })));
+}

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

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

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

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

package/lib/esm/components/LessonAppbar/index.d.ts

@@ -0,0 +1,3 @@
+import LessonAppbar, { LessonAppbarProps } from './LessonAppbar';
+export default LessonAppbar;
+export { LessonAppbarProps };

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

@@ -0,0 +1,2 @@
+import LessonAppbar from './LessonAppbar';
+export default LessonAppbar;

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

@@ -0,0 +1,94 @@
+import { CardProps } from '@mui/material';
+import { SCCourseCommentType, SCCourseLessonType } from '@selfcommunity/types';
+import { CacheStrategies } from '@selfcommunity/utils';
+export interface LessonCommentObjectProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Id of the comment object
+     * @default null
+     */
+    commentObjectId?: number;
+    /**
+     * Comment object
+     * @default null
+     */
+    commentObject?: SCCourseCommentType;
+    /**
+     * Id of lesson object
+     * @default null
+     */
+    lessonObjectId?: number;
+    /**
+     * Feed object
+     * @default null
+     */
+    lessonObject?: SCCourseLessonType;
+    /**
+     * Callback on delete the comment
+     * @default null
+     */
+    onDelete?: (comment: SCCourseCommentType) => void;
+    /**
+     * Callback on comment edit
+     * @default false
+     */
+    isEditing?: (editing: boolean) => void;
+    /**
+     * Props to spread to single comment object skeleton
+     * @default {elevation: 0}
+     */
+    CommentObjectSkeletonProps?: CardProps;
+    /**
+     * Props to spread to single comment object CommentObjectReply
+     * @default {elevation: 0}
+     */
+    CommentObjectReplyProps?: CardProps;
+    /**
+     * Caching strategies
+     * @default CacheStrategies.CACHE_FIRST
+     */
+    cacheStrategy?: CacheStrategies;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS Comment Object component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a comment item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CommentObject)
+
+ #### Import
+
+ ```jsx
+ import {CommentObject} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCCommentObject` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCCommentObject-root|Styles applied to the root element.|
+ |comment|.SCCommentObject-comment|Styles applied to comment element.|
+ |avatar|.SCCommentObject-avatar|Styles applied to the avatar element.|
+ |author|.SCCommentObject-author|Styles applied to the author section.|
+ |content|.SCCommentObject-content|Styles applied to content section.|
+ |textContent|.SCCommentObject-text-content|Styles applied to text content section.|
+ |mediaContent|.SCCommentObject-media-content|Styles applied to media content section.|
+ |commentActionsMenu|.SCCommentObject-comment-actions-menu|Styles applied to comment action menu element.|
+ 
+
+ * @param inProps
+ */
+export default function LessonCommentObject(inProps: LessonCommentObjectProps): JSX.Element;