@selfcommunity/react-ui 0.9.2-alpha.0 → 0.10.0-alpha.0

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

@@ -1,6 +1,6 @@
-import { BaseDialogProps } from '../../shared/BaseDialog';
-import { SCCategoryType } from '@selfcommunity/types';
 import { ButtonProps } from '@mui/material/Button/Button';
+import { SCCategoryType } from '@selfcommunity/types';
+import { BaseDialogProps } from '../../shared/BaseDialog';
 export interface CategoryFollowersButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {
     /**
      * Category Object

package/lib/cjs/components/CategoryFollowersButton/CategoryFollowersButton.js

@@ -2,22 +2,23 @@
 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 BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
-const react_intl_1 = require("react-intl");
-const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
-const User_1 = tslib_1.__importStar(require("../User"));
+const styles_1 = require("@mui/material/styles");
+const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
+const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
-const AvatarGroupSkeleton_1 = tslib_1.__importDefault(require("../Skeleton/AvatarGroupSkeleton"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const system_1 = require("@mui/system");
-const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
 const utils_1 = require("@selfcommunity/utils");
-const Errors_1 = require("../../constants/Errors");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
 const use_deep_compare_effect_1 = require("use-deep-compare-effect");
+const Errors_1 = require("../../constants/Errors");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
+const buttonCounters_1 = require("../../utils/buttonCounters");
+const AvatarGroupSkeleton_1 = tslib_1.__importDefault(require("../Skeleton/AvatarGroupSkeleton"));
+const User_1 = tslib_1.__importStar(require("../User"));
 const PREFIX = 'SCCategoryFollowersButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -122,9 +123,10 @@ function CategoryFollowersButton(inProps) {
     const handleToggleDialogOpen = (0, react_1.useMemo)(() => () => {
         setOpen((prev) => !prev);
     }, [setOpen]);
+    const renderSurplus = (0, react_1.useCallback)(() => (0, buttonCounters_1.numberFormatter)(scCategory.followers_counter), [scCategory]);
     // RENDER
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
-    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), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0 }, rest, { children: loading || !scCategory ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scCategory.followers_counter }, { children: followers.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
+    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), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0 }, rest, { children: loading || !scCategory ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scCategory.followers_counter, renderSurplus: renderSurplus }, { children: followers.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
 }
 exports.default = CategoryFollowersButton;

package/lib/cjs/components/EventParticipantsButton/EventParticipantsButton.js

@@ -16,6 +16,7 @@ const use_deep_compare_effect_1 = require("use-deep-compare-effect");
 const Errors_1 = require("../../constants/Errors");
 const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
 const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
+const buttonCounters_1 = require("../../utils/buttonCounters");
 const AvatarGroupSkeleton_1 = tslib_1.__importDefault(require("../Skeleton/AvatarGroupSkeleton"));
 const User_1 = tslib_1.__importStar(require("../User"));
 const PREFIX = 'SCEventParticipantsButton';
@@ -73,8 +74,8 @@ function EventParticipantsButton(inProps) {
     const [open, setOpen] = (0, react_1.useState)(false);
     // HOOKS
     const { scEvent } = (0, react_core_1.useSCFetchEvent)({ id: eventId, event });
-    const participantsAvailable = (0, react_1.useMemo)(() => scEvent.privacy === types_1.SCEventPrivacyType.PUBLIC ||
-        [types_1.SCEventSubscriptionStatusType.SUBSCRIBED, types_1.SCEventSubscriptionStatusType.GOING, types_1.SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent.subscription_status) > -1, [scEvent]);
+    const participantsAvailable = (0, react_1.useMemo)(() => (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === types_1.SCEventPrivacyType.PUBLIC ||
+        [types_1.SCEventSubscriptionStatusType.SUBSCRIBED, types_1.SCEventSubscriptionStatusType.GOING, types_1.SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1, [scEvent]);
     (0, use_deep_compare_effect_1.useDeepCompareEffectNoCheck)(() => {
         setFollowers([]);
         setLoading(true);
@@ -125,12 +126,13 @@ function EventParticipantsButton(inProps) {
             .catch((error) => utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error))
             .then(() => setLoading(false));
     }, [followers, scEvent, next]);
+    const renderSurplus = (0, react_1.useCallback)(() => (0, buttonCounters_1.numberFormatter)(followers.length), [followers]);
     /**
      * Opens dialog votes
      */
     const handleToggleDialogOpen = (0, react_1.useCallback)(() => {
         setOpen((prev) => !prev);
     }, [setOpen]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0 }, rest, { children: [!hideCaption && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), !followers.length && (loading || !scEvent) ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false })))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: followers.length }, { children: followers.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar, className: classes.avatar }, c.id))) })))] })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.dialogTitle", id: "ui.eventParticipantsButton.dialogTitle", values: { total: scEvent.goings_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventParticipantsButton.noOtherParticipants", defaultMessage: "ui.eventParticipantsButton.noOtherParticipants" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0 }, rest, { children: [!hideCaption && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), !followers.length && (loading || !scEvent) ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false })))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: followers.length, renderSurplus: renderSurplus }, { children: followers.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar, className: classes.avatar }, c.id))) })))] })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.dialogTitle", id: "ui.eventParticipantsButton.dialogTitle", values: { total: scEvent.goings_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.eventParticipantsButton.noOtherParticipants", defaultMessage: "ui.eventParticipantsButton.noOtherParticipants" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: followers.map((follower) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
 }
 exports.default = EventParticipantsButton;

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

