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

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/components/TagAutocomplete/TagAutocomplete.d.ts

@@ -0,0 +1,44 @@
+import { TextFieldProps } from '@mui/material/TextField';
+import { AutocompleteProps } from '@mui/material';
+import { SCTagType } from '@selfcommunity/types/src/index';
+import { TagChipProps } from '../../shared/TagChip';
+export interface TagAutocompleteProps extends Pick<AutocompleteProps<SCTagType | null, any, any, any>, Exclude<keyof AutocompleteProps<SCTagType | null, any, any, any>, 'open' | 'onOpen' | 'onClose' | 'onChange' | 'filterSelectedOptions' | 'disableCloseOnSelect' | 'options' | 'getOptionLabel' | 'value' | 'selectOnFocus' | 'clearOnBlur' | 'blurOnSelect' | 'handleHomeEndKeys' | 'clearIcon' | 'noOptionsText' | 'isOptionEqualToValue' | 'renderTags' | 'renderOption' | 'renderInput'>> {
+    defaultValue: SCTagType[] | any;
+    /**
+     * The props applied to text field
+     * @default {variant: 'outlined, label: tags_label}
+     */
+    TextFieldProps?: TextFieldProps;
+    /**
+     * The props to spread to TagChip component
+     */
+    TagChipProps?: Pick<TagChipProps, Exclude<keyof TagChipProps, 'tag'>>;
+    /**
+     * Callback for change event on poll object
+     * @param value
+     */
+    onChange?: (value: any) => void;
+}
+/**
+ * > API documentation for the Community-JS Tag Autocomplete component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a bar that allows users to search (with autocomplete) for all the tags available in the application.
+ *
+ * #### Import
+ *  ```jsx
+ *  import {TagAutocomplete} from '@selfcommunity/react-ui';
+ *  ```
+ *  #### Component Name
+ *  The name `SCTagAutocomplete` can be used when providing style overrides in the theme.
+ *
+ *  #### CSS
+ *
+ *  |Rule Name|Global class|Description|
+ *  |---|---|---|
+ *  |root|.SCTagAutocomplete-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+declare const TagAutocomplete: (inProps: TagAutocompleteProps) => JSX.Element;
+export default TagAutocomplete;

package/lib/esm/components/TagAutocomplete/TagAutocomplete.js

@@ -0,0 +1,85 @@
+import { __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import parse from 'autosuggest-highlight/parse';
+import match from 'autosuggest-highlight/match';
+import { useSCFetchAddressingTagList } from '@selfcommunity/react-core';
+import { styled } from '@mui/material/styles';
+import { useThemeProps } from '@mui/system';
+import TagChip from '../../shared/TagChip';
+const PREFIX = 'SCTagAutocomplete';
+const classes = {
+    root: `${PREFIX}-root`
+};
+const Root = styled(Autocomplete, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(() => ({}));
+/**
+ * > API documentation for the Community-JS Tag Autocomplete component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a bar that allows users to search (with autocomplete) for all the tags available in the application.
+ *
+ * #### Import
+ *  ```jsx
+ *  import {TagAutocomplete} from '@selfcommunity/react-ui';
+ *  ```
+ *  #### Component Name
+ *  The name `SCTagAutocomplete` can be used when providing style overrides in the theme.
+ *
+ *  #### CSS
+ *
+ *  |Rule Name|Global class|Description|
+ *  |---|---|---|
+ *  |root|.SCTagAutocomplete-root|Styles applied to the root element.|
+ *
+ * @param inProps
+ */
+const TagAutocomplete = (inProps) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX
+    });
+    // Props
+    const { onChange, defaultValue = null, TextFieldProps = {
+        variant: 'outlined',
+        label: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.tags.label", defaultMessage: "ui.composer.layer.audience.tags.label" })
+    }, TagChipProps = {} } = props, rest = __rest(props, ["onChange", "defaultValue", "TextFieldProps", "TagChipProps"]);
+    // State
+    const [open, setOpen] = useState(false);
+    const [value, setValue] = useState(defaultValue || []);
+    // HOOKS
+    const { scAddressingTags } = useSCFetchAddressingTagList({ fetch: open });
+    useEffect(() => {
+        if (value === null) {
+            return;
+        }
+        onChange && onChange(value);
+    }, [value]);
+    // Handlers
+    const handleOpen = () => {
+        setOpen(true);
+    };
+    const handleClose = () => {
+        setOpen(false);
+    };
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+    // Render
+    return (_jsx(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, multiple: true, options: scAddressingTags || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, handleHomeEndKeys: true, clearIcon: null, noOptionsText: _jsx(FormattedMessage, { id: "ui.composer.layer.audience.tags.empty", defaultMessage: "ui.composer.layer.audience.tags.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
+            return value.map((option, index) => _jsx(TagChip, Object.assign({ tag: option }, getTagProps({ index })), option.id));
+        }, renderOption: (props, option, { selected, inputValue }) => {
+            const matches = match(option.name, inputValue);
+            const parts = parse(option.name, matches);
+            return (_jsx("li", Object.assign({}, props, { children: _jsx(TagChip, Object.assign({ tag: option, label: _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) }, TagChipProps), option.id) })));
+        }, renderInput: (params) => {
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'addressing', endAdornment: _jsx(React.Fragment, { children: params.InputProps.endAdornment }) }) })));
+        } }, rest)));
+};
+export default TagAutocomplete;

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

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

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

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

