@selfcommunity/react-ui 0.7.56-alpha.0 → 0.8.0-alpha.1

package/lib/esm/components/FeedObject/Poll/Poll.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useState } from 'react';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Card from '@mui/material/Card';
 import { http, Endpoints } from '@selfcommunity/api-services';
@@ -147,26 +148,9 @@ export default function PollObject(props) {
     /**
      * Renders the poll object
      */
-    let objElement = React.createElement(React.Fragment, null);
+    let objElement = _jsx(_Fragment, {});
     if (pollObject) {
-        objElement = (React.createElement(React.Fragment, null,
-            React.createElement(CardHeader, { title: React.createElement(React.Fragment, null,
-                    React.createElement(Button, { className: classes.toggleButton, onClick: handleToggleCollapsedClick, "aria-expanded": collapsed, endIcon: React.createElement(Icon, { className: classNames(classes.expandIcon, { [classes.collapsedIcon]: collapsed }) }, "arrow_upward") }, collapsed ? intl.formatMessage(messages.showPoll) : intl.formatMessage(messages.hidePoll))) }),
-            React.createElement(Collapse, { in: !collapsed, timeout: "auto", unmountOnExit: true },
-                React.createElement(CardContent, null,
-                    React.createElement(Typography, { variant: "body1", className: classes.title }, obj.title),
-                    obj.expiration_at && Date.parse(obj.expiration_at) >= new Date().getTime() && (React.createElement(Typography, { variant: "body2", className: classes.expiration },
-                        `${intl.formatMessage(messages.expDate)}`,
-                        `${intl.formatDate(Date.parse(obj.expiration_at), { year: 'numeric', month: 'numeric', day: 'numeric' })}`)),
-                    obj.closed && (React.createElement(Typography, { variant: "body2", className: classes.closed },
-                        React.createElement(FormattedMessage, { id: "ui.feedObject.poll.closed", defaultMessage: "ui.feedObject.poll.closed" }))),
-                    React.createElement(List, null, choices.map((choice, index) => (React.createElement(ListItem, { key: index },
-                        React.createElement(Choice, { elevation: 0, choiceObj: choice, feedObject: disabled ? null : feedObject, votes: votes, vote: vote, isVoting: isVoting, votable: votable }))))),
-                    multipleChoices ? (React.createElement("div", { className: classes.votes },
-                        React.createElement(Icon, null, "list"),
-                        React.createElement(Typography, null, `${intl.formatMessage(messages.votes, { total: votes })}`))) : (React.createElement("div", { className: classes.voters },
-                        React.createElement(Icon, null, "people_alt"),
-                        React.createElement(Typography, null, `${intl.formatMessage(messages.voters, { total: votes })}`)))))));
+        objElement = (_jsxs(_Fragment, { children: [_jsx(CardHeader, { title: _jsx(_Fragment, { children: _jsx(Button, Object.assign({ className: classes.toggleButton, onClick: handleToggleCollapsedClick, "aria-expanded": collapsed, endIcon: _jsx(Icon, Object.assign({ className: classNames(classes.expandIcon, { [classes.collapsedIcon]: collapsed }) }, { children: "arrow_upward" })) }, { children: collapsed ? intl.formatMessage(messages.showPoll) : intl.formatMessage(messages.hidePoll) })) }) }), _jsx(Collapse, Object.assign({ in: !collapsed, timeout: "auto", unmountOnExit: true }, { children: _jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ variant: "body1", className: classes.title }, { children: obj.title })), obj.expiration_at && Date.parse(obj.expiration_at) >= new Date().getTime() && (_jsxs(Typography, Object.assign({ variant: "body2", className: classes.expiration }, { children: [`${intl.formatMessage(messages.expDate)}`, `${intl.formatDate(Date.parse(obj.expiration_at), { year: 'numeric', month: 'numeric', day: 'numeric' })}`] }))), obj.closed && (_jsx(Typography, Object.assign({ variant: "body2", className: classes.closed }, { children: _jsx(FormattedMessage, { id: "ui.feedObject.poll.closed", defaultMessage: "ui.feedObject.poll.closed" }) }))), _jsx(List, { children: choices.map((choice, index) => (_jsx(ListItem, { children: _jsx(Choice, { elevation: 0, choiceObj: choice, feedObject: disabled ? null : feedObject, votes: votes, vote: vote, isVoting: isVoting, votable: votable }) }, index))) }), multipleChoices ? (_jsxs("div", Object.assign({ className: classes.votes }, { children: [_jsx(Icon, { children: "list" }), _jsx(Typography, { children: `${intl.formatMessage(messages.votes, { total: votes })}` })] }))) : (_jsxs("div", Object.assign({ className: classes.voters }, { children: [_jsx(Icon, { children: "people_alt" }), _jsx(Typography, { children: `${intl.formatMessage(messages.voters, { total: votes })}` })] })))] }) }))] }));
     }
     useEffect(() => {
         setChoices(pollObject.choices);
@@ -174,5 +158,5 @@ export default function PollObject(props) {
     /**
      * Renders root element
      */
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), objElement));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: objElement })));
 }

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import Widget from '../Widget';
 import { styled } from '@mui/material/styles';
