@selfcommunity/react-ui 0.8.0-embeds.17 → 0.8.0

package/lib/cjs/components/Composer/TypeSwitchButtonGroup/TypeSwitchButtonGroup.js

@@ -37,6 +37,6 @@ function ComposerTypeButtonGroup(props) {
     const handleChange = (0, react_1.useCallback)((event, value) => {
         onChange && onChange(value);
     }, [onChange]);
-    return (0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onChange: handleChange, exclusive: true, value: value }, rest, { children: [hasPostType && (0, jsx_runtime_1.jsx)(material_1.ToggleButton, Object.assign({ value: Composer_1.COMPOSER_TYPE_POST }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.typeSwitch.post", defaultMessage: "ui.composer.typeSwitch.post" }) })), hasDiscussionType && (0, jsx_runtime_1.jsx)(material_1.ToggleButton, Object.assign({ value: Composer_1.COMPOSER_TYPE_DISCUSSION }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.typeSwitch.discussion", defaultMessage: "ui.composer.typeSwitch.discussion" }) })), hasPollType && (0, jsx_runtime_1.jsx)(material_1.ToggleButton, Object.assign({ value: Composer_1.COMPOSER_TYPE_POLL }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.typeSwitch.poll", defaultMessage: "ui.composer.typeSwitch.poll" }) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onChange: handleChange, exclusive: true, value: value }, rest, { children: [hasPostType && ((0, jsx_runtime_1.jsx)(material_1.ToggleButton, Object.assign({ value: Composer_1.COMPOSER_TYPE_POST }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.typeSwitch.post", defaultMessage: "ui.composer.typeSwitch.post" }) }))), hasDiscussionType && ((0, jsx_runtime_1.jsx)(material_1.ToggleButton, Object.assign({ value: Composer_1.COMPOSER_TYPE_DISCUSSION }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.typeSwitch.discussion", defaultMessage: "ui.composer.typeSwitch.discussion" }) }))), hasPostType && hasPollType && ((0, jsx_runtime_1.jsx)(material_1.ToggleButton, Object.assign({ value: Composer_1.COMPOSER_TYPE_POLL }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.composer.typeSwitch.poll", defaultMessage: "ui.composer.typeSwitch.poll" }) })))] })));
 }
 exports.default = ComposerTypeButtonGroup;

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

@@ -22,6 +22,7 @@ const constants_1 = require("./constants");
 const PastEventsFilter_1 = tslib_1.__importDefault(require("./PastEventsFilter"));
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
 const PubSub_1 = require("../../constants/PubSub");
+const LocationEventsFilter_1 = tslib_1.__importDefault(require("./LocationEventsFilter"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     filters: `${constants_1.PREFIX}-filters`,
@@ -89,6 +90,7 @@ function Events(inProps) {
     const [next, setNext] = (0, react_1.useState)(null);
     const [query, setQuery] = (0, react_1.useState)('');
     const [dateSearch, setDateSearch] = (0, react_1.useState)(options[0].value);
+    const [location, setLocation] = (0, react_1.useState)(types_1.SCEventLocationFilterType.ANY);
     const [showFollowed, setShowFollowed] = (0, react_1.useState)(false);
     const [showPastEvents, setShowPastEvents] = (0, react_1.useState)(false);
     const [showMyEvents, setShowMyEvents] = (0, react_1.useState)(false);
@@ -128,7 +130,7 @@ function Events(inProps) {
             url: endpoint.url({}),
             method: endpoint.method,
             params: Object.assign(Object.assign({}, endpointQueryParams), (general
-                ? Object.assign(Object.assign(Object.assign(Object.assign({}, (search && { search: query })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: types_1.SCEventDateFilterType.PAST })) : Object.assign(Object.assign({ subscription_status: types_1.SCEventSubscriptionStatusType.GOING }, (showPastEvents && { past: showPastEvents })), (showMyEvents && { created_by: authUserId }))))
+                ? Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (search && { search: query })), (dateSearch !== types_1.SCEventDateFilterType.ANY && { date_filter: dateSearch })), (location !== types_1.SCEventLocationFilterType.ANY && { location })), (showFollowed && { follows: showFollowed })), (showPastEvents && { date_filter: types_1.SCEventDateFilterType.PAST })) : Object.assign(Object.assign(Object.assign({ subscription_status: types_1.SCEventSubscriptionStatusType.GOING }, (location !== types_1.SCEventLocationFilterType.ANY && { location })), (showPastEvents && { past: showPastEvents })), (showMyEvents && { created_by: authUserId }))))
         })
             .then((res) => {
             setEvents(res.data.results);
@@ -149,7 +151,7 @@ function Events(inProps) {
         else {
             query === '' && fetchEvents();
         }
-    }, [contentAvailability, dateSearch, showFollowed, showPastEvents, showMyEvents, query]);
+    }, [contentAvailability, dateSearch, location, showFollowed, showPastEvents, showMyEvents, query]);
     /**
      * Subscriber for pubsub callback
      */
