@selfcommunity/react-ui 0.7.9-alpha.49 → 0.7.9-alpha.50

package/lib/cjs/components/GroupInviteButton/GroupInviteButton.js

@@ -88,7 +88,6 @@ function GroupInviteButton(inProps) {
     const [open, setOpen] = (0, react_1.useState)(false);
     const [isSending, setIsSending] = (0, react_1.useState)(false);
     const [value, setValue] = (0, react_1.useState)('');
-    const [suggested, setSuggested] = (0, react_1.useState)([]);
     const [list, setList] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(false);
     const [invited, setInvited] = (0, react_1.useState)([]);
@@ -127,22 +126,17 @@ function GroupInviteButton(inProps) {
     const intl = (0, react_intl_1.useIntl)();
     function fetchResults() {
         setLoading(true);
-        api_services_1.GroupService.getGroupSuggestedUsers(scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, value)
-            .then((data) => {
-            setLoading(false);
-            setSuggested(data.results);
-        })
-            .catch((error) => {
-            setLoading(false);
-            utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-        });
-    }
-    function fetchGeneralResults() {
-        setLoading(true);
-        api_services_1.GroupService.getGroupsSuggestedUsers(value)
+        let service;
+        if (scGroup) {
+            service = api_services_1.GroupService.getGroupSuggestedUsers(scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, value);
+        }
+        else {
+            service = api_services_1.GroupService.getGroupsSuggestedUsers(value);
+        }
+        service
             .then((data) => {
             setLoading(false);
-            setSuggested(data.results);
+            setList(data.results);
         })
             .catch((error) => {
             setLoading(false);
@@ -150,28 +144,8 @@ function GroupInviteButton(inProps) {
         });
     }
     (0, react_1.useEffect)(() => {
-        if (scGroup === null || scGroup === void 0 ? void 0 : scGroup.id) {
-            api_services_1.GroupService.getGroupSuggestedUsers(scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, value).then((data) => {
-                setLoading(false);
-                setList(data.results);
-            });
-        }
-        else {
-            api_services_1.GroupService.getGroupsSuggestedUsers(value).then((data) => {
-                setLoading(false);
-                setList(data.results);
-            });
-        }
-    }, [scGroup === null || scGroup === void 0 ? void 0 : scGroup.id]);
-    /**
-     * If a value is entered in new message field, it fetches user suggested
-     */
-    (0, react_1.useEffect)(() => {
-        if (value && !handleInvitations) {
-            fetchResults();
-        }
-        fetchGeneralResults();
-    }, [value, handleInvitations]);
+        fetchResults();
+    }, [scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, value]);
     /**
      * Handles dialog close
      */
@@ -208,7 +182,7 @@ function GroupInviteButton(inProps) {
         switch (reason) {
             case 'input':
                 setValue(value);
-                !value && setSuggested([]);
+                !value && setList([]);
                 break;
             case 'reset':
                 setValue(value);
@@ -258,7 +232,7 @@ function GroupInviteButton(inProps) {
                 react_1.default.createElement(lab_1.LoadingButton, { size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }))) },
             react_1.default.createElement(material_1.Box, { className: classes.dialogContent },
-                react_1.default.createElement(Autocomplete_1.default, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (react_1.default.createElement(material_1.Box, Object.assign({ component: "li" }, props),
+                react_1.default.createElement(Autocomplete_1.default, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: list, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (react_1.default.createElement(material_1.Box, Object.assign({ component: "li" }, props),
                         react_1.default.createElement(material_1.Avatar, { alt: option.username, src: option.avatar }),
                         react_1.default.createElement(material_1.Typography, { ml: 1 }, option.username))), renderInput: (params) => (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
                                 react_1.default.createElement(material_1.InputAdornment, { position: "start" },

package/lib/cjs/components/GroupInvitedWidget/GroupInvitedWidget.js

@@ -70,7 +70,7 @@ const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
  * @param inProps
  */
 function GroupInvitedWidget(inProps) {
-    var _a;
+    var _a, _b;
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -165,7 +165,7 @@ function GroupInvitedWidget(inProps) {
     const onChangeGroupHandler = (0, react_1.useCallback)((_msg, newInvited) => {
         dispatch({
             type: widget_1.actionWidgetTypes.SET_RESULTS,
-            payload: { results: [...state.results, ...newInvited] }
+            payload: { results: [...state.results, ...newInvited], count: state.count + newInvited.length }
         });
     }, [scGroup, dispatch, state.results]);
     /**
@@ -206,15 +206,15 @@ function GroupInvitedWidget(inProps) {
             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.title", defaultMessage: "ui.groupInvitedWidget.title" })),
         react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(List_1.default, null, state.results.slice(0, state.visibleItems).map((user) => (react_1.default.createElement(material_1.ListItem, { key: user.id },
-                react_1.default.createElement(User_1.default, { elevation: 0, actions: react_1.default.createElement(material_1.Button, { disabled: true, variant: "outlined", size: "small" },
+                react_1.default.createElement(User_1.default, { elevation: 0, actions: react_1.default.createElement(material_1.Button, { disabled: true, size: "small" },
                         react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.status", defaultMessage: "ui.groupInvitedWidget.status" })), user: user, userId: user.id }))))),
             state.count > state.visibleItems && (react_1.default.createElement(material_1.Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.button.showMore", defaultMessage: "ui.groupInvitedWidget.button.showMore" })))),
-        openDialog && (react_1.default.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupInvitedWidget.dialogTitle", id: "ui.groupInvitedWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
+        openDialog && (react_1.default.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupInvitedWidget.dialogTitle", id: "ui.groupInvitedWidget.dialogTitle", values: { total: (_b = state === null || state === void 0 ? void 0 : state.results) === null || _b === void 0 ? void 0 : _b.length } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
             react_1.default.createElement(InfiniteScroll_1.default, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: react_1.default.createElement(User_1.UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: react_1.default.createElement(material_1.Typography, { className: classes.endMessage },
                     react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.noMoreResults", defaultMessage: "ui.groupInvitedWidget.noMoreResults" })) },
                 react_1.default.createElement(List_1.default, null, state.results.map((user) => (react_1.default.createElement(material_1.ListItem, { key: user.id },
-                    react_1.default.createElement(User_1.default, { elevation: 0, actions: react_1.default.createElement(material_1.Button, { disabled: true, variant: "outlined", size: "small" },
+                    react_1.default.createElement(User_1.default, { elevation: 0, actions: react_1.default.createElement(material_1.Button, { disabled: true, size: "small" },
                             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupInvitedWidget.status", defaultMessage: "ui.groupInvitedWidget.status" })), user: user, userId: user.id }))))))))));
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest), content));
 }

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

@@ -1,4 +1,3 @@
-import { SCGroupType } from '@selfcommunity/types';
 import { GroupProps } from '../Group';
 export interface GroupsProps {
     /**
@@ -19,17 +18,12 @@ export interface GroupsProps {
     /** If true, it means that the endpoint fetches all groups available
      * @default true
      */
-    general: boolean;
+    general?: boolean;
     /**
      * Show/Hide filters
      * @default false
      */
     showFilters?: boolean;
-    /**
-     * Override filter func
-     * @default null
-     */
-    handleFilterGroups?: (groups: SCGroupType[]) => SCGroupType[];
     /**
      * Filters component
      * @param props

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

@@ -14,7 +14,7 @@ const Errors_1 = require("../../constants/Errors");
 const system_1 = require("@mui/system");
 const HiddenPlaceholder_1 = tslib_1.__importDefault(require("../../shared/HiddenPlaceholder"));
 const constants_1 = require("./constants");
-const Group_1 = tslib_1.__importStar(require("../Group"));
+const Group_1 = tslib_1.__importDefault(require("../Group"));
 const Pagination_1 = require("../../constants/Pagination");
 const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
 const classes = {
@@ -67,12 +67,12 @@ function Groups(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { endpointQueryParams = { limit: Pagination_1.DEFAULT_PAGINATION_LIMIT, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: material_1.Box } }, showFilters = false, filters, handleFilterGroups, general = true } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "handleFilterGroups", "general"]);
+    const { endpointQueryParams = { limit: Pagination_1.DEFAULT_PAGINATION_LIMIT, offset: Pagination_1.DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: material_1.Box } }, showFilters = false, filters, general = true } = props, rest = tslib_1.__rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "general"]);
     // STATE
     const [groups, setGroups] = (0, react_1.useState)([]);
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [next, setNext] = (0, react_1.useState)(null);
-    const [filterName, setFilterName] = (0, react_1.useState)('');
+    const [search, setSearch] = (0, react_1.useState)('');
     // CONTEXT
     const scUserContext = (0, react_core_1.useSCUser)();
     const scPreferencesContext = (0, react_core_1.useSCPreferences)();
@@ -91,10 +91,10 @@ function Groups(inProps) {
     const fetchGroups = () => {
         let groupService;
         if (general) {
-            groupService = api_services_1.GroupService.searchGroups(endpointQueryParams);
+            groupService = api_services_1.GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })));
         }
         else {
-            groupService = api_services_1.GroupService.getUserGroups(endpointQueryParams);
+            groupService = api_services_1.GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })));
         }
         groupService
             .then((res) => {
@@ -116,7 +116,7 @@ function Groups(inProps) {
         else {
             fetchGroups();
         }
-    }, [contentAvailability, authUserId]);
+    }, [contentAvailability, authUserId, search]);
     const handleSubscribe = (group) => {
         if (!general) {
             const newGroups = [...groups];
@@ -144,11 +144,8 @@ function Groups(inProps) {
      * Get groups filtered
      */
     const getFilteredGroups = () => {
-        if (handleFilterGroups) {
-            return handleFilterGroups(groups);
-        }
-        if (filterName) {
-            return groups.filter((g) => g.name.toLowerCase().includes(filterName.toLowerCase()));
+        if (search) {
+            return groups.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
         }
         return groups;
     };
@@ -157,7 +154,7 @@ function Groups(inProps) {
      * @param event
      */
     const handleOnChangeFilterName = (event) => {
-        setFilterName(event.target.value);
+        setSearch(event.target.value);
     };
     /**
      * Renders groups list
@@ -165,12 +162,12 @@ function Groups(inProps) {
     const filteredGroups = (0, utils_1.sortByAttr)(getFilteredGroups(), 'order');
     const content = (react_1.default.createElement(react_1.default.Fragment, null,
         showFilters && (react_1.default.createElement(material_1.Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, md: 6 },
-            react_1.default.createElement(material_1.TextField, { fullWidth: true, value: filterName, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
+            react_1.default.createElement(material_1.TextField, { fullWidth: true, value: search, label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
         react_1.default.createElement(react_1.default.Fragment, null, !groups.length ? (react_1.default.createElement(material_1.Box, { className: classes.noResults },
             react_1.default.createElement(material_1.Typography, { variant: "h4" },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" })),
             react_1.default.createElement(material_1.Typography, { variant: "body1" },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (react_1.default.createElement(InfiniteScroll_1.default, { dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: react_1.default.createElement(Group_1.GroupSkeleton, null), endMessage: react_1.default.createElement(material_1.Typography, { component: "div", className: classes.endMessage },
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (react_1.default.createElement(InfiniteScroll_1.default, { dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: react_1.default.createElement(Skeleton_1.default, { groupsNumber: 2 }), endMessage: react_1.default.createElement(material_1.Typography, { component: "div", className: classes.endMessage },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
                         button: (chunk) => (react_1.default.createElement(material_1.Button, { color: "secondary", variant: "text", onClick: handleScrollUp }, chunk))
                     } })) },

package/lib/cjs/components/Groups/Skeleton.d.ts

@@ -9,6 +9,10 @@ export interface GroupsSkeletonProps {
      * @default null
      */
     GroupSkeletonProps?: any;
+    /**
+     * @default 10
+     */
+    groupsNumber?: number;
 }
 /**
  * > API documentation for the Community-JS Groups Skeleton component. Learn about the available props and the CSS API.

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

@@ -37,9 +37,9 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function GroupsSkeleton(inProps) {
-    const { className, GroupSkeletonProps = {} } = inProps, rest = tslib_1.__rest(inProps, ["className", "GroupSkeletonProps"]);
+    const { className, GroupSkeletonProps = {}, groupsNumber = 10 } = inProps, rest = tslib_1.__rest(inProps, ["className", "GroupSkeletonProps", "groupsNumber"]);
     return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest),
-        react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, [...Array(15)].map((category, index) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 8, md: 6, key: index },
+        react_1.default.createElement(material_1.Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, [...Array(groupsNumber)].map((category, index) => (react_1.default.createElement(material_1.Grid, { item: true, xs: 12, sm: 8, md: 6, key: index },
             react_1.default.createElement(Group_1.GroupSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, GroupSkeletonProps))))))));
 }
 exports.default = GroupsSkeleton;

package/lib/esm/components/GroupInviteButton/GroupInviteButton.js

@@ -86,7 +86,6 @@ export default function GroupInviteButton(inProps) {
     const [open, setOpen] = useState(false);
     const [isSending, setIsSending] = useState(false);
     const [value, setValue] = useState('');
-    const [suggested, setSuggested] = useState([]);
     const [list, setList] = useState([]);
     const [loading, setLoading] = useState(false);
     const [invited, setInvited] = useState([]);
@@ -125,22 +124,17 @@ export default function GroupInviteButton(inProps) {
     const intl = useIntl();
     function fetchResults() {
         setLoading(true);
-        GroupService.getGroupSuggestedUsers(scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, value)
-            .then((data) => {
-            setLoading(false);
-            setSuggested(data.results);
-        })
-            .catch((error) => {
-            setLoading(false);
-            Logger.error(SCOPE_SC_UI, error);
-        });
-    }
-    function fetchGeneralResults() {
-        setLoading(true);
-        GroupService.getGroupsSuggestedUsers(value)
+        let service;
+        if (scGroup) {
+            service = GroupService.getGroupSuggestedUsers(scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, value);
+        }
+        else {
+            service = GroupService.getGroupsSuggestedUsers(value);
+        }
+        service
             .then((data) => {
             setLoading(false);
-            setSuggested(data.results);
+            setList(data.results);
         })
             .catch((error) => {
             setLoading(false);
@@ -148,28 +142,8 @@ export default function GroupInviteButton(inProps) {
         });
     }
     useEffect(() => {
-        if (scGroup === null || scGroup === void 0 ? void 0 : scGroup.id) {
-            GroupService.getGroupSuggestedUsers(scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, value).then((data) => {
-                setLoading(false);
-                setList(data.results);
-            });
-        }
-        else {
-            GroupService.getGroupsSuggestedUsers(value).then((data) => {
-                setLoading(false);
-                setList(data.results);
-            });
-        }
-    }, [scGroup === null || scGroup === void 0 ? void 0 : scGroup.id]);
-    /**
-     * If a value is entered in new message field, it fetches user suggested
-     */
-    useEffect(() => {
-        if (value && !handleInvitations) {
-            fetchResults();
-        }
-        fetchGeneralResults();
-    }, [value, handleInvitations]);
+        fetchResults();
+    }, [scGroup === null || scGroup === void 0 ? void 0 : scGroup.id, value]);
     /**
      * Handles dialog close
      */
@@ -206,7 +180,7 @@ export default function GroupInviteButton(inProps) {
         switch (reason) {
             case 'input':
                 setValue(value);
-                !value && setSuggested([]);
+                !value && setList([]);
                 break;
             case 'reset':
                 setValue(value);
@@ -256,7 +230,7 @@ export default function GroupInviteButton(inProps) {
                 React.createElement(LoadingButton, { size: "small", color: "secondary", variant: "contained", onClick: handleSendInvitations, loading: isSending, disabled: !invited.length },
                     React.createElement(FormattedMessage, { id: "ui.groupInviteButton.dialog.button.end", defaultMessage: "ui.groupInviteButton.dialog.button.end" }))) },
             React.createElement(Box, { className: classes.dialogContent },
-                React.createElement(Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: suggested, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (React.createElement(Box, Object.assign({ component: "li" }, props),
+                React.createElement(Autocomplete, { className: classes.autocomplete, loading: loading, size: "small", multiple: true, freeSolo: true, disableClearable: true, options: list, onChange: handleChange, onInputChange: handleInputChange, inputValue: value, value: invited, getOptionLabel: (option) => (option ? option.username : '...'), isOptionEqualToValue: (option, value) => (option ? value.id === option.id : false), renderTags: () => null, renderOption: (props, option) => (React.createElement(Box, Object.assign({ component: "li" }, props),
                         React.createElement(Avatar, { alt: option.username, src: option.avatar }),
                         React.createElement(Typography, { ml: 1 }, option.username))), renderInput: (params) => (React.createElement(TextField, Object.assign({}, params, { variant: "outlined", placeholder: `${intl.formatMessage(messages.placeholder)}`, InputProps: Object.assign(Object.assign({}, params.InputProps), { className: classes.input, startAdornment: (React.createElement(React.Fragment, null,
                                 React.createElement(InputAdornment, { position: "start" },

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

@@ -68,7 +68,7 @@ const DialogRoot = styled(BaseDialog, {
  * @param inProps
  */
 export default function GroupInvitedWidget(inProps) {
-    var _a;
+    var _a, _b;
     // PROPS
     const props = useThemeProps({
         props: inProps,
@@ -163,7 +163,7 @@ export default function GroupInvitedWidget(inProps) {
     const onChangeGroupHandler = useCallback((_msg, newInvited) => {
         dispatch({
             type: actionWidgetTypes.SET_RESULTS,
-            payload: { results: [...state.results, ...newInvited] }
+            payload: { results: [...state.results, ...newInvited], count: state.count + newInvited.length }
         });
     }, [scGroup, dispatch, state.results]);
     /**
@@ -204,15 +204,15 @@ export default function GroupInvitedWidget(inProps) {
             React.createElement(FormattedMessage, { id: "ui.groupInvitedWidget.title", defaultMessage: "ui.groupInvitedWidget.title" })),
         React.createElement(React.Fragment, null,
             React.createElement(List, null, state.results.slice(0, state.visibleItems).map((user) => (React.createElement(ListItem, { key: user.id },
-                React.createElement(User, { elevation: 0, actions: React.createElement(Button, { disabled: true, variant: "outlined", size: "small" },
+                React.createElement(User, { elevation: 0, actions: React.createElement(Button, { disabled: true, size: "small" },
                         React.createElement(FormattedMessage, { id: "ui.groupInvitedWidget.status", defaultMessage: "ui.groupInvitedWidget.status" })), user: user, userId: user.id }))))),
             state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
                 React.createElement(FormattedMessage, { id: "ui.groupInvitedWidget.button.showMore", defaultMessage: "ui.groupInvitedWidget.button.showMore" })))),
-        openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.groupInvitedWidget.dialogTitle", id: "ui.groupInvitedWidget.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
+        openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.groupInvitedWidget.dialogTitle", id: "ui.groupInvitedWidget.dialogTitle", values: { total: (_b = state === null || state === void 0 ? void 0 : state.results) === null || _b === void 0 ? void 0 : _b.length } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
             React.createElement(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: React.createElement(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
                     React.createElement(FormattedMessage, { id: "ui.groupInvitedWidget.noMoreResults", defaultMessage: "ui.groupInvitedWidget.noMoreResults" })) },
                 React.createElement(List, null, state.results.map((user) => (React.createElement(ListItem, { key: user.id },
-                    React.createElement(User, { elevation: 0, actions: React.createElement(Button, { disabled: true, variant: "outlined", size: "small" },
+                    React.createElement(User, { elevation: 0, actions: React.createElement(Button, { disabled: true, size: "small" },
                             React.createElement(FormattedMessage, { id: "ui.groupInvitedWidget.status", defaultMessage: "ui.groupInvitedWidget.status" })), user: user, userId: user.id }))))))))));
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
 }

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

@@ -1,4 +1,3 @@
-import { SCGroupType } from '@selfcommunity/types';
 import { GroupProps } from '../Group';
 export interface GroupsProps {
     /**
@@ -19,17 +18,12 @@ export interface GroupsProps {
     /** If true, it means that the endpoint fetches all groups available
      * @default true
      */
-    general: boolean;
+    general?: boolean;
     /**
      * Show/Hide filters
      * @default false
      */
     showFilters?: boolean;
-    /**
-     * Override filter func
-     * @default null
-     */
-    handleFilterGroups?: (groups: SCGroupType[]) => SCGroupType[];
     /**
      * Filters component
      * @param props

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

@@ -12,7 +12,7 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import { useThemeProps } from '@mui/system';
 import HiddenPlaceholder from '../../shared/HiddenPlaceholder';
 import { PREFIX } from './constants';
-import Group, { GroupSkeleton } from '../Group';
+import Group from '../Group';
 import { DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET } from '../../constants/Pagination';
 import InfiniteScroll from '../../shared/InfiniteScroll';
 const classes = {
@@ -65,12 +65,12 @@ export default function Groups(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { endpointQueryParams = { limit: DEFAULT_PAGINATION_LIMIT, offset: DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: Box } }, showFilters = false, filters, handleFilterGroups, general = true } = props, rest = __rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "handleFilterGroups", "general"]);
+    const { endpointQueryParams = { limit: DEFAULT_PAGINATION_LIMIT, offset: DEFAULT_PAGINATION_OFFSET }, className, GroupComponentProps = { variant: 'outlined', ButtonBaseProps: { disableRipple: true, component: Box } }, showFilters = false, filters, general = true } = props, rest = __rest(props, ["endpointQueryParams", "className", "GroupComponentProps", "showFilters", "filters", "general"]);
     // STATE
     const [groups, setGroups] = useState([]);
     const [loading, setLoading] = useState(true);
     const [next, setNext] = useState(null);
-    const [filterName, setFilterName] = useState('');
+    const [search, setSearch] = useState('');
     // CONTEXT
     const scUserContext = useSCUser();
     const scPreferencesContext = useSCPreferences();
@@ -89,10 +89,10 @@ export default function Groups(inProps) {
     const fetchGroups = () => {
         let groupService;
         if (general) {
-            groupService = GroupService.searchGroups(endpointQueryParams);
+            groupService = GroupService.searchGroups(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })));
         }
         else {
-            groupService = GroupService.getUserGroups(endpointQueryParams);
+            groupService = GroupService.getUserGroups(Object.assign(Object.assign({}, endpointQueryParams), (search !== '' && { search: search })));
         }
         groupService
             .then((res) => {
@@ -114,7 +114,7 @@ export default function Groups(inProps) {
         else {
             fetchGroups();
         }
-    }, [contentAvailability, authUserId]);
+    }, [contentAvailability, authUserId, search]);
     const handleSubscribe = (group) => {
         if (!general) {
             const newGroups = [...groups];
@@ -142,11 +142,8 @@ export default function Groups(inProps) {
      * Get groups filtered
      */
     const getFilteredGroups = () => {
-        if (handleFilterGroups) {
-            return handleFilterGroups(groups);
-        }
-        if (filterName) {
-            return groups.filter((g) => g.name.toLowerCase().includes(filterName.toLowerCase()));
+        if (search) {
+            return groups.filter((g) => g.name.toLowerCase().includes(search.toLowerCase()));
         }
         return groups;
     };
@@ -155,7 +152,7 @@ export default function Groups(inProps) {
      * @param event
      */
     const handleOnChangeFilterName = (event) => {
-        setFilterName(event.target.value);
+        setSearch(event.target.value);
     };
     /**
      * Renders groups list
@@ -163,12 +160,12 @@ export default function Groups(inProps) {
     const filteredGroups = sortByAttr(getFilteredGroups(), 'order');
     const content = (React.createElement(React.Fragment, null,
         showFilters && (React.createElement(Grid, { container: true, direction: "row", justifyContent: "center", alignItems: "center", className: classes.filters }, filters ? (filters) : (React.createElement(Grid, { item: true, xs: 12, md: 6 },
-            React.createElement(TextField, { fullWidth: true, value: filterName, label: React.createElement(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
+            React.createElement(TextField, { fullWidth: true, value: search, label: React.createElement(FormattedMessage, { id: "ui.groups.filterByName", defaultMessage: "ui.groups.filterByName" }), variant: "outlined", onChange: handleOnChangeFilterName, disabled: loading }))))),
         React.createElement(React.Fragment, null, !groups.length ? (React.createElement(Box, { className: classes.noResults },
             React.createElement(Typography, { variant: "h4" },
                 React.createElement(FormattedMessage, { id: "ui.groups.noGroups.title", defaultMessage: "ui.groups.noGroups.title" })),
             React.createElement(Typography, { variant: "body1" },
-                React.createElement(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (React.createElement(InfiniteScroll, { dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: React.createElement(GroupSkeleton, null), endMessage: React.createElement(Typography, { component: "div", className: classes.endMessage },
+                React.createElement(FormattedMessage, { id: "ui.groups.noGroups.subtitle", defaultMessage: "ui.groups.noGroups.subtitle" })))) : (React.createElement(InfiniteScroll, { dataLength: groups.length, next: handleNext, hasMoreNext: Boolean(next), loaderNext: React.createElement(Skeleton, { groupsNumber: 2 }), endMessage: React.createElement(Typography, { component: "div", className: classes.endMessage },
                 React.createElement(FormattedMessage, { id: "ui.groups.endMessage", defaultMessage: "ui.groups.endMessage", values: {
                         button: (chunk) => (React.createElement(Button, { color: "secondary", variant: "text", onClick: handleScrollUp }, chunk))
                     } })) },

package/lib/esm/components/Groups/Skeleton.d.ts

@@ -9,6 +9,10 @@ export interface GroupsSkeletonProps {
      * @default null
      */
     GroupSkeletonProps?: any;
+    /**
+     * @default 10
+     */
+    groupsNumber?: number;
 }
 /**
  * > API documentation for the Community-JS Groups Skeleton component. Learn about the available props and the CSS API.

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

@@ -35,8 +35,8 @@ const Root = styled(Box, {
  *
  */
 export default function GroupsSkeleton(inProps) {
-    const { className, GroupSkeletonProps = {} } = inProps, rest = __rest(inProps, ["className", "GroupSkeletonProps"]);
+    const { className, GroupSkeletonProps = {}, groupsNumber = 10 } = inProps, rest = __rest(inProps, ["className", "GroupSkeletonProps", "groupsNumber"]);
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest),
-        React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, [...Array(15)].map((category, index) => (React.createElement(Grid, { item: true, xs: 12, sm: 8, md: 6, key: index },
+        React.createElement(Grid, { container: true, spacing: { xs: 3 }, className: classes.groups }, [...Array(groupsNumber)].map((category, index) => (React.createElement(Grid, { item: true, xs: 12, sm: 8, md: 6, key: index },
             React.createElement(GroupSkeleton, Object.assign({ elevation: 0, variant: 'outlined' }, GroupSkeletonProps))))))));
 }