@@ -41,23 +42,10 @@ export default function FeedObjectSkeleton(props) {
     const theme = useTheme();
     let obj;
     if (template === SCFeedObjectTemplateType.PREVIEW || template === SCFeedObjectTemplateType.DETAIL || template === SCFeedObjectTemplateType.SEARCH) {
-        obj = (React.createElement(React.Fragment, null,
-            React.createElement(CardHeader, { avatar: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: React.createElement(Skeleton, { animation: "wave", height: 10, width: "40%" }) }),
-            React.createElement(Skeleton, { animation: "wave", variant: "rectangular", className: classes.media }),
-            React.createElement(CardContent, null,
-                React.createElement(React.Fragment, null,
-                    React.createElement(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 6 } }),
-                    React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }),
-                    React.createElement(Skeleton, { animation: "wave", height: 10, width: "60%" })))));
+        obj = (_jsxs(React.Fragment, { children: [_jsx(CardHeader, { avatar: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: _jsx(Skeleton, { animation: "wave", height: 10, width: "40%" }) }), _jsx(Skeleton, { animation: "wave", variant: "rectangular", className: classes.media }), _jsx(CardContent, { children: _jsxs(React.Fragment, { children: [_jsx(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 6 } }), _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), _jsx(Skeleton, { animation: "wave", height: 10, width: "60%" })] }) })] }));
     }
     else {
-        obj = (React.createElement(React.Fragment, null,
-            React.createElement(CardHeader, { avatar: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: React.createElement(Skeleton, { animation: "wave", height: 10, width: "40%" }) }),
-            React.createElement(CardContent, null,
-                React.createElement(React.Fragment, null,
-                    React.createElement(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 6 } }),
-                    React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }),
-                    React.createElement(Skeleton, { animation: "wave", height: 10, width: "60%", style: { marginBottom: 6 } })))));
+        obj = (_jsxs(React.Fragment, { children: [_jsx(CardHeader, { avatar: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: _jsx(Skeleton, { animation: "wave", height: 10, width: "40%" }) }), _jsx(CardContent, { children: _jsxs(React.Fragment, { children: [_jsx(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 6 } }), _jsx(Skeleton, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), _jsx(Skeleton, { animation: "wave", height: 10, width: "60%", style: { marginBottom: 6 } })] }) })] }));
     }
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, `${PREFIX}-${template}`) }, rest), obj));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, `${PREFIX}-${template}`) }, rest, { children: obj })));
 }

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

@@ -8,7 +8,7 @@ export interface FeedObjectMediaPreviewProps extends BoxProps {
     medias: SCMediaType[];
     /**
      * Media types
-     * @default 'image', 'document', 'link', 'share'
+     * @default 'image', 'document', 'link', 'share', 'Event'
      */
     mediaObjectTypes?: SCMediaObjectType[];
 }

package/lib/esm/components/FeedObjectMediaPreview/FeedObjectMediaPreview.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { useSCMediaClick } from '@selfcommunity/react-core';
@@ -56,9 +56,8 @@ export default (inProps) => {
      * The adornment prop is used to insert the controls
      * for re-editing the media at the top of the group of elements
      */
-    return (React.createElement(Root, Object.assign({ className: classNames(className, classes.root) }, rest), mediaObjectTypes.map((mediaObject) => {
-        const { displayProps = {} } = mediaObject;
-        return (React.createElement("div", { key: mediaObject.name },
-            React.createElement(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, { onMediaClick: handleMediaClick }))));
-    })));
+    return (_jsx(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: mediaObjectTypes.map((mediaObject) => {
+            const { displayProps = {} } = mediaObject;
+            return (_jsx("div", { children: _jsx(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, { onMediaClick: handleMediaClick })) }, mediaObject.name));
+        }) })));
 };

package/lib/esm/components/FeedUpdatesWidget/FeedUpdatesWidget.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Button, CardContent } from '@mui/material';
 import PubSub from 'pubsub-js';