@@ -202,10 +204,18 @@ function Events(inProps) {
     const handleOnChangeTimeFrame = (event) => {
         setDateSearch(event.target.value);
     };
+    /**
+     * Handle change location
+     * @param event
+     */
+    const handleOnChangeLocation = (event) => {
+        setLocation(event.target.value);
+    };
     /**
      * Renders events list
      */
-    const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, autoHide: !events.length && !showPastEvents, disabled: loading }) })), (events.length !== 0 || (events.length === 0 && showMyEvents)) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
+    console.log(location);
+    const c = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showFilters && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ container: true, className: classes.filters, gap: 2 }, { children: filters ? (filters) : !general ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(events.length !== 0 || (events.length === 0 && showMyEvents)) && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                             // @ts-ignore
                             , { 
@@ -217,14 +227,14 @@ function Events(inProps) {
                                 variant: showMyEvents ? 'filled' : 'outlined', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByCreatedByMe", defaultMessage: "ui.events.filterByCreatedByMe" }), onClick: () => setShowMyEvents(!showMyEvents), 
                                 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                                 // @ts-ignore
-                                showFollowed: showMyEvents, deleteIcon: showMyEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null, disabled: loading }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 4 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading || (!events.length && !query), onKeyUp: (e) => {
+                                showFollowed: showMyEvents, deleteIcon: showMyEvents ? (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) : null, onDelete: showMyEvents ? handleDeleteClick : null, autoHide: !loading && !events.length, disabled: loading }) }))), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(PastEventsFilter_1.default, { showPastEvents: showPastEvents, handleClick: handleChipPastClick, handleDeleteClick: handleDeletePastClick, autoHide: !loading && !events.length && !showPastEvents, disabled: loading }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsx)(LocationEventsFilter_1.default, { value: location, autoHide: !loading && !events.length, disabled: loading || (!events.length && !location), handleOnChange: handleOnChangeLocation }) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 3 }, { children: (0, jsx_runtime_1.jsx)(material_1.TextField, { className: classes.search, size: 'small', fullWidth: true, value: query, label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByName", defaultMessage: "ui.events.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading || (!events.length && !query), onKeyUp: (e) => {
                                     e.preventDefault();
                                     if (e.key === 'Enter') {
                                         fetchEvents(true);
                                     }
                                 }, InputProps: {
                                     endAdornment: ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, Object.assign({ position: "end" }, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => fetchEvents(true), disabled: loading || (!events.length && !query) }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }) }))) : ((0, jsx_runtime_1.jsx)(material_1.Button, { size: "small", variant: "contained", color: "secondary", onClick: () => fetchEvents(true), endIcon: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "search" }), disabled: loading || (!events.length && !query) })) })))