package/lib/esm/index.d.ts

@@ -106,6 +106,7 @@ import SearchDialog, { SearchDialogProps } from './components/SearchDialog';
 import { AvatarGroupSkeleton, GenericSkeleton } from './components/Skeleton';
 import SnippetNotifications, { SnippetNotificationsProps, SnippetNotificationsSkeleton } from './components/SnippetNotifications';
 import SuggestedEventsWidget, { SuggestedEventsWidgetProps, SuggestedEventsWidgetSkeleton } from './components/SuggestedEventsWidget';
+import TagAutocomplete, { TagAutocompleteProps } from './components/TagAutocomplete';
 import ToastNotifications, { ToastNotificationsProps, ToastNotificationsSkeleton } from './components/ToastNotifications';
 import User, { UserProps, UserSkeleton } from './components/User';
 import UserActionIconButton, { UserActionIconButtonProps } from './components/UserActionIconButton';
@@ -177,4 +178,4 @@ import LogoSelfCommunity from './assets/logo';
 /**
  * List all exports
  */
-export { AcceptRequestUserEventButton, AcceptRequestUserEventButtonProps, AccountChangeMailValidation, AccountChangeMailValidationProps, AccountDataPortability, AccountDataPortabilityButton, AccountDataPortabilityButtonProps, AccountDataPortabilityProps, AccountDelete, AccountDeleteButton, AccountDeleteButtonProps, AccountDeleteProps, AccountRecover, AccountRecoverProps, AccountReset, AccountResetProps, AccountVerify, AccountVerifyProps, AvatarGroupSkeleton, BaseDialog, BaseDialogProps, BaseItem, BaseItemProps, BaseLightbox, BaseLightboxProps, BottomNavigation, BottomNavigationProps, BroadcastMessages, BroadcastMessagesProps, BroadcastMessagesSkeleton, bytesToSize, Calendar, CalendarProps, Categories, CategoriesPopularWidget, CategoriesPopularWidgetSkeleton, CategoriesProps, CategoriesSkeleton, CategoriesSkeletonProps, CategoriesSuggestionWidget, CategoriesSuggestionWidgetProps, CategoriesSuggestionWidgetSkeleton, Category, CategoryAutocomplete, CategoryAutocompleteProps, CategoryFollowButton, CategoryFollowButtonProps, CategoryFollowersButton, CategoryFollowersButtonProps, CategoryHeader, CategoryHeaderProps, CategoryHeaderSkeleton, CategoryProps, CategorySkeleton, CategoryTrendingFeedWidget, CategoryTrendingFeedWidgetProps, CategoryTrendingFeedWidgetSkeleton, CategoryTrendingPeopleWidgetSkeleton, CategoryTrendingUsersWidget, CategoryTrendingUsersWidgetProps, CentralProgress, ChangeCover, ChangeCoverProps, ChangeGroupCover, ChangeGroupCoverProps, ChangeGroupPicture, ChangeGroupPictureProps, ChangePicture, ChangePictureProps, CommentObject, CommentObjectProps, CommentObjectReply, CommentObjectReplyProps, CommentObjectSkeleton, CommentsFeedObject, CommentsFeedObjectProps, CommentsFeedObjectSkeleton, CommentsObject, CommentsObjectProps, CommentsObjectSkeleton, Composer, ComposerIconButton, ComposerIconButtonProps, ComposerProps, ConfirmDialog, ConnectionUserButton, ConsentSolution, ConsentSolutionButton, ConsentSolutionButtonProps, ConsentSolutionProps, ConsentSolutionSkeleton, ContributionUtils, CreateEventButton, CreateEventButtonProps, CreateEventWidget, CreateEventWidgetProps, CreateEventWidgetSkeleton, CreateGroupButton, EventForm, EventFormProps, EventFormDialog, EventFormDialogProps, CreateGroupButtonProps, CustomAdv, CustomAdvProps, CustomAdvSkeleton, DEFAULT_FIELDS, DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PRELOAD_OFFSET_VIEWPORT, DEFAULT_WIDGETS_NUMBER, DefaultDrawerContent, DefaultDrawerContentProps, DefaultHeaderContent, DefaultHeaderContentProps, EditEventButton, EditEventButtonProps, EditGroupButton, EditGroupButtonProps, EditMediaProps, Editor, EditorProps, EditorSkeleton, EmailTextField, Event, EventActionsMenu, EventActionsMenuProps, EventHeader, EventHeaderProps, EventHeaderSkeleton, EventInfoDetails, EventInfoDetailsProps, EventInfoWidget, EventInfoWidgetProps, EventInviteButton, EventInviteButtonProps, EventLocationWidget, EventLocationWidgetProps, EventLocationWidgetSkeleton, EventMediaWidget, EventMediaWidgetProps, EventMediaWidgetSkeleton, EventMembersWidget, EventMembersWidgetProps, EventMembersWidgetSkeleton, EventParticipantsButton, EventParticipantsButtonProps, EventProps, Events, EventSkeleton, EventSkeletonProps, EventsProps, EventsSkeleton, EventsSkeletonProps, FACEBOOK_SHARE, Feed, FeedObject, FeedObjectMediaPreview, FeedObjectMediaPreviewProps, FeedObjectProps, FeedObjectSkeleton, FeedProps, FeedRef, FeedSidebarProps, FeedSkeleton, FeedUpdatesWidget, FeedUpdatesWidgetProps, FeedUpdatesWidgetSkeleton, File, FollowUserButton, FollowUserButtonProps, Footer, FooterProps, FooterSkeleton, FriendshipButtonProps, FriendshipUserButton, GenericSkeleton, getRelativeTime, getUnseenNotification, getUnseenNotificationCounter, Group, GroupActionsMenu, GroupActionsMenuProps, GroupForm, GroupFormProps, GroupHeader, GroupHeaderProps, GroupHeaderSkeleton, GroupInfoWidget, GroupInfoWidgetProps, GroupInfoWidgetSkeleton, GroupInviteButton, GroupInviteButtonProps, GroupInvitedWidget, GroupInvitedWidgetProps, GroupInvitedWidgetSkeleton, GroupMembersButton, GroupMembersButtonProps, GroupMembersWidget, GroupMembersWidgetProps, GroupMembersWidgetSkeleton, GroupProps, GroupRequestsWidget, GroupRequestsWidgetProps, GroupRequestsWidgetSkeleton, Groups, GroupSettingsIconButton, GroupSettingsIconButtonProps, GroupSkeleton, GroupsProps, GroupsSkeleton, GroupSubscribeButton, GroupSubscribeButtonProps, HiddenPlaceholder, Incubator, IncubatorDetail, IncubatorDetailProps, IncubatorListWidget, IncubatorListWidgetProps, IncubatorProps, IncubatorSubscribeButton, IncubatorSubscribeButtonProps, IncubatorSuggestionWidget, IncubatorSuggestionWidgetProps, InfiniteScroll, InlineComposerWidget, InlineComposerWidgetProps, InlineComposerWidgetSkeleton, InviteUserEventButton, InviteUserEventButtonProps, LanguageSwitcher, LEGAL_POLICIES, Lightbox, LightboxProps, Link, LINKEDIN_SHARE, LocationAutocomplete, LocationAutocompleteProps, LogoSelfCommunity, LoyaltyProgramWidget, LoyaltyProgramWidgetProps, LoyaltyProgramWidgetSkeleton, MAX_PRELOAD_OFFSET_VIEWPORT, MEDIA_EMBED_SC_LINK_TYPE, MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_EMBED_SC_SHARED_OBJECT, MEDIA_TYPE_DOCUMENT, MEDIA_TYPE_EMBED, MEDIA_TYPE_EVENT, MEDIA_TYPE_IMAGE, MEDIA_TYPE_LINK, MEDIA_TYPE_SHARE, MEDIA_TYPE_URL, MEDIA_TYPE_VIDEO, MediaChunkUploader, MediaChunkUploaderProps, MessageUploaderUtils, MetadataField, MetadataFieldProps, MIN_PRELOAD_OFFSET_VIEWPORT, MyEventsWidget, MyEventsWidgetProps, MyEventsWidgetSkeleton, NavigationMenuContent, NavigationMenuDrawer, NavigationMenuDrawerProps, NavigationMenuHeader, NavigationMenuIconButton, NavigationMenuIconButtonProps, NavigationSettingsIconButton, NavigationSettingsIconButtonProps, NavigationSettingsItem, NavigationToolbar, NavigationToolbarMobile, NavigationToolbarMobileProps, NavigationToolbarMobileSkeleton, NavigationToolbarProps, NavigationToolbarSkeleton, Notification, NotificationProps, NotificationSkeleton, OnBoardingWidget, OnBoardingWidgetProps, OnBoardingWidgetSkeleton, PasswordTextField, PhoneTextField, PlatformWidget, PlatformWidgetActionType, PlatformWidgetProps, PlatformWidgetSkeleton, PollSuggestionWidget, PollSuggestionWidgetProps, PrivateMessageComponent, PrivateMessageComponentProps, PrivateMessageComponentSkeleton, PrivateMessageEditor, PrivateMessageEditorProps, PrivateMessageEditorSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSettingsIconButtonProps, PrivateMessageSnippetItem, PrivateMessageSnippetItemProps, PrivateMessageSnippetItemSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsProps, PrivateMessageSnippetsSkeleton, PrivateMessageThread, PrivateMessageThreadItem, PrivateMessageThreadItemProps, PrivateMessageThreadItemSkeleton, PrivateMessageThreadProps, PrivateMessageThreadSkeleton, ProgressBar, ProgressBarProps, RelatedEventsWidget, RelatedEventsWidgetProps, RelatedEventsWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectsWidgetSkeleton, RelatedFeedObjectWidgetProps, ReplyComment, SCBroadcastMessageTemplateType, SCCommentsOrderBy, SCEventMembersEventType, SCEventTemplateType, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCFeedWidgetType, SCGroupMembersEventType, SCMediaChunkType, SCMediaObjectType, SCNotificationObjectTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, SearchAutocomplete, SearchAutocompleteProps, SearchDialog, SearchDialogProps, Share, SnippetNotifications, SnippetNotificationsProps, SnippetNotificationsSkeleton, StickyBox, StickyBoxComponent, StickyBoxProps, SuggestedEventsWidget, SuggestedEventsWidgetProps, SuggestedEventsWidgetSkeleton, TagChip, TagChipProps, ToastNotifications, ToastNotificationsProps, ToastNotificationsSkeleton, UrlTextField, User, UserActionIconButton, UserActionIconButtonProps, UserAvatar, UserAvatarProps, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetProps, UserConnectionsRequestsSentWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetProps, UserConnectionsRequestsWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetProps, UserConnectionsWidgetSkeleton, UserCounters, UserCountersProps, UserDeletedSnackBar, UserDeletedSnackBarProps, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetProps, UserFollowedCategoriesWidgetSkeleton, UserFollowedUsersWidget, UserFollowedUsersWidgetProps, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetProps, UserFollowersWidgetSkeleton, UserInfo, UserInfoDialog, UserInfoDialogProps, UserInfoProps, UserInfoSkeleton, UsernameTextField, UserProfileBlocked, UserProfileBlockedProps, UserProfileEdit, UserProfileEditProps, UserProfileEditSectionAccount, UserProfileEditSectionAccountProps, UserProfileEditSectionPublicInfo, UserProfileEditSectionPublicInfoProps, UserProfileEditSectionSettings, UserProfileEditSectionSettingsProps, UserProfileEditSkeleton, UserProfileHeader, UserProfileHeaderProps, UserProfileHeaderSkeleton, UserProps, UserSkeleton, UserSocialAssociation, UserSocialAssociationProps, UserSubscribedGroupsWidget, UserSubscribedGroupsWidgetProps, UserSubscribedGroupsWidgetSkeleton, UserSuggestionWidget, UserSuggestionWidgetProps, UserSuggestionWidgetSkeleton, useStickyBox, UseStickyBoxProps, VirtualScrollerItemProps, Widget, WidgetProps, X_SHARE };
+export { AcceptRequestUserEventButton, AcceptRequestUserEventButtonProps, AccountChangeMailValidation, AccountChangeMailValidationProps, AccountDataPortability, AccountDataPortabilityButton, AccountDataPortabilityButtonProps, AccountDataPortabilityProps, AccountDelete, AccountDeleteButton, AccountDeleteButtonProps, AccountDeleteProps, AccountRecover, AccountRecoverProps, AccountReset, AccountResetProps, AccountVerify, AccountVerifyProps, AvatarGroupSkeleton, BaseDialog, BaseDialogProps, BaseItem, BaseItemProps, BaseLightbox, BaseLightboxProps, BottomNavigation, BottomNavigationProps, BroadcastMessages, BroadcastMessagesProps, BroadcastMessagesSkeleton, bytesToSize, Calendar, CalendarProps, Categories, CategoriesPopularWidget, CategoriesPopularWidgetSkeleton, CategoriesProps, CategoriesSkeleton, CategoriesSkeletonProps, CategoriesSuggestionWidget, CategoriesSuggestionWidgetProps, CategoriesSuggestionWidgetSkeleton, Category, CategoryAutocomplete, CategoryAutocompleteProps, CategoryFollowButton, CategoryFollowButtonProps, CategoryFollowersButton, CategoryFollowersButtonProps, CategoryHeader, CategoryHeaderProps, CategoryHeaderSkeleton, CategoryProps, CategorySkeleton, CategoryTrendingFeedWidget, CategoryTrendingFeedWidgetProps, CategoryTrendingFeedWidgetSkeleton, CategoryTrendingPeopleWidgetSkeleton, CategoryTrendingUsersWidget, CategoryTrendingUsersWidgetProps, CentralProgress, ChangeCover, ChangeCoverProps, ChangeGroupCover, ChangeGroupCoverProps, ChangeGroupPicture, ChangeGroupPictureProps, ChangePicture, ChangePictureProps, CommentObject, CommentObjectProps, CommentObjectReply, CommentObjectReplyProps, CommentObjectSkeleton, CommentsFeedObject, CommentsFeedObjectProps, CommentsFeedObjectSkeleton, CommentsObject, CommentsObjectProps, CommentsObjectSkeleton, Composer, ComposerIconButton, ComposerIconButtonProps, ComposerProps, ConfirmDialog, ConnectionUserButton, ConsentSolution, ConsentSolutionButton, ConsentSolutionButtonProps, ConsentSolutionProps, ConsentSolutionSkeleton, ContributionUtils, CreateEventButton, CreateEventButtonProps, CreateEventWidget, CreateEventWidgetProps, CreateEventWidgetSkeleton, CreateGroupButton, EventForm, EventFormProps, EventFormDialog, EventFormDialogProps, CreateGroupButtonProps, CustomAdv, CustomAdvProps, CustomAdvSkeleton, DEFAULT_FIELDS, DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PRELOAD_OFFSET_VIEWPORT, DEFAULT_WIDGETS_NUMBER, DefaultDrawerContent, DefaultDrawerContentProps, DefaultHeaderContent, DefaultHeaderContentProps, EditEventButton, EditEventButtonProps, EditGroupButton, EditGroupButtonProps, EditMediaProps, Editor, EditorProps, EditorSkeleton, EmailTextField, Event, EventActionsMenu, EventActionsMenuProps, EventHeader, EventHeaderProps, EventHeaderSkeleton, EventInfoDetails, EventInfoDetailsProps, EventInfoWidget, EventInfoWidgetProps, EventInviteButton, EventInviteButtonProps, EventLocationWidget, EventLocationWidgetProps, EventLocationWidgetSkeleton, EventMediaWidget, EventMediaWidgetProps, EventMediaWidgetSkeleton, EventMembersWidget, EventMembersWidgetProps, EventMembersWidgetSkeleton, EventParticipantsButton, EventParticipantsButtonProps, EventProps, Events, EventSkeleton, EventSkeletonProps, EventsProps, EventsSkeleton, EventsSkeletonProps, FACEBOOK_SHARE, Feed, FeedObject, FeedObjectMediaPreview, FeedObjectMediaPreviewProps, FeedObjectProps, FeedObjectSkeleton, FeedProps, FeedRef, FeedSidebarProps, FeedSkeleton, FeedUpdatesWidget, FeedUpdatesWidgetProps, FeedUpdatesWidgetSkeleton, File, FollowUserButton, FollowUserButtonProps, Footer, FooterProps, FooterSkeleton, FriendshipButtonProps, FriendshipUserButton, GenericSkeleton, getRelativeTime, getUnseenNotification, getUnseenNotificationCounter, Group, GroupActionsMenu, GroupActionsMenuProps, GroupForm, GroupFormProps, GroupHeader, GroupHeaderProps, GroupHeaderSkeleton, GroupInfoWidget, GroupInfoWidgetProps, GroupInfoWidgetSkeleton, GroupInviteButton, GroupInviteButtonProps, GroupInvitedWidget, GroupInvitedWidgetProps, GroupInvitedWidgetSkeleton, GroupMembersButton, GroupMembersButtonProps, GroupMembersWidget, GroupMembersWidgetProps, GroupMembersWidgetSkeleton, GroupProps, GroupRequestsWidget, GroupRequestsWidgetProps, GroupRequestsWidgetSkeleton, Groups, GroupSettingsIconButton, GroupSettingsIconButtonProps, GroupSkeleton, GroupsProps, GroupsSkeleton, GroupSubscribeButton, GroupSubscribeButtonProps, HiddenPlaceholder, Incubator, IncubatorDetail, IncubatorDetailProps, IncubatorListWidget, IncubatorListWidgetProps, IncubatorProps, IncubatorSubscribeButton, IncubatorSubscribeButtonProps, IncubatorSuggestionWidget, IncubatorSuggestionWidgetProps, InfiniteScroll, InlineComposerWidget, InlineComposerWidgetProps, InlineComposerWidgetSkeleton, InviteUserEventButton, InviteUserEventButtonProps, LanguageSwitcher, LEGAL_POLICIES, Lightbox, LightboxProps, Link, LINKEDIN_SHARE, LocationAutocomplete, LocationAutocompleteProps, LogoSelfCommunity, LoyaltyProgramWidget, LoyaltyProgramWidgetProps, LoyaltyProgramWidgetSkeleton, MAX_PRELOAD_OFFSET_VIEWPORT, MEDIA_EMBED_SC_LINK_TYPE, MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_EMBED_SC_SHARED_OBJECT, MEDIA_TYPE_DOCUMENT, MEDIA_TYPE_EMBED, MEDIA_TYPE_EVENT, MEDIA_TYPE_IMAGE, MEDIA_TYPE_LINK, MEDIA_TYPE_SHARE, MEDIA_TYPE_URL, MEDIA_TYPE_VIDEO, MediaChunkUploader, MediaChunkUploaderProps, MessageUploaderUtils, MetadataField, MetadataFieldProps, MIN_PRELOAD_OFFSET_VIEWPORT, MyEventsWidget, MyEventsWidgetProps, MyEventsWidgetSkeleton, NavigationMenuContent, NavigationMenuDrawer, NavigationMenuDrawerProps, NavigationMenuHeader, NavigationMenuIconButton, NavigationMenuIconButtonProps, NavigationSettingsIconButton, NavigationSettingsIconButtonProps, NavigationSettingsItem, NavigationToolbar, NavigationToolbarMobile, NavigationToolbarMobileProps, NavigationToolbarMobileSkeleton, NavigationToolbarProps, NavigationToolbarSkeleton, Notification, NotificationProps, NotificationSkeleton, OnBoardingWidget, OnBoardingWidgetProps, OnBoardingWidgetSkeleton, PasswordTextField, PhoneTextField, PlatformWidget, PlatformWidgetActionType, PlatformWidgetProps, PlatformWidgetSkeleton, PollSuggestionWidget, PollSuggestionWidgetProps, PrivateMessageComponent, PrivateMessageComponentProps, PrivateMessageComponentSkeleton, PrivateMessageEditor, PrivateMessageEditorProps, PrivateMessageEditorSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSettingsIconButtonProps, PrivateMessageSnippetItem, PrivateMessageSnippetItemProps, PrivateMessageSnippetItemSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsProps, PrivateMessageSnippetsSkeleton, PrivateMessageThread, PrivateMessageThreadItem, PrivateMessageThreadItemProps, PrivateMessageThreadItemSkeleton, PrivateMessageThreadProps, PrivateMessageThreadSkeleton, ProgressBar, ProgressBarProps, RelatedEventsWidget, RelatedEventsWidgetProps, RelatedEventsWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectsWidgetSkeleton, RelatedFeedObjectWidgetProps, ReplyComment, SCBroadcastMessageTemplateType, SCCommentsOrderBy, SCEventMembersEventType, SCEventTemplateType, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCFeedWidgetType, SCGroupMembersEventType, SCMediaChunkType, SCMediaObjectType, SCNotificationObjectTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, SearchAutocomplete, SearchAutocompleteProps, SearchDialog, SearchDialogProps, Share, SnippetNotifications, SnippetNotificationsProps, SnippetNotificationsSkeleton, StickyBox, StickyBoxComponent, StickyBoxProps, SuggestedEventsWidget, TagAutocomplete, TagAutocompleteProps, SuggestedEventsWidgetProps, SuggestedEventsWidgetSkeleton, TagChip, TagChipProps, ToastNotifications, ToastNotificationsProps, ToastNotificationsSkeleton, UrlTextField, User, UserActionIconButton, UserActionIconButtonProps, UserAvatar, UserAvatarProps, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetProps, UserConnectionsRequestsSentWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetProps, UserConnectionsRequestsWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetProps, UserConnectionsWidgetSkeleton, UserCounters, UserCountersProps, UserDeletedSnackBar, UserDeletedSnackBarProps, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetProps, UserFollowedCategoriesWidgetSkeleton, UserFollowedUsersWidget, UserFollowedUsersWidgetProps, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetProps, UserFollowersWidgetSkeleton, UserInfo, UserInfoDialog, UserInfoDialogProps, UserInfoProps, UserInfoSkeleton, UsernameTextField, UserProfileBlocked, UserProfileBlockedProps, UserProfileEdit, UserProfileEditProps, UserProfileEditSectionAccount, UserProfileEditSectionAccountProps, UserProfileEditSectionPublicInfo, UserProfileEditSectionPublicInfoProps, UserProfileEditSectionSettings, UserProfileEditSectionSettingsProps, UserProfileEditSkeleton, UserProfileHeader, UserProfileHeaderProps, UserProfileHeaderSkeleton, UserProps, UserSkeleton, UserSocialAssociation, UserSocialAssociationProps, UserSubscribedGroupsWidget, UserSubscribedGroupsWidgetProps, UserSubscribedGroupsWidgetSkeleton, UserSuggestionWidget, UserSuggestionWidgetProps, UserSuggestionWidgetSkeleton, useStickyBox, UseStickyBoxProps, VirtualScrollerItemProps, Widget, WidgetProps, X_SHARE };