@@ -50,7 +51,7 @@ export default function FeedUpdatesWidget(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { id = 'feed_updates', className = null, message = React.createElement(FormattedMessage, { id: "ui.feedUpdatesWidget.message", defaultMessage: "ui.feedUpdatesWidget.message" }), subscriptionChannel, subscriptionChannelUpdatesCallback = (msg, data) => true, publicationChannel = null, onHeightChange } = props, rest = __rest(props, ["id", "className", "message", "subscriptionChannel", "subscriptionChannelUpdatesCallback", "publicationChannel", "onHeightChange"]);
+    const { id = 'feed_updates', className = null, message = _jsx(FormattedMessage, { id: "ui.feedUpdatesWidget.message", defaultMessage: "ui.feedUpdatesWidget.message" }), subscriptionChannel, subscriptionChannelUpdatesCallback = (msg, data) => true, publicationChannel = null, onHeightChange } = props, rest = __rest(props, ["id", "className", "message", "subscriptionChannel", "subscriptionChannelUpdatesCallback", "publicationChannel", "onHeightChange"]);
     // STATE
     const [updates, setUpdates] = useState(false);
     // REFS
@@ -78,16 +79,12 @@ export default function FeedUpdatesWidget(inProps) {
         onHeightChange && onHeightChange();
     }, [updates]);
     if (!updates) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
     // HANDLERS
     const handleClick = () => {
         PubSub.publishSync(publicationChannel, { refresh: true });
         setUpdates(false);
     };
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest),
-        React.createElement(CardContent, null,
-            message,
-            publicationChannel && (React.createElement(Button, { variant: "text", color: "inherit", onClick: handleClick, classes: { root: classes.buttonLoadMore } },
-                React.createElement(FormattedMessage, { id: "ui.feedUpdatesWidget.reload", defaultMessage: "ui.feedUpdatesWidget.reload" }))))));
+    return (_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { children: _jsxs(CardContent, { children: [message, publicationChannel && (_jsx(Button, Object.assign({ variant: "text", color: "inherit", onClick: handleClick, classes: { root: classes.buttonLoadMore } }, { children: _jsx(FormattedMessage, { id: "ui.feedUpdatesWidget.reload", defaultMessage: "ui.feedUpdatesWidget.reload" }) })))] }) })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import GenericSkeleton from '../Skeleton/GenericSkeleton';
 import { PREFIX } from './constants';
@@ -32,5 +32,5 @@ const Root = styled(GenericSkeleton, {
  *
  */
 export default function FeedUpdatesWidgetSkeleton(props) {
-    return React.createElement(Root, Object.assign({ className: classes.root }, props));
+    return _jsx(Root, Object.assign({ className: classes.root }, props));
 }

package/lib/esm/components/FollowUserButton/FollowUserButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { LoadingButton } from '@mui/lab';
@@ -70,7 +71,7 @@ export default function FollowUserButton(inProps) {
     }, [authUserId, scFollowedManager.isFollowed]);
     const followUser = () => {
         if (!followed && UserUtils.isBlocked(scUserContext.user)) {
-            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -87,7 +88,7 @@ export default function FollowUserButton(inProps) {
                     setDisabled(true);
                 }
                 else {
-                    enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
+                    enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
                         variant: 'warning',
                         autoHideDuration: 3000
                     });
@@ -107,5 +108,5 @@ export default function FollowUserButton(inProps) {
     if (scUserContext.user && scUserContext.user.id === scUser.id) {
         return null;
     }
-    return (React.createElement(FollowButton, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? followed === null || scFollowedManager.isLoading(scUser) : null, disabled: disabled, className: classNames(classes.root, className) }, rest), scUserContext.user && followed ? (React.createElement(FormattedMessage, { defaultMessage: "ui.followUserButton.unfollow", id: "ui.followUserButton.unfollow" })) : (React.createElement(FormattedMessage, { defaultMessage: "ui.followUserButton.follow", id: "ui.followUserButton.follow" }))));
+    return (_jsx(FollowButton, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? followed === null || scFollowedManager.isLoading(scUser) : null, disabled: disabled, className: classNames(classes.root, className) }, rest, { children: scUserContext.user && followed ? (_jsx(FormattedMessage, { defaultMessage: "ui.followUserButton.unfollow", id: "ui.followUserButton.unfollow" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.followUserButton.follow", id: "ui.followUserButton.follow" })) })));
 }

package/lib/esm/components/Footer/Footer.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
 import { useThemeProps } from '@mui/system';
 import { styled } from '@mui/material/styles';
 import { Box, Button, Typography } from '@mui/material';
@@ -90,11 +91,7 @@ export default function Footer(inProps) {
      * Renders root object
      */
     if (loading) {
-        return React.createElement(FooterSkeleton, null);
+        return _jsx(FooterSkeleton, {});
     }
-    return (React.createElement(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }),
-        startActions,
-        React.createElement(Box, { className: classes.itemList }, sortByAttr(_menu.items, 'order').map((item, index) => (React.createElement(Button, { component: Link, key: item.id, className: classes.item, to: item.url, variant: "text" }, item.label)))),
-        endActions,
-        React.createElement(Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })));
+    return (_jsxs(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: [startActions, _jsx(Box, Object.assign({ className: classes.itemList }, { children: sortByAttr(_menu.items, 'order').map((item, index) => (_jsx(Button, Object.assign({ component: Link, className: classes.item, to: item.url, variant: "text" }, { children: item.label }), item.id))) })), endActions, _jsx(Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })] })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from '@mui/material/styles';
 import { Box } from '@mui/material';
 import Skeleton from '@mui/material/Skeleton';
@@ -31,7 +31,5 @@ const Root = styled(Box, {
  *
  */
 export default function FooterSkeleton(props) {
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props),
-        React.createElement(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 10 } }),
-        React.createElement(Skeleton, { animation: "wave", height: 10, width: "60%" })));
+    return (_jsxs(Root, Object.assign({ className: classes.root }, props, { children: [_jsx(Skeleton, { animation: "wave", height: 10, style: { marginBottom: 10 } }), _jsx(Skeleton, { animation: "wave", height: 10, width: "60%" })] })));
 }