-                                } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: showPastEvents || loading || (!events.length && dateSearch === types_1.SCEventDateFilterType.ANY), size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
+                                } }) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, Object.assign({ fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: showPastEvents || loading || (!events.length && dateSearch === types_1.SCEventDateFilterType.ANY), size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByDate", defaultMessage: "ui.events.filterByDate" }), value: dateSearch, onChange: handleOnChangeTimeFrame, renderValue: (selected) => options.find((option) => option.value === selected).label }, { children: options.map((option) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: dateSearch === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })) })), (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 2 }, { children: (0, jsx_runtime_1.jsx)(LocationEventsFilter_1.default, { value: location, disabled: loading || (!events.length && !location), handleOnChange: handleOnChangeLocation }) })), authUserId && ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true }, { children: (0, jsx_runtime_1.jsx)(exports.EventsChipRoot
                             // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
                             // @ts-ignore
                             , { 

package/lib/cjs/components/Events/LocationEventsFilter.d.ts

@@ -0,0 +1,14 @@
+import { ChipProps } from '@mui/material';
+import { SCEventLocationFilterType } from '@selfcommunity/types';
+export interface LocationEventsFilterProps extends ChipProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    value: SCEventLocationFilterType;
+    disabled?: boolean;
+    autoHide?: boolean;
+    handleOnChange: (event: any) => void;
+}
+export default function LocationEventsFilter(inProps: LocationEventsFilterProps): JSX.Element;

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

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const system_1 = require("@mui/system");
+const constants_1 = require("./constants");
+const styles_1 = require("@mui/material/styles");
+const types_1 = require("@selfcommunity/types");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const classes = {
+    root: `${constants_1.PREFIX}-root`
+};
+const Root = (0, styles_1.styled)(material_1.FormControl, {
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
+const locationOptions = [
+    {
+        value: types_1.SCEventLocationFilterType.ANY,
+        label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.location.select.any", defaultMessage: "ui.events.location.select.any" })
+    },
+    {
+        value: types_1.SCEventLocationFilterType.PERSON,
+        label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.location.inPerson", defaultMessage: "ui.eventInfoDetails.location.inPerson" })
+    },
+    {
+        value: types_1.SCEventLocationFilterType.ONLINE,
+        label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventInfoDetails.location.virtual", defaultMessage: "ui.eventInfoDetails.location.virtual" })
+    }
+];
+function LocationEventsFilter(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: constants_1.PREFIX
+    });
+    const { className, value, disabled = false, autoHide = false, handleOnChange } = props;
+    if (autoHide) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), fullWidth: true }, { children: [(0, jsx_runtime_1.jsx)(material_1.InputLabel, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.events.filterByLocation", defaultMessage: "ui.events.filterByLocation" }) }), (0, jsx_runtime_1.jsx)(material_1.Select, Object.assign({ disabled: disabled, size: 'small', label: (0, jsx_runtime_1.jsx)(react_intl_1.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) => ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ value: option.value }, { children: [(0, jsx_runtime_1.jsx)(material_1.Radio, { checked: value === option.value, value: option.value, name: "radio-button-select", inputProps: { 'aria-label': option.label } }), option.label] }), option.value))) }))] })));
+}
+exports.default = LocationEventsFilter;

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

@@ -7,7 +7,6 @@ const react_intl_1 = require("react-intl");
 const system_1 = require("@mui/system");
 const constants_1 = require("./constants");
 const Events_1 = require("./Events");
-const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 function PastEventsFilter(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
@@ -16,7 +15,7 @@ function PastEventsFilter(inProps) {
     });
     const { autoHide = false, showPastEvents, handleClick, handleDeleteClick } = props, rest = tslib_1.__rest(props, ["autoHide", "showPastEvents", "handleClick", "handleDeleteClick"]);
     if (autoHide) {
-        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
+        return null;
     }
     return ((0, jsx_runtime_1.jsx)(Events_1.EventsChipRoot
     // eslint-disable-next-line @typescript-eslint/ban-ts-ignore

package/lib/cjs/components/Feed/Feed.js

@@ -37,6 +37,7 @@ const classes = {
     left: `${constants_1.PREFIX}-left`,
     leftItems: `${constants_1.PREFIX}-left-items`,
     start: `${constants_1.PREFIX}-start`,
+    headerItem: `${constants_1.PREFIX}-header-item`,
     end: `${constants_1.PREFIX}-end`,
     endMessage: `${constants_1.PREFIX}-end-message`,
     right: `${constants_1.PREFIX}-right`,
@@ -293,7 +294,7 @@ const Feed = (inProps, ref) => {
     const renderHeaderComponent = () => {
         return ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.start }, { children: !feedDataObject.previous && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [virtualScrollerMountState.current && HeaderComponent, headData.map((item) => {
                         const _itemId = `item_${itemIdGenerator(item)}`;
-                        return ((0, jsx_runtime_1.jsx)(ItemComponent, Object.assign({ id: _itemId }, itemPropsGenerator(scUserContext.user, item), ItemProps, { sx: { width: '100%' } }), _itemId));
+                        return ((0, jsx_runtime_1.jsx)(ItemComponent, Object.assign({ className: classes.headerItem, id: _itemId }, itemPropsGenerator(scUserContext.user, item), ItemProps, { sx: { width: '100%' } }), _itemId));
                     })] })) })));
     };
     /**
@@ -419,6 +420,6 @@ const Feed = (inProps, ref) => {
     if (feedDataObject.isLoadingNext && !feedDataLeft.length) {
         return ((0, jsx_runtime_1.jsx)(Skeleton_2.default, { children: [...Array(3)].map((v, i) => ((0, jsx_runtime_1.jsx)(ItemSkeleton, Object.assign({}, ItemSkeletonProps), i))) }));
     }
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, spacing: 2, id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: [advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR) ? ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(CustomAdv_1.default, Object.assign({ position: types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR }, CustomAdvProps)) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: (0, jsx_runtime_1.jsxs)(InfiniteScroll_1.default, 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: (0, jsx_runtime_1.jsx)(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: (0, jsx_runtime_1.jsx)(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: '90%', endMessage: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.end }, { children: [(0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: endMessage }) })), FooterComponent ? (0, jsx_runtime_1.jsx)(FooterComponent, Object.assign({}, FooterComponentProps)) : null] })), refreshFunction: refresh, pullDownToRefresh: true, pullDownToRefreshThreshold: 1000, pullDownToRefreshContent: null, releaseToRefreshContent: (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ variant: "outlined", className: classes.refresh }, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: refreshMessage }) })), style: { overflow: 'visible' } }, (scrollableTargetId && { scrollableTarget: scrollableTargetId }), { children: [renderHeaderComponent(), feedDataObject.count === 0 && emptyFeedPlaceholder && emptyFeedPlaceholder, (0, jsx_runtime_1.jsx)(VirtualizedScroller_1.default, Object.assign({ className: classes.leftItems, items: feedDataLeft, itemComponent: InnerItem, onMount: onScrollerMount, onScrollerStateChange: onScrollerStateChange, getItemId: getScrollItemId, preserveScrollPosition: true, preserveScrollPositionOnPrependItems: true, cacheScrollStateKey: react_core_1.SCCache.getVirtualizedScrollStateCacheKey(id), cacheScrollerPositionKey: react_core_1.SCCache.getFeedSPCacheKey(id), cacheStrategy: cacheStrategy }, (scrollableTargetId && { getScrollableContainer: () => document.getElementById(scrollableTargetId) }), VirtualizedScrollerProps))] })) })), feedDataRight.length > 0 && !hideAdvs && ((0, jsx_runtime_1.jsx)(material_1.Hidden, Object.assign({ smDown: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: (0, jsx_runtime_1.jsx)(StickyBox_1.default, Object.assign({ className: classes.right }, FeedSidebarProps, { children: (0, jsx_runtime_1.jsx)(react_1.default.Suspense, Object.assign({ fallback: (0, jsx_runtime_1.jsx)(Skeleton_1.GenericSkeleton, {}) }, { children: feedDataRight.map((d, i) => ((0, jsx_runtime_1.jsx)(d.component, Object.assign({}, d.componentProps), i))) })) })) })) })))] })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ container: true, spacing: 2, id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: [advEnabled && !hideAdvs && enabledCustomAdvPositions.includes(types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR) ? ((0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12 }, { children: (0, jsx_runtime_1.jsx)(CustomAdv_1.default, Object.assign({ position: types_1.SCCustomAdvPosition.POSITION_BELOW_TOPBAR }, CustomAdvProps)) }))) : null, (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 7 }, { children: (0, jsx_runtime_1.jsxs)(InfiniteScroll_1.default, 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: (0, jsx_runtime_1.jsx)(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), loaderPrevious: (0, jsx_runtime_1.jsx)(ItemSkeleton, Object.assign({}, ItemSkeletonProps)), scrollThreshold: '90%', endMessage: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.end }, { children: [(0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: endMessage }) })), FooterComponent ? (0, jsx_runtime_1.jsx)(FooterComponent, Object.assign({}, FooterComponentProps)) : null] })), refreshFunction: refresh, pullDownToRefresh: true, pullDownToRefreshThreshold: 1000, pullDownToRefreshContent: null, releaseToRefreshContent: (0, jsx_runtime_1.jsx)(material_1.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, (0, jsx_runtime_1.jsx)(VirtualizedScroller_1.default, Object.assign({ className: classes.leftItems, items: feedDataLeft, itemComponent: InnerItem, onMount: onScrollerMount, onScrollerStateChange: onScrollerStateChange, getItemId: getScrollItemId, preserveScrollPosition: true, preserveScrollPositionOnPrependItems: true, cacheScrollStateKey: react_core_1.SCCache.getVirtualizedScrollStateCacheKey(id), cacheScrollerPositionKey: react_core_1.SCCache.getFeedSPCacheKey(id), cacheStrategy: cacheStrategy }, (scrollableTargetId && { getScrollableContainer: () => document.getElementById(scrollableTargetId) }), VirtualizedScrollerProps))] })) })), feedDataRight.length > 0 && !hideAdvs && ((0, jsx_runtime_1.jsx)(material_1.Hidden, Object.assign({ smDown: true }, { children: (0, jsx_runtime_1.jsx)(material_1.Grid, Object.assign({ item: true, xs: 12, md: 5 }, { children: (0, jsx_runtime_1.jsx)(StickyBox_1.default, Object.assign({ className: classes.right }, FeedSidebarProps, { children: (0, jsx_runtime_1.jsx)(react_1.default.Suspense, Object.assign({ fallback: (0, jsx_runtime_1.jsx)(Skeleton_1.GenericSkeleton, {}) }, { children: feedDataRight.map((d, i) => ((0, jsx_runtime_1.jsx)(d.component, Object.assign({}, d.componentProps), i))) })) })) })) })))] })));
 };
 exports.default = (0, react_1.forwardRef)(Feed);

package/lib/cjs/components/GroupActionsMenu/index.d.ts

@@ -0,0 +1,57 @@
+import { IconButtonProps } from '@mui/material';
+import { SCGroupType } from '@selfcommunity/types';
+export interface GroupActionsMenuProps extends IconButtonProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * The group
+     */
+    group: SCGroupType;
+    /**
+     * The group id
+     */
+    groupId?: number;
+    /**
+     * Handles callback on delete confirm
+     */
+    onDeleteConfirm?: () => void;
+    /**
+     * Handles on edit success
+     */
+    onEditSuccess?: (data: SCGroupType) => any;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ * > API documentation for the Community-JS GroupActionsMenu component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {GroupActionsMenu} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCGroupActionsMenu` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroupActionsMenu-root|Styles applied to the root element.|
+ |drawerRoot|.SCGroupActionsMenu-drawer-root|Styles applied to the drawer root element.|
+ |menuRoot|.SCGroupActionsMenu-menu-root|Styles applied to the menu root element.|
+ |paper|.SCGroupActionsMenu-paper|Styles applied to the paper element.|
+ |item|.SCGroupActionsMenu-item|Styles applied to the item element.|
+
+
+ * @param inProps
+ */
+export default function GroupActionsMenu(inProps: GroupActionsMenuProps): JSX.Element;

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

@@ -0,0 +1,157 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const react_intl_1 = require("react-intl");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const react_core_1 = require("@selfcommunity/react-core");
+const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
+const api_services_1 = require("@selfcommunity/api-services");
+const utils_1 = require("@selfcommunity/utils");
+const notistack_1 = require("notistack");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
+const GroupForm_1 = tslib_1.__importDefault(require("../../components/GroupForm"));
+const GroupActionsMenu_1 = require("../../constants/GroupActionsMenu");
+const PREFIX = 'SCGroupActionsMenu';
+const classes = {
+    root: `${PREFIX}-root`,
+    drawerRoot: `${PREFIX}-drawer-root`,
+    menuRoot: `${PREFIX}-menu-root`,
+    paper: `${PREFIX}-paper`,
+    item: `${PREFIX}-item`
+};
+const Root = (0, styles_1.styled)(material_1.IconButton, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
+    name: PREFIX,
+    slot: 'DrawerRoot'
+})(() => ({}));
+const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
+    name: PREFIX,
+    slot: 'MenuRoot'
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS GroupActionsMenu component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {GroupActionsMenu} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCGroupActionsMenu` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCGroupActionsMenu-root|Styles applied to the root element.|
+ |drawerRoot|.SCGroupActionsMenu-drawer-root|Styles applied to the drawer root element.|
+ |menuRoot|.SCGroupActionsMenu-menu-root|Styles applied to the menu root element.|
+ |paper|.SCGroupActionsMenu-paper|Styles applied to the paper element.|
+ |item|.SCGroupActionsMenu-item|Styles applied to the item element.|
+
+
+ * @param inProps
+ */
+function GroupActionsMenu(inProps) {
+    var _a;
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className, group, groupId, onDeleteConfirm, onEditSuccess } = props, rest = tslib_1.__rest(props, ["className", "group", "groupId", "onDeleteConfirm", "onEditSuccess"]);
+    // STATE
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const [openConfirmDialog, setOpenConfirmDialog] = (0, react_1.useState)(false);
+    const [openEdit, setOpenEdit] = (0, react_1.useState)(false);
+    // HOOKS
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    const scRoutingContext = (0, react_core_1.useSCRouting)();
+    const scUserContext = (0, react_core_1.useSCUser)();
+    const { scGroup, setSCGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
+    const isGroupAdmin = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && ((_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
+    // HANDLERS
+    const handleOpen = (group) => {
+        setAnchorEl(group.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleEditClick = () => {
+        setOpenEdit((o) => !o);
+    };
+    const handleCloseDialog = () => {
+        setOpenConfirmDialog(false);
+        setAnchorEl(null);
+    };
+    const handleEditSuccess = (data) => {
+        setSCGroup(data);
+        onEditSuccess && onEditSuccess(data);
+    };
+    /**
+     * Handles thread deletion
+     */
+    function handleDeleteThread() {
+        api_services_1.GroupService.deleteGroup(scGroup.id)
+            .then(() => {
+            onDeleteConfirm();
+            handleCloseDialog();
+            pubsub_js_1.default.publish(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.DELETE}`, scGroup.id);
+        })
+            .catch((error) => {
+            setOpenConfirmDialog(false);
+            console.log(error);
+        });
+    }
+    /**
+     * Handles actions
+     */
+    function handleAction(action) {
+        if (action === GroupActionsMenu_1.GET_GROUP_LINK) {
+            (0, utils_1.copyTextToClipboard)(`${location.protocol}//${location.host}${scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup)}`).then(() => {
+                (0, notistack_1.enqueueSnackbar)((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.permanentLinkCopied", defaultMessage: "ui.common.permanentLinkCopied" }), {
+                    variant: 'success',
+                    autoHideDuration: 3000
+                });
+            });
+            handleClose();
+        }
+        else if (action === GroupActionsMenu_1.DELETE_GROUP) {
+            setOpenConfirmDialog(true);
+            handleClose();
+        }
+    }
+    /**
+     *
+     */
+    const renderList = () => {
+        return [
+            (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(GroupActionsMenu_1.GET_GROUP_LINK) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "link" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.item.link", defaultMessage: "ui.groupActionsMenu.item.link" })] }), "link"),
+            isGroupAdmin &&
+                scGroup.active && [
+                (0, jsx_runtime_1.jsx)(material_1.Divider, {}, "divider"),
+                isMobile && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: handleEditClick }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "edit" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.item.edit", defaultMessage: "ui.groupActionsMenu.item.edit" })] }), "edit")),
+                (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.item, onClick: () => handleAction(GroupActionsMenu_1.DELETE_GROUP) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.item.delete", defaultMessage: "ui.groupActionsMenu.item.delete" })] }), "delete")
+            ]
+        ];
+    };
+    if (!scGroup) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleOpen }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "more_vert" }) })), isMobile ? ((0, jsx_runtime_1.jsx)(SwipeableDrawerRoot, Object.assign({ className: classes.drawerRoot, anchor: "bottom", open: Boolean(anchorEl), onClose: handleClose, onOpen: handleOpen, PaperProps: { className: classes.paper }, disableSwipeToOpen: true }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: renderList() }) }))) : ((0, jsx_runtime_1.jsx)(MenuRoot, Object.assign({ className: classes.menuRoot, anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, PaperProps: { className: classes.paper } }, { children: renderList() }))), openConfirmDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openConfirmDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.dialog.msg", defaultMessage: "ui.groupActionsMenu.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupActionsMenu.dialog.confirm", defaultMessage: "ui.groupActionsMenu.dialog.confirm" }), onConfirm: handleDeleteThread, onClose: handleCloseDialog })), openEdit && (0, jsx_runtime_1.jsx)(GroupForm_1.default, { onClose: handleEditClick, group: scGroup, onSuccess: handleEditSuccess })] }));
+}
+exports.default = GroupActionsMenu;

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