@@ -1,6 +1,6 @@
-import { BaseDialogProps } from '../../shared/BaseDialog';
-import { SCGroupType } from '@selfcommunity/types';
 import { ButtonProps } from '@mui/material/Button/Button';
+import { SCGroupType } from '@selfcommunity/types';
+import { BaseDialogProps } from '../../shared/BaseDialog';
 export interface GroupMembersButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {
     /**
      * Group Object

package/lib/cjs/components/GroupMembersButton/GroupMembersButton.js

@@ -2,23 +2,24 @@
 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 BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
-const react_intl_1 = require("react-intl");
-const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
-const User_1 = tslib_1.__importStar(require("../User"));
+const styles_1 = require("@mui/material/styles");
+const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
+const system_1 = require("@mui/system");
 const api_services_1 = require("@selfcommunity/api-services");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
-const AvatarGroupSkeleton_1 = tslib_1.__importDefault(require("../Skeleton/AvatarGroupSkeleton"));
-const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const system_1 = require("@mui/system");
-const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
 const utils_1 = require("@selfcommunity/utils");
-const Errors_1 = require("../../constants/Errors");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("react");
+const react_intl_1 = require("react-intl");
 const use_deep_compare_effect_1 = require("use-deep-compare-effect");
+const Errors_1 = require("../../constants/Errors");
+const BaseDialog_1 = tslib_1.__importDefault(require("../../shared/BaseDialog"));
+const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
+const buttonCounters_1 = require("../../utils/buttonCounters");
+const AvatarGroupSkeleton_1 = tslib_1.__importDefault(require("../Skeleton/AvatarGroupSkeleton"));
+const User_1 = tslib_1.__importStar(require("../User"));
 const PREFIX = 'SCGroupMembersButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -28,12 +29,12 @@ const classes = {
 const Root = (0, styles_1.styled)(material_1.Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 const DialogRoot = (0, styles_1.styled)(BaseDialog_1.default, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
+    overridesResolver: (_props, styles) => styles.dialogRoot
 })(() => ({}));
 /**
  *> API documentation for the Community-JS Group Members Button component. Learn about the available props and the CSS API.
@@ -127,9 +128,10 @@ function GroupMembersButton(inProps) {
     const handleToggleDialogOpen = (0, react_1.useMemo)(() => () => {
         setOpen((prev) => !prev);
     }, [setOpen]);
+    const renderSurplus = (0, react_1.useCallback)(() => (0, buttonCounters_1.numberFormatter)(scGroup.subscribers_counter), [scGroup]);
     // RENDER
     const theme = (0, material_1.useTheme)();
     const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
-    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), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0 }, rest, { children: loading || !scGroup ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scGroup.subscribers_counter }, { children: members.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupMembersButton.dialogTitle", id: "ui.groupMembersButton.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: members.length, next: fetchMembers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersButton.noOtherMembers", defaultMessage: "ui.groupMembersButton.noOtherMembers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: members.map((member) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: member, onClick: handleToggleDialogOpen }) }, member.id))) }) })) })))] }));
+    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), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0 }, rest, { children: loading || !scGroup ? ((0, jsx_runtime_1.jsx)(AvatarGroupSkeleton_1.default, Object.assign({}, rest))) : ((0, jsx_runtime_1.jsx)(material_1.AvatarGroup, Object.assign({ total: scGroup.subscribers_counter, renderSurplus: renderSurplus }, { children: members.map((c) => ((0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && ((0, jsx_runtime_1.jsx)(DialogRoot, Object.assign({ className: classes.dialogRoot, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.groupMembersButton.dialogTitle", id: "ui.groupMembersButton.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: (0, jsx_runtime_1.jsx)(InfiniteScroll_1.default, Object.assign({ dataLength: members.length, next: fetchMembers, hasMoreNext: next !== null || loading, loaderNext: (0, jsx_runtime_1.jsx)(User_1.UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.endMessage }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupMembersButton.noOtherMembers", defaultMessage: "ui.groupMembersButton.noOtherMembers" }) })) }, { children: (0, jsx_runtime_1.jsx)(material_1.List, { children: members.map((member) => ((0, jsx_runtime_1.jsx)(material_1.ListItem, { children: (0, jsx_runtime_1.jsx)(User_1.default, { elevation: 0, user: member, onClick: handleToggleDialogOpen }) }, member.id))) }) })) })))] }));
 }
 exports.default = GroupMembersButton;

package/lib/cjs/utils/buttonCounters.d.ts

@@ -0,0 +1 @@
+export declare function numberFormatter(num: number): JSX.Element;

package/lib/cjs/utils/buttonCounters.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.numberFormatter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+function numberFormatter(num) {
+    const surplus = num - 3;
+    if (surplus > 999999) {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["+", (Math.abs(surplus) / 1000000).toFixed(1), "M"] });
+    }
+    else if (num > 999) {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["+", (Math.abs(surplus) / 1000).toFixed(1), "K"] });
+    }
+    return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["+", surplus] });
+}
+exports.numberFormatter = numberFormatter;

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

@@ -1,6 +1,6 @@
-import { BaseDialogProps } from '../../shared/BaseDialog';
-import { SCCategoryType } from '@selfcommunity/types';
 import { ButtonProps } from '@mui/material/Button/Button';
+import { SCCategoryType } from '@selfcommunity/types';
+import { BaseDialogProps } from '../../shared/BaseDialog';
 export interface CategoryFollowersButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {
     /**
      * Category Object

package/lib/esm/components/CategoryFollowersButton/CategoryFollowersButton.js

@@ -1,21 +1,22 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { Avatar, AvatarGroup, Button, List, ListItem, Typography, useTheme } from '@mui/material';
-import BaseDialog from '../../shared/BaseDialog';
-import { FormattedMessage } from 'react-intl';
-import InfiniteScroll from '../../shared/InfiniteScroll';
-import User, { UserSkeleton } from '../User';
+import { styled } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useThemeProps } from '@mui/system';
 import { CategoryService, Endpoints, http } from '@selfcommunity/api-services';
 import { useSCFetchCategory } from '@selfcommunity/react-core';
-import AvatarGroupSkeleton from '../Skeleton/AvatarGroupSkeleton';
-import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { Logger } from '@selfcommunity/utils';
-import { SCOPE_SC_UI } from '../../constants/Errors';
+import classNames from 'classnames';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import BaseDialog from '../../shared/BaseDialog';
+import InfiniteScroll from '../../shared/InfiniteScroll';
+import { numberFormatter } from '../../utils/buttonCounters';
+import AvatarGroupSkeleton from '../Skeleton/AvatarGroupSkeleton';
+import User, { UserSkeleton } from '../User';
 const PREFIX = 'SCCategoryFollowersButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -120,8 +121,9 @@ export default function CategoryFollowersButton(inProps) {
     const handleToggleDialogOpen = useMemo(() => () => {
         setOpen((prev) => !prev);
     }, [setOpen]);
+    const renderSurplus = useCallback(() => numberFormatter(scCategory.followers_counter), [scCategory]);
     // RENDER
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0 }, rest, { children: loading || !scCategory ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, Object.assign({ total: scCategory.followers_counter }, { children: followers.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scCategory || scCategory.followers_counter === 0 }, rest, { children: loading || !scCategory ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, Object.assign({ total: scCategory.followers_counter, renderSurplus: renderSurplus }, { children: followers.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.categoryFollowersButton.dialogTitle", id: "ui.categoryFollowersButton.dialogTitle", values: { total: scCategory.followers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.categoryFollowersButton.noOtherFollowers", defaultMessage: "ui.categoryFollowersButton.noOtherFollowers" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
 }

package/lib/esm/components/EventParticipantsButton/EventParticipantsButton.js

@@ -14,6 +14,7 @@ import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import BaseDialog from '../../shared/BaseDialog';
 import InfiniteScroll from '../../shared/InfiniteScroll';
+import { numberFormatter } from '../../utils/buttonCounters';
 import AvatarGroupSkeleton from '../Skeleton/AvatarGroupSkeleton';
 import User, { UserSkeleton } from '../User';
 const PREFIX = 'SCEventParticipantsButton';
@@ -71,8 +72,8 @@ export default function EventParticipantsButton(inProps) {
     const [open, setOpen] = useState(false);
     // HOOKS
     const { scEvent } = useSCFetchEvent({ id: eventId, event });
-    const participantsAvailable = useMemo(() => scEvent.privacy === SCEventPrivacyType.PUBLIC ||
-        [SCEventSubscriptionStatusType.SUBSCRIBED, SCEventSubscriptionStatusType.GOING, SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent.subscription_status) > -1, [scEvent]);
+    const participantsAvailable = useMemo(() => (scEvent === null || scEvent === void 0 ? void 0 : scEvent.privacy) === SCEventPrivacyType.PUBLIC ||
+        [SCEventSubscriptionStatusType.SUBSCRIBED, SCEventSubscriptionStatusType.GOING, SCEventSubscriptionStatusType.NOT_GOING].indexOf(scEvent === null || scEvent === void 0 ? void 0 : scEvent.subscription_status) > -1, [scEvent]);
     useDeepCompareEffectNoCheck(() => {
         setFollowers([]);
         setLoading(true);
@@ -123,11 +124,12 @@ export default function EventParticipantsButton(inProps) {
             .catch((error) => Logger.error(SCOPE_SC_UI, error))
             .then(() => setLoading(false));
     }, [followers, scEvent, next]);
+    const renderSurplus = useCallback(() => numberFormatter(followers.length), [followers]);
     /**
      * Opens dialog votes
      */
     const handleToggleDialogOpen = useCallback(() => {
         setOpen((prev) => !prev);
     }, [setOpen]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0 }, rest, { children: [!hideCaption && (_jsx(Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), !followers.length && (loading || !scEvent) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false })))) : (_jsx(AvatarGroup, Object.assign({ total: followers.length }, { children: followers.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar, className: classes.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.dialogTitle", id: "ui.eventParticipantsButton.dialogTitle", values: { total: scEvent.goings_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventParticipantsButton.noOtherParticipants", defaultMessage: "ui.eventParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scEvent || scEvent.goings_counter === 0 }, rest, { children: [!hideCaption && (_jsx(Typography, Object.assign({ className: classes.participants, variant: "caption" }, { children: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.participants", id: "ui.eventParticipantsButton.participants" }) }))), !followers.length && (loading || !scEvent) ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest, (!participantsAvailable && { skeletonsAnimation: false })))) : (_jsx(AvatarGroup, Object.assign({ total: followers.length, renderSurplus: renderSurplus }, { children: followers.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar, className: classes.avatar }, c.id))) })))] })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.eventParticipantsButton.dialogTitle", id: "ui.eventParticipantsButton.dialogTitle", values: { total: scEvent.goings_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: followers.length, next: fetchFollowers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), className: classes.infiniteScroll, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.eventParticipantsButton.noOtherParticipants", defaultMessage: "ui.eventParticipantsButton.noOtherParticipants" }) })) }, { children: _jsx(List, { children: followers.map((follower) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: follower }) }, follower.id))) }) })) })))] }));
 }

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

