@selfcommunity/react-ui 0.8.0-embeds.17 → 0.8.1-alpha.0

package/lib/cjs/components/Categories/Categories.js

@@ -16,6 +16,8 @@ const Errors_1 = require("../../constants/Errors");
 const utils_1 = require("@selfcommunity/utils");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const constants_1 = require("./constants");
+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`,
@@ -73,6 +75,7 @@ function Categories(inProps) {
     const authUserId = scUserContext.user ? scUserContext.user.id : null;
     // REFS
     const isMountedRef = (0, react_core_1.useIsComponentMountedRef)();
+    const updatesSubscription = (0, react_1.useRef)(null);
     /**
      * Fetches categories list
      */
@@ -104,6 +107,25 @@ function Categories(inProps) {
             });
         }
     }, [contentAvailability, authUserId, prefetchedCategories.length]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onEditCategoryHandler = (0, react_1.useCallback)((_msg, edited) => {
+        setCategories((prev) => {
+            return prev.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
+        });
+    }, [categories]);
+    /**
+     * On mount, subscribe to receive event updates (only edit)
+     */
+    (0, react_1.useEffect)(() => {
+        if (categories) {
+            updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.CATEGORY}.${PubSub_1.SCCategoryEventType.EDIT}`, onEditCategoryHandler);
+        }
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [categories]);
     /**
      * Get categories filtered
      */

package/lib/cjs/components/CategoriesPopularWidget/CategoriesPopularWidget.js

@@ -20,6 +20,8 @@ const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/Hidden
 const react_core_1 = require("@selfcommunity/react-core");
 const widget_1 = require("../../utils/widget");
 const constants_1 = require("./constants");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
@@ -89,6 +91,8 @@ function CategoriesPopularWidget(inProps) {
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -106,6 +110,23 @@ function CategoriesPopularWidget(inProps) {
             });
         }
     }, [state.isLoadingNext, state.initialized, limit, dispatch]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onEditCategoryHandler = (0, react_1.useCallback)((_msg, edited) => {
+        const _categories = [...state.results];
+        const updatedCategories = _categories.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
+        dispatch({ type: widget_1.actionWidgetTypes.SET_RESULTS, payload: { results: updatedCategories } });
+    }, [dispatch]);
+    /**
+     * On mount, subscribe to receive event updates (only edit)
+     */
+    (0, react_1.useEffect)(() => {
+        updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.CATEGORY}.${PubSub_1.SCCategoryEventType.EDIT}`, onEditCategoryHandler);
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [onEditCategoryHandler]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         var _a;

package/lib/cjs/components/CategoriesSuggestionWidget/CategoriesSuggestionWidget.js

@@ -20,6 +20,8 @@ const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"))
 const Errors_1 = require("../../constants/Errors");
 const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
 const constants_1 = require("./constants");
+const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
+const PubSub_1 = require("../../constants/PubSub");
 const classes = {
     root: `${constants_1.PREFIX}-root`,
     title: `${constants_1.PREFIX}-title`,
@@ -85,6 +87,8 @@ function CategoriesSuggestionWidget(inProps) {
     // HOOKS
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
+    // REFS
+    const updatesSubscription = (0, react_1.useRef)(null);
     /**
      * Initialize component
      * Fetch data only if the component is not initialized and it is not loading data
@@ -102,6 +106,23 @@ function CategoriesSuggestionWidget(inProps) {
             });
         }
     }, [state.isLoadingNext, state.initialized, limit, dispatch]);
+    /**
+     * Subscriber for pubsub callback
+     */
+    const onEditCategoryHandler = (0, react_1.useCallback)((_msg, edited) => {
+        const _categories = [...state.results];
+        const updatedCategories = _categories.map((c) => (c.id === edited.id ? Object.assign(Object.assign({}, c), edited) : c));
+        dispatch({ type: widget_1.actionWidgetTypes.SET_RESULTS, payload: { results: updatedCategories } });
+    }, [dispatch]);
+    /**
+     * On mount, subscribe to receive event updates (only edit)
+     */
+    (0, react_1.useEffect)(() => {
+        updatesSubscription.current = pubsub_js_1.default.subscribe(`${PubSub_1.SCTopicType.CATEGORY}.${PubSub_1.SCCategoryEventType.EDIT}`, onEditCategoryHandler);
+        return () => {
+            updatesSubscription.current && pubsub_js_1.default.unsubscribe(updatesSubscription.current);
+        };
+    }, [onEditCategoryHandler]);
     // EFFECTS
     (0, react_1.useEffect)(() => {
         let _t;

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