@@ -3,6 +3,7 @@ import { ChangeGroupCoverProps } from '../ChangeGroupCover';
 import { ChangeGroupPictureProps } from '../ChangeGroupPicture';
 import { GroupMembersButtonProps } from '../GroupMembersButton';
 import { GroupSubscribeButtonProps } from '../GroupSubscribeButton';
+import { GroupActionsMenuProps } from '../GroupActionsMenu';
 export interface GroupHeaderProps {
     /**
      * Id of group object
@@ -44,6 +45,11 @@ export interface GroupHeaderProps {
      * @default {}
      */
     GroupMembersButtonProps?: GroupMembersButtonProps;
+    /**
+     * Props to spread event actions menu
+     * @default {}
+     */
+    GroupActionsProps?: Omit<GroupActionsMenuProps, 'group'>;
     /**
      * Any other properties
      */

package/lib/cjs/components/GroupHeader/GroupHeader.js

@@ -21,6 +21,7 @@ const GroupSubscribeButton_1 = tslib_1.__importDefault(require("../GroupSubscrib
 const GroupInviteButton_1 = tslib_1.__importDefault(require("../GroupInviteButton"));
 const PubSub_1 = require("../../constants/PubSub");
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const GroupActionsMenu_1 = tslib_1.__importDefault(require("../GroupActionsMenu"));
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     cover: `${constants_1.PREFIX}-cover`,
@@ -32,7 +33,8 @@ const classes = {
     visibility: `${constants_1.PREFIX}-visibility`,
     visibilityItem: `${constants_1.PREFIX}-visibility-item`,
     members: `${constants_1.PREFIX}-members`,
-    membersCounter: `${constants_1.PREFIX}-members-counter`
+    membersCounter: `${constants_1.PREFIX}-members-counter`,
+    multiActions: `${constants_1.PREFIX}-multi-actions`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
     name: constants_1.PREFIX,
@@ -76,7 +78,7 @@ function GroupHeader(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = null, className = null, group, groupId = null, ChangePictureProps = {}, ChangeCoverProps = {}, GroupSubscribeButtonProps = {}, GroupMembersButtonProps = {} } = props, rest = tslib_1.__rest(props, ["id", "className", "group", "groupId", "ChangePictureProps", "ChangeCoverProps", "GroupSubscribeButtonProps", "GroupMembersButtonProps"]);
+    const { id = null, className = null, group, groupId = null, ChangePictureProps = {}, ChangeCoverProps = {}, GroupSubscribeButtonProps = {}, GroupMembersButtonProps = {}, GroupActionsProps } = props, rest = tslib_1.__rest(props, ["id", "className", "group", "groupId", "ChangePictureProps", "ChangeCoverProps", "GroupSubscribeButtonProps", "GroupMembersButtonProps", "GroupActionsProps"]);
     // PREFERENCES
     const scPreferences = (0, react_core_1.useSCPreferences)();
     const visibilityEnabled = (0, react_1.useMemo)(() => scPreferences.preferences[react_core_1.SCPreferences.CONFIGURATIONS_GROUPS_VISIBILITY_ENABLED].value, [scPreferences.preferences]);
@@ -85,6 +87,8 @@ function GroupHeader(inProps) {
     const scUserContext = (0, react_core_1.useSCUser)();
     // HOOKS
     const { scGroup, setSCGroup } = (0, react_core_1.useSCFetchGroup)({ id: groupId, group });
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     // REFS
     const updatesSubscription = (0, react_1.useRef)(null);
     // CONST
@@ -147,8 +151,8 @@ function GroupHeader(inProps) {
     const _backgroundCover = Object.assign({}, (scGroup.emotional_image
         ? { background: `url('${scGroup.emotional_image}') center / cover` }
         : { background: `url('${scPreferences.preferences[react_core_1.SCPreferences.IMAGES_USER_DEFAULT_COVER].value}') center / cover` }));
-    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { children: (0, jsx_runtime_1.jsx)("img", { alt: "group", src: scGroup.image_big ? scGroup.image_big : '' }) }) })), isGroupAdmin && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangeGroupPicture_1.default, Object.assign({ groupId: scGroup.id, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.changeCover }, { children: (0, jsx_runtime_1.jsx)(ChangeGroupCover_1.default, Object.assign({ groupId: scGroup.id, onChange: handleChangeCover }, ChangeCoverProps)) }))] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [isGroupAdmin && (0, jsx_runtime_1.jsx)(EditGroupButton_1.default, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scGroup.name })), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [privateEnabled && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" })] }))) })), visibilityEnabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [privateEnabled && (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), scGroup.visible ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility_off" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" })] })))] }))] }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((scGroup && scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC) ||
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { children: (0, jsx_runtime_1.jsx)("img", { alt: "group", src: scGroup.image_big ? scGroup.image_big : '' }) }) })), isGroupAdmin && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangeGroupPicture_1.default, Object.assign({ groupId: scGroup.id, onChange: handleChangeAvatar, className: classes.changePicture }, ChangePictureProps)), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes.changeCover }, { children: (0, jsx_runtime_1.jsx)(ChangeGroupCover_1.default, Object.assign({ groupId: scGroup.id, onChange: handleChangeCover }, ChangeCoverProps)) }))] }))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [isGroupAdmin && !isMobile && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.multiActions }, { children: [(0, jsx_runtime_1.jsx)(EditGroupButton_1.default, { group: scGroup, groupId: scGroup.id, onEditSuccess: (data) => setSCGroup(data) }), (0, jsx_runtime_1.jsx)(GroupActionsMenu_1.default, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] }))), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.name }, { children: scGroup.name })), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.visibility }, { children: [privateEnabled && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.public", defaultMessage: "ui.groupHeader.visibility.public" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.private", defaultMessage: "ui.groupHeader.visibility.private" })] }))) })), visibilityEnabled && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [privateEnabled && (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), scGroup.visible ? ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.visible", defaultMessage: "ui.groupHeader.visibility.visible" })] }))) : ((0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: classes.visibilityItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility_off" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.visibility.hidden", defaultMessage: "ui.groupHeader.visibility.hidden" })] })))] }))] }))), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: ((scGroup && scGroup.privacy === types_1.SCGroupPrivacyType.PUBLIC) ||
                             scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ||
-                            isGroupAdmin) && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.members }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.membersCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } }) })), (0, jsx_runtime_1.jsx)(GroupMembersButton_1.default, Object.assign({ groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps), scGroup.subscribers_counter)] }))) }), isGroupAdmin ? ((0, jsx_runtime_1.jsx)(GroupInviteButton_1.default, { group: scGroup, groupId: scGroup.id })) : ((0, jsx_runtime_1.jsx)(GroupSubscribeButton_1.default, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps)))] }))] })));
+                            isGroupAdmin) && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.members }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.membersCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupHeader.members", defaultMessage: "ui.groupHeader.members", values: { total: scGroup.subscribers_counter } }) })), (0, jsx_runtime_1.jsx)(GroupMembersButton_1.default, Object.assign({ groupId: scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, group: scGroup, autoHide: !isGroupAdmin }, GroupMembersButtonProps), scGroup.subscribers_counter)] }))) }), isGroupAdmin ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(GroupInviteButton_1.default, { group: scGroup, groupId: scGroup.id }), isMobile && (0, jsx_runtime_1.jsx)(GroupActionsMenu_1.default, Object.assign({ group: scGroup, onEditSuccess: (data) => setSCGroup(data) }, GroupActionsProps))] })) : ((0, jsx_runtime_1.jsx)(GroupSubscribeButton_1.default, Object.assign({ group: scGroup, onSubscribe: handleSubscribe }, GroupSubscribeButtonProps)))] }))] })));
 }
 exports.default = GroupHeader;