@@ -1,6 +1,6 @@
-import { BaseDialogProps } from '../../shared/BaseDialog';
-import { SCGroupType } from '@selfcommunity/types';
 import { ButtonProps } from '@mui/material/Button/Button';
+import { SCGroupType } from '@selfcommunity/types';
+import { BaseDialogProps } from '../../shared/BaseDialog';
 export interface GroupMembersButtonProps extends Pick<ButtonProps, Exclude<keyof ButtonProps, 'onClick' | 'disabled'>> {
     /**
      * Group Object

package/lib/esm/components/GroupMembersButton/GroupMembersButton.js

@@ -1,22 +1,23 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material/styles';
 import { Avatar, AvatarGroup, Button, List, ListItem, Typography, useTheme } from '@mui/material';
-import BaseDialog from '../../shared/BaseDialog';
-import { FormattedMessage } from 'react-intl';
-import InfiniteScroll from '../../shared/InfiniteScroll';
-import User, { UserSkeleton } from '../User';
+import { styled } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useThemeProps } from '@mui/system';
 import { Endpoints, GroupService, http } from '@selfcommunity/api-services';
 import { useSCFetchGroup } from '@selfcommunity/react-core';
 import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
-import AvatarGroupSkeleton from '../Skeleton/AvatarGroupSkeleton';
-import classNames from 'classnames';
-import { useThemeProps } from '@mui/system';
-import useMediaQuery from '@mui/material/useMediaQuery';
 import { Logger } from '@selfcommunity/utils';
-import { SCOPE_SC_UI } from '../../constants/Errors';
+import classNames from 'classnames';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { useDeepCompareEffectNoCheck } from 'use-deep-compare-effect';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import BaseDialog from '../../shared/BaseDialog';
+import InfiniteScroll from '../../shared/InfiniteScroll';
+import { numberFormatter } from '../../utils/buttonCounters';
+import AvatarGroupSkeleton from '../Skeleton/AvatarGroupSkeleton';
+import User, { UserSkeleton } from '../User';
 const PREFIX = 'SCGroupMembersButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -26,12 +27,12 @@ const classes = {
 const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    overridesResolver: (_props, styles) => styles.root
 })(() => ({}));
 const DialogRoot = styled(BaseDialog, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.dialogRoot
+    overridesResolver: (_props, styles) => styles.dialogRoot
 })(() => ({}));
 /**
  *> API documentation for the Community-JS Group Members Button component. Learn about the available props and the CSS API.
@@ -125,8 +126,9 @@ export default function GroupMembersButton(inProps) {
     const handleToggleDialogOpen = useMemo(() => () => {
         setOpen((prev) => !prev);
     }, [setOpen]);
+    const renderSurplus = useCallback(() => numberFormatter(scGroup.subscribers_counter), [scGroup]);
     // RENDER
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
-    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0 }, rest, { children: loading || !scGroup ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, Object.assign({ total: scGroup.subscribers_counter }, { children: members.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupMembersButton.dialogTitle", id: "ui.groupMembersButton.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: members.length, next: fetchMembers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersButton.noOtherMembers", defaultMessage: "ui.groupMembersButton.noOtherMembers" }) })) }, { children: _jsx(List, { children: members.map((member) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: member, onClick: handleToggleDialogOpen }) }, member.id))) }) })) })))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleToggleDialogOpen, disabled: loading || !scGroup || scGroup.subscribers_counter === 0 }, rest, { children: loading || !scGroup ? (_jsx(AvatarGroupSkeleton, Object.assign({}, rest))) : (_jsx(AvatarGroup, Object.assign({ total: scGroup.subscribers_counter, renderSurplus: renderSurplus }, { children: members.map((c) => (_jsx(Avatar, { alt: c.username, src: c.avatar }, c.id))) }))) })), open && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.groupMembersButton.dialogTitle", id: "ui.groupMembersButton.dialogTitle", values: { total: scGroup.subscribers_counter } }), onClose: handleToggleDialogOpen, open: open }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: members.length, next: fetchMembers, hasMoreNext: next !== null || loading, loaderNext: _jsx(UserSkeleton, { elevation: 0 }), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.groupMembersButton.noOtherMembers", defaultMessage: "ui.groupMembersButton.noOtherMembers" }) })) }, { children: _jsx(List, { children: members.map((member) => (_jsx(ListItem, { children: _jsx(User, { elevation: 0, user: member, onClick: handleToggleDialogOpen }) }, member.id))) }) })) })))] }));
 }

package/lib/esm/utils/buttonCounters.d.ts

@@ -0,0 +1 @@
+export declare function numberFormatter(num: number): JSX.Element;

package/lib/esm/utils/buttonCounters.js

@@ -0,0 +1,11 @@
+import { Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export function numberFormatter(num) {
+    const surplus = num - 3;
+    if (surplus > 999999) {
+        return _jsxs(_Fragment, { children: ["+", (Math.abs(surplus) / 1000000).toFixed(1), "M"] });
+    }
+    else if (num > 999) {
+        return _jsxs(_Fragment, { children: ["+", (Math.abs(surplus) / 1000).toFixed(1), "K"] });
+    }
+    return _jsxs(_Fragment, { children: ["+", surplus] });
+}