package/lib/esm/components/FriendshipUserButton/FriendshipUserButton.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useEffect, useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { SCConnectionStatus } from '@selfcommunity/types';
 import classNames from 'classnames';
@@ -69,7 +70,7 @@ export default function FriendshipUserButton(inProps) {
             scContext.settings.handleAnonymousAction();
         }
         else if (UserUtils.isBlocked(scUserContext.user)) {
-            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -94,7 +95,7 @@ export default function FriendshipUserButton(inProps) {
                     setDisabled(true);
                 }
                 else {
-                    enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
+                    enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
                         variant: 'warning',
                         autoHideDuration: 3000
                     });
@@ -109,16 +110,16 @@ export default function FriendshipUserButton(inProps) {
         let _status;
         switch (status) {
             case SCConnectionStatus.CONNECTED:
-                _status = React.createElement(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.removeConnection", id: "ui.friendshipUserButton.removeConnection" });
+                _status = _jsx(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.removeConnection", id: "ui.friendshipUserButton.removeConnection" });
                 break;
             case SCConnectionStatus.CONNECTION_REQUEST_SENT:
-                _status = (React.createElement(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.cancelConnectionRequest", id: "ui.friendshipUserButton.cancelConnectionRequest" }));
+                _status = (_jsx(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.cancelConnectionRequest", id: "ui.friendshipUserButton.cancelConnectionRequest" }));
                 break;
             case SCConnectionStatus.CONNECTION_REQUEST_RECEIVED:
-                _status = React.createElement(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.acceptConnection", id: "ui.friendshipUserButton.acceptConnection" });
+                _status = _jsx(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.acceptConnection", id: "ui.friendshipUserButton.acceptConnection" });
                 break;
             default:
-                _status = React.createElement(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.requestConnection", id: "ui.friendshipUserButton.requestConnection" });
+                _status = _jsx(FormattedMessage, { defaultMessage: "ui.friendshipUserButton.requestConnection", id: "ui.friendshipUserButton.requestConnection" });
                 break;
         }
         return _status;
@@ -137,5 +138,5 @@ export default function FriendshipUserButton(inProps) {
     if (scUserContext.user && scUserContext.user.id === scUser.id) {
         return null;
     }
-    return (React.createElement(Root, Object.assign({ size: "small", variant: "outlined", disabled: disabled, loading: scUserContext.user ? scConnectionsManager.isLoading(scUser) : null, onClick: handleConnectionStatus, className: classNames(classes.root, className) }, rest), getStatus()));
+    return (_jsx(Root, Object.assign({ size: "small", variant: "outlined", disabled: disabled, loading: scUserContext.user ? scConnectionsManager.isLoading(scUser) : null, onClick: handleConnectionStatus, className: classNames(classes.root, className) }, rest, { children: getStatus() })));
 }

package/lib/esm/components/Group/Group.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Avatar, Button, Icon, Stack, useMediaQuery, useTheme } from '@mui/material';
 import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
@@ -87,25 +88,18 @@ export default function Group(inProps) {
      * @return {JSX.Element}
      */
     function renderAuthenticatedActions() {
-        return (React.createElement(Stack, { className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 },
-            isGroupAdmin && React.createElement(Icon, null, "face"),
-            actionRedirect ? (React.createElement(Button, { size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, scGroup) }, scGroup.subscription_status === SCGroupSubscriptionStatusType.SUBSCRIBED ? (React.createElement(FormattedMessage, { defaultMessage: "ui.group.status.enter", id: "ui.group.status.enter" })) : (React.createElement(FormattedMessage, { defaultMessage: "ui.group.status.discover", id: "ui.group.status.discover" })))) : (React.createElement(GroupSubscribeButton, Object.assign({ group: group, groupId: groupId }, groupSubscribeButtonProps)))));
+        return (_jsxs(Stack, Object.assign({ className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 }, { children: [isGroupAdmin && _jsx(Icon, { children: "face" }), actionRedirect ? (_jsx(Button, Object.assign({ size: "small", variant: "outlined", component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, scGroup) }, { children: scGroup.subscription_status === SCGroupSubscriptionStatusType.SUBSCRIBED ? (_jsx(FormattedMessage, { defaultMessage: "ui.group.status.enter", id: "ui.group.status.enter" })) : (_jsx(FormattedMessage, { defaultMessage: "ui.group.status.discover", id: "ui.group.status.discover" })) }))) : (_jsx(GroupSubscribeButton, Object.assign({ group: group, groupId: groupId }, groupSubscribeButtonProps)))] })));
     }
     /**
      * Renders group object
      */
     if (!scGroup) {
-        return React.createElement(GroupSkeleton, { elevation: elevation });
+        return _jsx(GroupSkeleton, { elevation: elevation });
     }
     /**
      * Renders root object
      */
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: classNames(classes.root, className), ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, scGroup) }, image: React.createElement(Avatar, { alt: scGroup.name, src: scGroup.image_medium, className: classes.avatar }), primary: React.createElement(React.Fragment, null,
-                isMobile
-                    ? formatCroppedName(scGroup.name, GROUP_NAME_MAX_LENGTH_MOBILE)
-                    : formatCroppedName(scGroup.name, GROUP_NAME_MAX_LENGTH_DESKTOP),
-                ' ',
-                React.createElement(Icon, { className: classes.icon }, (group === null || group === void 0 ? void 0 : group.privacy) === SCGroupPrivacyType.PRIVATE ? 'private' : 'public')), secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })),
-        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ elevation: elevation }, rest, { className: classNames(classes.root, className), ButtonBaseProps: { component: Link, to: scRoutingContext.url(SCRoutes.GROUP_ROUTE_NAME, scGroup) }, image: _jsx(Avatar, { alt: scGroup.name, src: scGroup.image_medium, className: classes.avatar }), primary: _jsxs(_Fragment, { children: [isMobile
+                            ? formatCroppedName(scGroup.name, GROUP_NAME_MAX_LENGTH_MOBILE)
+                            : formatCroppedName(scGroup.name, GROUP_NAME_MAX_LENGTH_DESKTOP), ' ', _jsx(Icon, Object.assign({ className: classes.icon }, { children: (group === null || group === void 0 ? void 0 : group.privacy) === SCGroupPrivacyType.PRIVATE ? 'private' : 'public' }))] }), secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Button, useTheme } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
@@ -33,6 +33,5 @@ const Root = styled(BaseItem, {
  */
 export default function GroupSkeleton(props) {
     const theme = useTheme();
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props, { image: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeSmall, height: theme.selfcommunity.group.avatar.sizeSmall }), primary: React.createElement(Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: React.createElement(Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: React.createElement(Button, { size: "small", variant: "outlined", disabled: true },
-            React.createElement(Skeleton, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } })) })));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { image: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeSmall, height: theme.selfcommunity.group.avatar.sizeSmall }), primary: _jsx(Skeleton, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: _jsx(Skeleton, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: _jsx(Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: _jsx(Skeleton, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) })) })));
 }