package/lib/cjs/components/Groups/Groups.js

@@ -18,6 +18,8 @@ const constants_1 = require("./constants");
 const Group_1 = tslib_1.__importStar(require("../Group"));
 const Pagination_1 = require("../../constants/Pagination");
 const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     filters: `${constants_1.PREFIX}-filter`,
@@ -85,6 +87,8 @@ function Groups(inProps) {
         scPreferencesContext.preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value, [scPreferencesContext.preferences]);
     // CONST
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     // HANDLERS
     const handleScrollUp = () => {
         window.scrollTo({ left: 0, top: 0, behavior: 'smooth' });
@@ -121,6 +125,28 @@ function Groups(inProps) {
             fetchGroups();
         }
     }, [contentAvailability, authUserId, search]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onDeleteGroupHandler = (0, react_1.useCallback)((_msg, deleted) => {
+        setGroups((prev) => {
+            if (prev.some((e) => e.id === deleted)) {
+                return prev.filter((e) => e.id !== deleted);
+            }
+            return prev;
+        });
+    }, [groups]);
+    /**
+     * On mount, subscribe to receive event updates (only delete)
+     */
+    (0, react_1.useEffect)(() => {
+        if (groups) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.GROUP}.${PubSub_1.SCGroupEventType.DELETE}`, onDeleteGroupHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [groups]);
     const handleNext = (0, react_1.useMemo)(() => () => {
         if (!next) {
             return;

package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { DrawerProps } from '@mui/material';
+export interface NavigationMenuDrawerProps extends DrawerProps {
+    /**
+     * Hide drawer header
+     * @default true
+     */
+    showDrawerHeader?: boolean;
+    /**
+     * Custom Drawer header content
+     * @default null
+     */
+    drawerHeaderContent?: React.ReactNode;
+    /**
+     * Custom Drawer content
+     * @default null
+     */
+    drawerContent?: React.ReactNode;
+    /**
+     * Props to spread to ScrollContainer component
+     * This lib use 'react-custom-scrollbars' component to perform scrollbars
+     * For more info: https://github.com/malte-wessel/react-custom-scrollbars/blob/master/docs/API.md
+     * @default {}
+     */
+    ScrollContainerProps?: Record<string, any>;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+export default function NavigationMenuDrawer(inProps: NavigationMenuDrawerProps): JSX.Element;

package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const ScrollContainer_1 = tslib_1.__importDefault(require("../../shared/ScrollContainer"));
+const DefaultDrawerContent_1 = tslib_1.__importDefault(require("./DefaultDrawerContent"));
+const DefaultHeaderContent_1 = tslib_1.__importDefault(require("./DefaultHeaderContent"));
+const PREFIX = 'SCNavigationMenuDrawer';
+const classes = {
+    root: `${PREFIX}-root`,
+    logo: `${PREFIX}-logo`,
+    drawerRoot: `${PREFIX}-drawer-root`,
+    drawerHeader: `${PREFIX}-drawer-header`,
+    drawerHeaderAction: `${PREFIX}-drawer-header-action`,
+    drawerContent: `${PREFIX}-drawer-content`
+};
+const Root = (0, styles_1.styled)(material_1.Drawer, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+function NavigationMenuDrawer(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { className = null, showDrawerHeader = true, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, {}), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, {}), ScrollContainerProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "ScrollContainerProps", "open", "onClose"]);
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ anchor: "left", className: (0, classnames_1.default)(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) }))] })));
+}
+exports.default = NavigationMenuDrawer;