package/lib/esm/index.js

@@ -106,6 +106,7 @@ import SearchDialog from './components/SearchDialog';
 import { AvatarGroupSkeleton, GenericSkeleton } from './components/Skeleton';
 import SnippetNotifications, { SnippetNotificationsSkeleton } from './components/SnippetNotifications';
 import SuggestedEventsWidget, { SuggestedEventsWidgetSkeleton } from './components/SuggestedEventsWidget';
+import TagAutocomplete from './components/TagAutocomplete';
 import ToastNotifications, { ToastNotificationsSkeleton } from './components/ToastNotifications';
 import User, { UserSkeleton } from './components/User';
 import UserActionIconButton from './components/UserActionIconButton';
@@ -184,4 +185,4 @@ DEFAULT_PAGINATION_QUERY_PARAM_NAME, DEFAULT_PRELOAD_OFFSET_VIEWPORT, DEFAULT_WI
 /* SC UI SHARED */
 HiddenPlaceholder, Incubator, IncubatorDetail, IncubatorListWidget, IncubatorSubscribeButton, IncubatorSuggestionWidget, InfiniteScroll, InlineComposerWidget, InlineComposerWidgetSkeleton, InviteUserEventButton, LanguageSwitcher, LEGAL_POLICIES, Lightbox, Link, LINKEDIN_SHARE, LocationAutocomplete, 
 /* Assets */