package/lib/esm/components/GroupAutocomplete/GroupAutocomplete.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import Autocomplete from '@mui/material/Autocomplete';
@@ -48,7 +49,7 @@ const GroupAutocomplete = (inProps) => {
     // Props
     const { onChange, defaultValue = null, disabled = false, TextFieldProps = {
         variant: 'outlined',
-        label: React.createElement(FormattedMessage, { id: "ui.groupAutocomplete.label", defaultMessage: "ui.groupAutocomplete.label" })
+        label: _jsx(FormattedMessage, { id: "ui.groupAutocomplete.label", defaultMessage: "ui.groupAutocomplete.label" })
     } } = props, rest = __rest(props, ["onChange", "defaultValue", "disabled", "TextFieldProps"]);
     // State
     const [open, setOpen] = useState(false);
@@ -77,7 +78,7 @@ const GroupAutocomplete = (inProps) => {
         setValue(value);
     };
     // Render
-    return (React.createElement(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: groups || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: React.createElement(FormattedMessage, { id: "ui.groupAutocomplete.empty", defaultMessage: "ui.groupAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, 
+    return (_jsx(Root, Object.assign({ className: classes.root, open: open, onOpen: handleOpen, onClose: handleClose, options: groups || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.groupAutocomplete.empty", defaultMessage: "ui.groupAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, 
         // renderTags={(value, getTagProps) => {
         //   return value.map((option: any, index) => (
         //     <Chip key={option.id} id={option.id} label={option.name} color={option.color} {...getTagProps({index})} />
@@ -86,13 +87,9 @@ const GroupAutocomplete = (inProps) => {
         renderOption: (props, option, { inputValue }) => {
             const matches = match(option.name, inputValue);
             const parts = parse(option.name, matches);
-            return (React.createElement(Box, Object.assign({ component: "li" }, props),
-                React.createElement(Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }),
-                React.createElement(React.Fragment, null, parts.map((part, index) => (React.createElement(Typography, { key: index, sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, part.text))))));
+            return (_jsxs(Box, Object.assign({ component: "li" }, props, { children: [_jsx(Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }), _jsx(React.Fragment, { children: parts.map((part, index) => (_jsx(Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, { children: part.text }), index))) })] })));
         }, renderInput: (params) => {
-            return (React.createElement(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'groups', endAdornment: (React.createElement(React.Fragment, null,
-                        isLoading ? React.createElement(CircularProgress, { color: "inherit", size: 20 }) : null,
-                        params.InputProps.endAdornment)) }) })));
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'groups', endAdornment: (_jsxs(React.Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
         } }, rest)));
 };
 export default GroupAutocomplete;

package/lib/esm/components/GroupForm/GroupForm.js

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useMemo, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
 import { useThemeProps } from '@mui/system';
 import { styled } from '@mui/material/styles';
 import { Avatar, Box, Divider, FormGroup, Icon, Paper, Stack, Switch, TextField, Typography } from '@mui/material';
@@ -18,7 +19,7 @@ import { SCGroupPrivacyType } from '@selfcommunity/types';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { formatHttpErrorCode, GroupService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
-import { SCEventType, SCTopicType } from '../../constants/PubSub';
+import { SCGroupEventType, SCTopicType } from '../../constants/PubSub';
 const messages = defineMessages({
     name: {
         id: 'ui.groupForm.name.placeholder',
@@ -153,11 +154,11 @@ export default function GroupForm(inProps) {
         if (data) {
             if (group) {
                 // Edit group
-                PubSub.publish(`${SCTopicType.GROUP}.${SCEventType.EDIT}`, data);
+                PubSub.publish(`${SCTopicType.GROUP}.${SCGroupEventType.EDIT}`, data);
             }
             else {
                 // Create group
-                PubSub.publish(`${SCTopicType.GROUP}.${SCEventType.CREATE}`, data);
+                PubSub.publish(`${SCTopicType.GROUP}.${SCGroupEventType.CREATE}`, data);
             }
         }
     }
@@ -217,80 +218,40 @@ export default function GroupForm(inProps) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (React.createElement(FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (React.createElement(FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className), actions: React.createElement(LoadingButton, { loading: field.isSubmitting, disabled: !field.name ||
+    return (_jsx(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: classNames(classes.root, className), actions: _jsx(LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                 Object.keys(error).length !== 0 ||
                 field.name.length > GROUP_TITLE_MAX_LENGTH ||
-                field.name.description > GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, group ? (React.createElement(FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (React.createElement(FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" }))) }, rest),
-        React.createElement(React.Fragment, null,
-            React.createElement(React.Fragment, null,
-                React.createElement(Paper, { style: _backgroundCover, classes: { root: classes.cover } },
-                    React.createElement(Box, { className: classes.avatar },
-                        React.createElement(Avatar, null, field.imageOriginal ? React.createElement("img", { src: field.imageOriginal, alt: "avatar" }) : React.createElement(Icon, null, "icon_image"))),
-                    React.createElement(React.Fragment, null,
-                        React.createElement(ChangeGroupPicture, { isCreationMode: true, onChange: handleChangeAvatar }),
-                        React.createElement(ChangeGroupCover, { isCreationMode: true, onChange: handleChangeCover }))),
-                React.createElement(Typography, { className: classNames(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, error.emotionalImageOriginalError || error.imageOriginalError ? (React.createElement(FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : (React.createElement(FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })))),
-            React.createElement(FormGroup, { className: classes.form },
-                React.createElement(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
-                        endAdornment: React.createElement(Typography, { variant: "body2" }, GROUP_TITLE_MAX_LENGTH - field.name.length)
-                    }, error: Boolean(((_a = field === null || field === void 0 ? void 0 : field.name) === null || _a === void 0 ? void 0 : _a.length) > GROUP_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > GROUP_TITLE_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }),
-                React.createElement(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                        endAdornment: (React.createElement(Typography, { variant: "body2" }, ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : GROUP_DESCRIPTION_MAX_LENGTH))
-                    }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > GROUP_DESCRIPTION_MAX_LENGTH ? (React.createElement(FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }),
-                privateEnabled && (React.createElement(Box, { className: classes.privacySection },
-                    React.createElement(Typography, { variant: "h4" },
-                        React.createElement(FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                b: (chunks) => React.createElement("strong", null, chunks)
-                            } })),
-                    React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
-                        React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) },
-                            React.createElement(Icon, null, "private"),
-                            React.createElement(FormattedMessage, { id: "ui.groupForm.privacy.private", defaultMessage: "ui.groupForm.privacy.private" })),
-                        React.createElement(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: group && group.privacy === SCGroupPrivacyType.PRIVATE }),
-                        React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) },
-                            React.createElement(Icon, null, "public"),
-                            React.createElement(FormattedMessage, { id: "ui.groupForm.privacy.public", defaultMessage: "ui.groupForm.privacy.public" }))),
-                    React.createElement(Typography, { variant: "body2", className: classes.privacySectionInfo }, field.isPublic ? (React.createElement(FormattedMessage, { id: "ui.groupForm.privacy.public.info", defaultMessage: "ui.groupForm.privacy.public.info", values: {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
-                            b: (chunks) => React.createElement("strong", null, chunks)
-                        } })) : (React.createElement(React.Fragment, null, group && group.privacy === SCGroupPrivacyType.PRIVATE ? (React.createElement(FormattedMessage, { id: "ui.groupForm.privacy.private.info.edit", defaultMessage: "ui.groupForm.private.public.info.edit", values: {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
-                            b: (chunks) => React.createElement("strong", null, chunks)
-                        } })) : (React.createElement(FormattedMessage, { id: "ui.groupForm.privacy.private.info", defaultMessage: "ui.groupForm.private.public.info", values: {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
-                            b: (chunks) => React.createElement("strong", null, chunks)
-                        } }))))))),
-                privateEnabled && visibilityEnabled && (React.createElement(Box, { className: classes.visibilitySection }, ((!field.isPublic && !group) || (group && !field.isPublic)) && (React.createElement(React.Fragment, null,
-                    React.createElement(Typography, { variant: "h4" },
-                        React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.title", defaultMessage: "ui.groupForm.visibility.title", values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                b: (chunks) => React.createElement("strong", null, chunks)
-                            } })),
-                    React.createElement(Stack, { direction: "row", spacing: 1, alignItems: "center" },
-                        React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: !field.isVisible }) },
-                            React.createElement(Icon, null, "visibility_off"),
-                            React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })),
-                        React.createElement(Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }),
-                        React.createElement(Typography, { className: classNames(classes.switchLabel, { [classes.active]: field.isVisible }) },
-                            React.createElement(Icon, null, "visibility"),
-                            React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" }))),
-                    React.createElement(Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !field.isVisible ? (React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
-                            b: (chunks) => React.createElement("strong", null, chunks)
-                        } })) : (React.createElement(FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
-                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                            // @ts-ignore
-                            b: (chunks) => React.createElement("strong", null, chunks)
-                        } })))))))),
-            !group && (React.createElement(React.Fragment, null,
-                React.createElement(Divider, null),
-                React.createElement(Box, { className: classes.inviteSection },
-                    React.createElement(GroupInviteButton, { handleInvitations: handleInviteSection })))))));
+                field.name.description > GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: group ? (_jsx(FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" })) })) }, rest, { children: _jsxs(_Fragment, { children: [_jsxs(_Fragment, { children: [_jsxs(Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [_jsx(Box, Object.assign({ className: classes.avatar }, { children: _jsx(Avatar, { children: field.imageOriginal ? _jsx("img", { src: field.imageOriginal, alt: "avatar" }) : _jsx(Icon, { children: "icon_image" }) }) })), _jsxs(_Fragment, { children: [_jsx(ChangeGroupPicture, { isCreationMode: true, onChange: handleChangeAvatar }), _jsx(ChangeGroupCover, { isCreationMode: true, onChange: handleChangeCover })] })] })), _jsx(Typography, Object.assign({ className: classNames(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, { children: error.emotionalImageOriginalError || error.imageOriginalError ? (_jsx(FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : (_jsx(FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })) }))] }), _jsxs(FormGroup, Object.assign({ className: classes.form }, { children: [_jsx(TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+                                endAdornment: _jsx(Typography, Object.assign({ variant: "body2" }, { children: GROUP_TITLE_MAX_LENGTH - field.name.length }))
+                            }, error: Boolean(((_a = field === null || field === void 0 ? void 0 : field.name) === null || _a === void 0 ? void 0 : _a.length) > GROUP_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > GROUP_TITLE_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }), _jsx(TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                                endAdornment: (_jsx(Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : GROUP_DESCRIPTION_MAX_LENGTH })))
+                            }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > GROUP_DESCRIPTION_MAX_LENGTH ? (_jsx(FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }), privateEnabled && (_jsxs(Box, Object.assign({ className: classes.privacySection }, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.privacy.title", defaultMessage: "ui.groupForm.privacy.title", values: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                            // @ts-ignore
+                                            b: (chunks) => _jsx("strong", { children: chunks })
+                                        } }) })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [_jsx(Icon, { children: "private" }), _jsx(FormattedMessage, { id: "ui.groupForm.privacy.private", defaultMessage: "ui.groupForm.privacy.private" })] })), _jsx(Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: group && group.privacy === SCGroupPrivacyType.PRIVATE }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [_jsx(Icon, { children: "public" }), _jsx(FormattedMessage, { id: "ui.groupForm.privacy.public", defaultMessage: "ui.groupForm.privacy.public" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.privacySectionInfo }, { children: field.isPublic ? (_jsx(FormattedMessage, { id: "ui.groupForm.privacy.public.info", defaultMessage: "ui.groupForm.privacy.public.info", values: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                            // @ts-ignore
+                                            b: (chunks) => _jsx("strong", { children: chunks })
+                                        } })) : (_jsx(_Fragment, { children: group && group.privacy === SCGroupPrivacyType.PRIVATE ? (_jsx(FormattedMessage, { id: "ui.groupForm.privacy.private.info.edit", defaultMessage: "ui.groupForm.private.public.info.edit", values: {
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => _jsx("strong", { children: chunks })
+                                            } })) : (_jsx(FormattedMessage, { id: "ui.groupForm.privacy.private.info", defaultMessage: "ui.groupForm.private.public.info", values: {
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => _jsx("strong", { children: chunks })
+                                            } })) })) }))] }))), privateEnabled && visibilityEnabled && (_jsx(Box, Object.assign({ className: classes.visibilitySection }, { children: ((!field.isPublic && !group) || (group && !field.isPublic)) && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ variant: "h4" }, { children: _jsx(FormattedMessage, { id: "ui.groupForm.visibility.title", defaultMessage: "ui.groupForm.visibility.title", values: {
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => _jsx("strong", { children: chunks })
+                                            } }) })), _jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [_jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: !field.isVisible }) }, { children: [_jsx(Icon, { children: "visibility_off" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })] })), _jsx(Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }), _jsxs(Typography, Object.assign({ className: classNames(classes.switchLabel, { [classes.active]: field.isVisible }) }, { children: [_jsx(Icon, { children: "visibility" }), _jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })] }))] })), _jsx(Typography, Object.assign({ variant: "body2", className: classes.visibilitySectionInfo }, { children: !field.isVisible ? (_jsx(FormattedMessage, { id: "ui.groupForm.visibility.hidden.info", defaultMessage: "ui.groupForm.visibility.hidden.info", values: {
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => _jsx("strong", { children: chunks })
+                                            } })) : (_jsx(FormattedMessage, { id: "ui.groupForm.visibility.visible.info", defaultMessage: "ui.groupForm.visibility.visible.info", values: {
+                                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                                // @ts-ignore
+                                                b: (chunks) => _jsx("strong", { children: chunks })
+                                            } })) }))] })) })))] })), !group && (_jsxs(_Fragment, { children: [_jsx(Divider, {}), _jsx(Box, Object.assign({ className: classes.inviteSection }, { children: _jsx(GroupInviteButton, { handleInvitations: handleInviteSection }) }))] }))] }) })));
 }