-LogoSelfCommunity, LoyaltyProgramWidget, LoyaltyProgramWidgetSkeleton, MAX_PRELOAD_OFFSET_VIEWPORT, MEDIA_EMBED_SC_LINK_TYPE, MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_EMBED_SC_SHARED_OBJECT, MEDIA_TYPE_DOCUMENT, MEDIA_TYPE_EMBED, MEDIA_TYPE_EVENT, MEDIA_TYPE_IMAGE, MEDIA_TYPE_LINK, MEDIA_TYPE_SHARE, MEDIA_TYPE_URL, MEDIA_TYPE_VIDEO, MediaChunkUploader, MessageUploaderUtils, MetadataField, MIN_PRELOAD_OFFSET_VIEWPORT, MyEventsWidget, MyEventsWidgetSkeleton, NavigationMenuContent, NavigationMenuDrawer, NavigationMenuHeader, NavigationMenuIconButton, NavigationSettingsIconButton, NavigationToolbar, NavigationToolbarMobile, NavigationToolbarMobileSkeleton, NavigationToolbarSkeleton, Notification, NotificationSkeleton, OnBoardingWidget, OnBoardingWidgetSkeleton, PasswordTextField, PhoneTextField, PlatformWidget, PlatformWidgetSkeleton, PollSuggestionWidget, PrivateMessageComponent, PrivateMessageComponentSkeleton, PrivateMessageEditor, PrivateMessageEditorSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSnippetItem, PrivateMessageSnippetItemSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsSkeleton, PrivateMessageThread, PrivateMessageThreadItem, PrivateMessageThreadItemSkeleton, PrivateMessageThreadSkeleton, ProgressBar, RelatedEventsWidget, RelatedEventsWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectsWidgetSkeleton, ReplyComment, SCBroadcastMessageTemplateType, SCCommentsOrderBy, SCEventTemplateType, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCNotificationObjectTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, SearchAutocomplete, SearchDialog, Share, SnippetNotifications, SnippetNotificationsSkeleton, StickyBox, SuggestedEventsWidget, SuggestedEventsWidgetSkeleton, TagChip, ToastNotifications, ToastNotificationsSkeleton, UrlTextField, User, UserActionIconButton, UserAvatar, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetSkeleton, UserCounters, UserDeletedSnackBar, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetSkeleton, UserFollowedUsersWidget, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetSkeleton, UserInfo, UserInfoDialog, UserInfoSkeleton, UsernameTextField, UserProfileBlocked, UserProfileEdit, UserProfileEditSectionAccount, UserProfileEditSectionPublicInfo, UserProfileEditSectionSettings, UserProfileEditSkeleton, UserProfileHeader, UserProfileHeaderSkeleton, UserSkeleton, UserSocialAssociation, UserSubscribedGroupsWidget, UserSubscribedGroupsWidgetSkeleton, UserSuggestionWidget, UserSuggestionWidgetSkeleton, useStickyBox, Widget, X_SHARE };
+LogoSelfCommunity, LoyaltyProgramWidget, LoyaltyProgramWidgetSkeleton, MAX_PRELOAD_OFFSET_VIEWPORT, MEDIA_EMBED_SC_LINK_TYPE, MEDIA_EMBED_SC_SHARED_EVENT, MEDIA_EMBED_SC_SHARED_OBJECT, MEDIA_TYPE_DOCUMENT, MEDIA_TYPE_EMBED, MEDIA_TYPE_EVENT, MEDIA_TYPE_IMAGE, MEDIA_TYPE_LINK, MEDIA_TYPE_SHARE, MEDIA_TYPE_URL, MEDIA_TYPE_VIDEO, MediaChunkUploader, MessageUploaderUtils, MetadataField, MIN_PRELOAD_OFFSET_VIEWPORT, MyEventsWidget, MyEventsWidgetSkeleton, NavigationMenuContent, NavigationMenuDrawer, NavigationMenuHeader, NavigationMenuIconButton, NavigationSettingsIconButton, NavigationToolbar, NavigationToolbarMobile, NavigationToolbarMobileSkeleton, NavigationToolbarSkeleton, Notification, NotificationSkeleton, OnBoardingWidget, OnBoardingWidgetSkeleton, PasswordTextField, PhoneTextField, PlatformWidget, PlatformWidgetSkeleton, PollSuggestionWidget, PrivateMessageComponent, PrivateMessageComponentSkeleton, PrivateMessageEditor, PrivateMessageEditorSkeleton, PrivateMessageSettingsIconButton, PrivateMessageSnippetItem, PrivateMessageSnippetItemSkeleton, PrivateMessageSnippets, PrivateMessageSnippetsSkeleton, PrivateMessageThread, PrivateMessageThreadItem, PrivateMessageThreadItemSkeleton, PrivateMessageThreadSkeleton, ProgressBar, RelatedEventsWidget, RelatedEventsWidgetSkeleton, RelatedFeedObjectsWidget, RelatedFeedObjectsWidgetSkeleton, ReplyComment, SCBroadcastMessageTemplateType, SCCommentsOrderBy, SCEventTemplateType, SCFeedObjectActivitiesType, SCFeedObjectTemplateType, SCNotificationObjectTemplateType, SCUserProfileFields, SCUserProfileSettings, SCUserSocialAssociations, SearchAutocomplete, SearchDialog, Share, SnippetNotifications, SnippetNotificationsSkeleton, StickyBox, SuggestedEventsWidget, TagAutocomplete, SuggestedEventsWidgetSkeleton, TagChip, ToastNotifications, ToastNotificationsSkeleton, UrlTextField, User, UserActionIconButton, UserAvatar, UserConnectionsRequestsSentWidget, UserConnectionsRequestsSentWidgetSkeleton, UserConnectionsRequestsWidget, UserConnectionsRequestsWidgetSkeleton, UserConnectionsWidget, UserConnectionsWidgetSkeleton, UserCounters, UserDeletedSnackBar, UserFollowedCategoriesWidget, UserFollowedCategoriesWidgetSkeleton, UserFollowedUsersWidget, UserFollowedUsersWidgetSkeleton, UserFollowersWidget, UserFollowersWidgetSkeleton, UserInfo, UserInfoDialog, UserInfoSkeleton, UsernameTextField, UserProfileBlocked, UserProfileEdit, UserProfileEditSectionAccount, UserProfileEditSectionPublicInfo, UserProfileEditSectionSettings, UserProfileEditSkeleton, UserProfileHeader, UserProfileHeaderSkeleton, UserSkeleton, UserSocialAssociation, UserSubscribedGroupsWidget, UserSubscribedGroupsWidgetSkeleton, UserSuggestionWidget, UserSuggestionWidgetSkeleton, useStickyBox, Widget, X_SHARE };

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] });
+}