@selfcommunity/react-ui 0.7.50-event.29 → 0.7.50-events.100

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const styles_1 = require("@mui/material/styles");
@@ -43,24 +44,11 @@ function FeedObjectSkeleton(props) {
     const theme = (0, material_1.useTheme)();
     let obj;
     if (template === feedObject_1.SCFeedObjectTemplateType.PREVIEW || template === feedObject_1.SCFeedObjectTemplateType.DETAIL || template === feedObject_1.SCFeedObjectTemplateType.SEARCH) {
-        obj = (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.CardHeader, { avatar: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" }) }),
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "rectangular", className: classes.media }),
-            react_1.default.createElement(material_1.CardContent, null,
-                react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, style: { marginBottom: 6 } }),
-                    react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }),
-                    react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "60%" })))));
+        obj = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { avatar: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" }) }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "rectangular", className: classes.media }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "60%" })] }) })] }));
     }
     else {
-        obj = (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.CardHeader, { avatar: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" }) }),
-            react_1.default.createElement(material_1.CardContent, null,
-                react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, style: { marginBottom: 6 } }),
-                    react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }),
-                    react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "60%", style: { marginBottom: 6 } })))));
+        obj = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { avatar: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium }), title: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), subheader: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" }) }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { children: (0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", style: { marginBottom: 6 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "60%", style: { marginBottom: 6 } })] }) })] }));
     }
-    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, `${constants_1.PREFIX}-${template}`) }, rest), obj));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, `${constants_1.PREFIX}-${template}`) }, rest, { children: obj })));
 }
 exports.default = FeedObjectSkeleton;

package/lib/cjs/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/cjs/components/FeedObjectMediaPreview/FeedObjectMediaPreview.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const Box_1 = tslib_1.__importDefault(require("@mui/material/Box"));
 const react_core_1 = require("@selfcommunity/react-core");
@@ -58,9 +58,8 @@ exports.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_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest), mediaObjectTypes.map((mediaObject) => {
-        const { displayProps = {} } = mediaObject;
-        return (react_1.default.createElement("div", { key: mediaObject.name },
-            react_1.default.createElement(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, { onMediaClick: handleMediaClick }))));
-    })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: mediaObjectTypes.map((mediaObject) => {
+            const { displayProps = {} } = mediaObject;
+            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(mediaObject.displayComponent, Object.assign({ medias: medias }, displayProps, { onMediaClick: handleMediaClick })) }, mediaObject.name));
+        }) })));
 };

package/lib/cjs/components/FeedUpdatesWidget/FeedUpdatesWidget.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const pubsub_js_1 = tslib_1.__importDefault(require("pubsub-js"));
@@ -52,7 +53,7 @@ function FeedUpdatesWidget(inProps) {
         props: inProps,
         name: constants_1.PREFIX
     });
-    const { id = 'feed_updates', className = null, message = react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feedUpdatesWidget.message", defaultMessage: "ui.feedUpdatesWidget.message" }), subscriptionChannel, subscriptionChannelUpdatesCallback = (msg, data) => true, publicationChannel = null, onHeightChange } = props, rest = tslib_1.__rest(props, ["id", "className", "message", "subscriptionChannel", "subscriptionChannelUpdatesCallback", "publicationChannel", "onHeightChange"]);
+    const { id = 'feed_updates', className = null, message = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedUpdatesWidget.message", defaultMessage: "ui.feedUpdatesWidget.message" }), subscriptionChannel, subscriptionChannelUpdatesCallback = (msg, data) => true, publicationChannel = null, onHeightChange } = props, rest = tslib_1.__rest(props, ["id", "className", "message", "subscriptionChannel", "subscriptionChannelUpdatesCallback", "publicationChannel", "onHeightChange"]);
     // STATE
     const [updates, setUpdates] = (0, react_1.useState)(false);
     // REFS
@@ -80,17 +81,13 @@ function FeedUpdatesWidget(inProps) {
         onHeightChange && onHeightChange();
     }, [updates]);
     if (!updates) {
-        return react_1.default.createElement(HiddenPlaceholder_1.default, null);
+        return (0, jsx_runtime_1.jsx)(HiddenPlaceholder_1.default, {});
     }
     // HANDLERS
     const handleClick = () => {
         pubsub_js_1.default.publishSync(publicationChannel, { refresh: true });
         setUpdates(false);
     };
-    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest),
-        react_1.default.createElement(material_1.CardContent, null,
-            message,
-            publicationChannel && (react_1.default.createElement(material_1.Button, { variant: "text", color: "inherit", onClick: handleClick, classes: { root: classes.buttonLoadMore } },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.feedUpdatesWidget.reload", defaultMessage: "ui.feedUpdatesWidget.reload" }))))));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [message, publicationChannel && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ variant: "text", color: "inherit", onClick: handleClick, classes: { root: classes.buttonLoadMore } }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.feedUpdatesWidget.reload", defaultMessage: "ui.feedUpdatesWidget.reload" }) })))] }) })));
 }
 exports.default = FeedUpdatesWidget;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const GenericSkeleton_1 = tslib_1.__importDefault(require("../Skeleton/GenericSkeleton"));
 const constants_1 = require("./constants");
@@ -35,6 +35,6 @@ const Root = (0, styles_1.styled)(GenericSkeleton_1.default, {
  *
  */
 function FeedUpdatesWidgetSkeleton(props) {
-    return react_1.default.createElement(Root, Object.assign({ className: classes.root }, props));
+    return (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props));
 }
 exports.default = FeedUpdatesWidgetSkeleton;

package/lib/cjs/components/FollowUserButton/FollowUserButton.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const Errors_1 = require("../../constants/Errors");
 const lab_1 = require("@mui/lab");
@@ -72,7 +73,7 @@ function FollowUserButton(inProps) {
     }, [authUserId, scFollowedManager.isFollowed]);
     const followUser = () => {
         if (!followed && react_core_1.UserUtils.isBlocked(scUserContext.user)) {
-            enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -89,7 +90,7 @@ function FollowUserButton(inProps) {
                     setDisabled(true);
                 }
                 else {
-                    enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
+                    enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
                         variant: 'warning',
                         autoHideDuration: 3000
                     });
@@ -109,6 +110,6 @@ function FollowUserButton(inProps) {
     if (scUserContext.user && scUserContext.user.id === scUser.id) {
         return null;
     }
-    return (react_1.default.createElement(FollowButton, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? followed === null || scFollowedManager.isLoading(scUser) : null, disabled: disabled, className: (0, classnames_1.default)(classes.root, className) }, rest), scUserContext.user && followed ? (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.followUserButton.unfollow", id: "ui.followUserButton.unfollow" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.followUserButton.follow", id: "ui.followUserButton.follow" }))));
+    return ((0, jsx_runtime_1.jsx)(FollowButton, Object.assign({ size: "small", variant: "outlined", onClick: handleFollowAction, loading: scUserContext.user ? followed === null || scFollowedManager.isLoading(scUser) : null, disabled: disabled, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: scUserContext.user && followed ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.followUserButton.unfollow", id: "ui.followUserButton.unfollow" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.followUserButton.follow", id: "ui.followUserButton.follow" })) })));
 }
 exports.default = FollowUserButton;

package/lib/cjs/components/Footer/Footer.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const system_1 = require("@mui/system");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
@@ -92,12 +93,8 @@ function Footer(inProps) {
      * Renders root object
      */
     if (loading) {
-        return react_1.default.createElement(Skeleton_1.default, null);
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
     }
-    return (react_1.default.createElement(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }),
-        startActions,
-        react_1.default.createElement(material_1.Box, { className: classes.itemList }, (0, utils_1.sortByAttr)(_menu.items, 'order').map((item, index) => (react_1.default.createElement(material_1.Button, { component: react_core_1.Link, key: item.id, className: classes.item, to: item.url, variant: "text" }, item.label)))),
-        endActions,
-        react_1.default.createElement(material_1.Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: [startActions, (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.itemList }, { children: (0, utils_1.sortByAttr)(_menu.items, 'order').map((item, index) => ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ component: react_core_1.Link, className: classes.item, to: item.url, variant: "text" }, { children: item.label }), item.id))) })), endActions, (0, jsx_runtime_1.jsx)(material_1.Typography, { textAlign: "center", className: classes.copyright, variant: "body2", dangerouslySetInnerHTML: { __html: copyright } })] })));
 }
 exports.default = Footer;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
@@ -34,8 +34,6 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  *
  */
 function FooterSkeleton(props) {
-    return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props),
-        react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, style: { marginBottom: 10 } }),
-        react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "60%" })));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, props, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, style: { marginBottom: 10 } }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "60%" })] })));
 }
 exports.default = FooterSkeleton;

package/lib/cjs/components/FriendshipUserButton/FriendshipUserButton.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const types_1 = require("@selfcommunity/types");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
@@ -71,7 +72,7 @@ function FriendshipUserButton(inProps) {
             scContext.settings.handleAnonymousAction();
         }
         else if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
-            enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -96,7 +97,7 @@ function FriendshipUserButton(inProps) {
                     setDisabled(true);
                 }
                 else {
-                    enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
+                    enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.actionToUserDeleted", defaultMessage: "ui.common.actionToUserDeleted" }), {
                         variant: 'warning',
                         autoHideDuration: 3000
                     });
@@ -111,16 +112,16 @@ function FriendshipUserButton(inProps) {
         let _status;
         switch (status) {
             case types_1.SCConnectionStatus.CONNECTED:
-                _status = react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.removeConnection", id: "ui.friendshipUserButton.removeConnection" });
+                _status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.removeConnection", id: "ui.friendshipUserButton.removeConnection" });
                 break;
             case types_1.SCConnectionStatus.CONNECTION_REQUEST_SENT:
-                _status = (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.cancelConnectionRequest", id: "ui.friendshipUserButton.cancelConnectionRequest" }));
+                _status = ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.cancelConnectionRequest", id: "ui.friendshipUserButton.cancelConnectionRequest" }));
                 break;
             case types_1.SCConnectionStatus.CONNECTION_REQUEST_RECEIVED:
-                _status = react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.acceptConnection", id: "ui.friendshipUserButton.acceptConnection" });
+                _status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.acceptConnection", id: "ui.friendshipUserButton.acceptConnection" });
                 break;
             default:
-                _status = react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.requestConnection", id: "ui.friendshipUserButton.requestConnection" });
+                _status = (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.friendshipUserButton.requestConnection", id: "ui.friendshipUserButton.requestConnection" });
                 break;
         }
         return _status;
@@ -139,6 +140,6 @@ function FriendshipUserButton(inProps) {
     if (scUserContext.user && scUserContext.user.id === scUser.id) {
         return null;
     }
-    return (react_1.default.createElement(Root, Object.assign({ size: "small", variant: "outlined", disabled: disabled, loading: scUserContext.user ? scConnectionsManager.isLoading(scUser) : null, onClick: handleConnectionStatus, className: (0, classnames_1.default)(classes.root, className) }, rest), getStatus()));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ size: "small", variant: "outlined", disabled: disabled, loading: scUserContext.user ? scConnectionsManager.isLoading(scUser) : null, onClick: handleConnectionStatus, className: (0, classnames_1.default)(classes.root, className) }, rest, { children: getStatus() })));
 }
 exports.default = FriendshipUserButton;

package/lib/cjs/components/Group/Group.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const types_1 = require("@selfcommunity/types");
@@ -89,26 +90,19 @@ function Group(inProps) {
      * @return {JSX.Element}
      */
     function renderAuthenticatedActions() {
-        return (react_1.default.createElement(material_1.Stack, { className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 },
-            isGroupAdmin && react_1.default.createElement(material_1.Icon, null, "face"),
-            actionRedirect ? (react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ? (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.enter", id: "ui.group.status.enter" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.discover", id: "ui.group.status.discover" })))) : (react_1.default.createElement(GroupSubscribeButton_1.default, Object.assign({ group: group, groupId: groupId }, groupSubscribeButtonProps)))));
+        return ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actions, direction: "row", alignItems: "center", justifyContent: "center", spacing: 2 }, { children: [isGroupAdmin && (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "face" }), actionRedirect ? ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, { children: scGroup.subscription_status === types_1.SCGroupSubscriptionStatusType.SUBSCRIBED ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.enter", id: "ui.group.status.enter" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.group.status.discover", id: "ui.group.status.discover" })) }))) : ((0, jsx_runtime_1.jsx)(GroupSubscribeButton_1.default, Object.assign({ group: group, groupId: groupId }, groupSubscribeButtonProps)))] })));
     }
     /**
      * Renders group object
      */
     if (!scGroup) {
-        return react_1.default.createElement(Skeleton_1.default, { elevation: elevation });
+        return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { elevation: elevation });
     }
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Root, Object.assign({ elevation: elevation }, rest, { className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, image: react_1.default.createElement(material_1.Avatar, { alt: scGroup.name, src: scGroup.image_medium, className: classes.avatar }), primary: react_1.default.createElement(react_1.default.Fragment, null,
-                isMobile
-                    ? (0, string_1.formatCroppedName)(scGroup.name, Group_1.GROUP_NAME_MAX_LENGTH_MOBILE)
-                    : (0, string_1.formatCroppedName)(scGroup.name, Group_1.GROUP_NAME_MAX_LENGTH_DESKTOP),
-                ' ',
-                react_1.default.createElement(material_1.Icon, { className: classes.icon }, (group === null || group === void 0 ? void 0 : group.privacy) === types_1.SCGroupPrivacyType.PRIVATE ? 'private' : 'public')), secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })),
-        openAlert && react_1.default.createElement(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ elevation: elevation }, rest, { className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUP_ROUTE_NAME, scGroup) }, image: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scGroup.name, src: scGroup.image_medium, className: classes.avatar }), primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile
+                            ? (0, string_1.formatCroppedName)(scGroup.name, Group_1.GROUP_NAME_MAX_LENGTH_MOBILE)
+                            : (0, string_1.formatCroppedName)(scGroup.name, Group_1.GROUP_NAME_MAX_LENGTH_DESKTOP), ' ', (0, jsx_runtime_1.jsx)(material_1.Icon, Object.assign({ className: classes.icon }, { children: (group === null || group === void 0 ? void 0 : group.privacy) === types_1.SCGroupPrivacyType.PRIVATE ? 'private' : 'public' }))] }), secondary: `${intl.formatMessage(messages.groupMembers, { total: scGroup.subscribers_counter })}`, actions: hideActions ? null : renderAuthenticatedActions() })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }
 exports.default = Group;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
@@ -36,7 +36,6 @@ const Root = (0, styles_1.styled)(BaseItem_1.default, {
  */
 function GroupSkeleton(props) {
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement(Root, Object.assign({ className: classes.root }, props, { image: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeSmall, height: theme.selfcommunity.group.avatar.sizeSmall }), primary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: react_1.default.createElement(material_1.Button, { size: "small", variant: "outlined", disabled: true },
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } })) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props, { image: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.group.avatar.sizeSmall, height: theme.selfcommunity.group.avatar.sizeSmall }), primary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 120, style: { marginBottom: 10 } }), secondary: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 70, style: { marginBottom: 10 } }), actions: (0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "outlined", disabled: true }, { children: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: 30, style: { marginTop: 5, marginBottom: 5 } }) })) })));
 }
 exports.default = GroupSkeleton;

package/lib/cjs/components/GroupAutocomplete/GroupAutocomplete.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_intl_1 = require("react-intl");
 const Autocomplete_1 = tslib_1.__importDefault(require("@mui/material/Autocomplete"));
@@ -50,7 +51,7 @@ const GroupAutocomplete = (inProps) => {
     // Props
     const { onChange, defaultValue = null, disabled = false, TextFieldProps = {
         variant: 'outlined',
-        label: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupAutocomplete.label", defaultMessage: "ui.groupAutocomplete.label" })
+        label: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupAutocomplete.label", defaultMessage: "ui.groupAutocomplete.label" })
     } } = props, rest = tslib_1.__rest(props, ["onChange", "defaultValue", "disabled", "TextFieldProps"]);
     // State
     const [open, setOpen] = (0, react_1.useState)(false);
@@ -79,7 +80,7 @@ const GroupAutocomplete = (inProps) => {
         setValue(value);
     };
     // Render
-    return (react_1.default.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_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupAutocomplete.empty", defaultMessage: "ui.groupAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, 
+    return ((0, jsx_runtime_1.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: (0, jsx_runtime_1.jsx)(react_intl_1.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})} />
@@ -88,13 +89,9 @@ const GroupAutocomplete = (inProps) => {
         renderOption: (props, option, { inputValue }) => {
             const matches = (0, match_1.default)(option.name, inputValue);
             const parts = (0, parse_1.default)(option.name, matches);
-            return (react_1.default.createElement(material_1.Box, Object.assign({ component: "li" }, props),
-                react_1.default.createElement(material_1.Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }),
-                react_1.default.createElement(react_1.default.Fragment, null, parts.map((part, index) => (react_1.default.createElement(material_1.Typography, { key: index, sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, part.text))))));
+            return ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "li" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: option.name, src: option.image_small, sx: { marginRight: 1 } }), (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: parts.map((part, index) => ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ sx: { fontWeight: part.highlight ? 700 : 400, marginRight: 0.2 } }, { children: part.text }), index))) })] })));
         }, renderInput: (params) => {
-            return (react_1.default.createElement(TextField_1.default, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'groups', endAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
-                        isLoading ? react_1.default.createElement(CircularProgress_1.default, { color: "inherit", size: 20 }) : null,
-                        params.InputProps.endAdornment)) }) })));
+            return ((0, jsx_runtime_1.jsx)(TextField_1.default, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'groups', endAdornment: ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [isLoading ? (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
         } }, rest)));
 };
 exports.default = GroupAutocomplete;

package/lib/cjs/components/GroupForm/GroupForm.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const system_1 = require("@mui/system");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
@@ -219,81 +220,41 @@ function GroupForm(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), actions: react_1.default.createElement(lab_1.LoadingButton, { loading: field.isSubmitting, disabled: !field.name ||
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ DialogContentProps: { dividers: false }, title: group ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.title.edit", defaultMessage: "ui.groupForm.title.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.title", defaultMessage: "ui.groupForm.title" })), open: open, onClose: onClose, className: (0, classnames_1.default)(classes.root, className), actions: (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ loading: field.isSubmitting, disabled: !field.name ||
                 Object.keys(error).length !== 0 ||
                 field.name.length > Group_1.GROUP_TITLE_MAX_LENGTH ||
-                field.name.description > Group_1.GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, group ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" }))) }, rest),
-        react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } },
-                    react_1.default.createElement(material_1.Box, { className: classes.avatar },
-                        react_1.default.createElement(material_1.Avatar, null, field.imageOriginal ? react_1.default.createElement("img", { src: field.imageOriginal, alt: "avatar" }) : react_1.default.createElement(material_1.Icon, null, "icon_image"))),
-                    react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(ChangeGroupPicture_1.default, { isCreationMode: true, onChange: handleChangeAvatar }),
-                        react_1.default.createElement(ChangeGroupCover_1.default, { isCreationMode: true, onChange: handleChangeCover }))),
-                react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, error.emotionalImageOriginalError || error.imageOriginalError ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })))),
-            react_1.default.createElement(material_1.FormGroup, { className: classes.form },
-                react_1.default.createElement(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
-                        endAdornment: react_1.default.createElement(material_1.Typography, { variant: "body2" }, Group_1.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_1.GROUP_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > Group_1.GROUP_TITLE_MAX_LENGTH ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }),
-                react_1.default.createElement(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
-                        endAdornment: (react_1.default.createElement(material_1.Typography, { variant: "body2" }, ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH))
-                    }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }),
-                privateEnabled && (react_1.default.createElement(material_1.Box, { className: classes.privacySection },
-                    react_1.default.createElement(material_1.Typography, { variant: "h4" },
-                        react_1.default.createElement(react_intl_1.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_1.default.createElement("strong", null, chunks)
-                            } })),
-                    react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center" },
-                        react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) },
-                            react_1.default.createElement(material_1.Icon, null, "private"),
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private", defaultMessage: "ui.groupForm.privacy.private" })),
-                        react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: group && group.privacy === types_1.SCGroupPrivacyType.PRIVATE }),
-                        react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) },
-                            react_1.default.createElement(material_1.Icon, null, "public"),
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.public", defaultMessage: "ui.groupForm.privacy.public" }))),
-                    react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.privacySectionInfo }, field.isPublic ? (react_1.default.createElement(react_intl_1.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_1.default.createElement("strong", null, chunks)
-                        } })) : (react_1.default.createElement(react_1.default.Fragment, null, group && group.privacy === types_1.SCGroupPrivacyType.PRIVATE ? (react_1.default.createElement(react_intl_1.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_1.default.createElement("strong", null, chunks)
-                        } })) : (react_1.default.createElement(react_intl_1.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_1.default.createElement("strong", null, chunks)
-                        } }))))))),
-                privateEnabled && visibilityEnabled && (react_1.default.createElement(material_1.Box, { className: classes.visibilitySection }, ((!field.isPublic && !group) || (group && !field.isPublic)) && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(material_1.Typography, { variant: "h4" },
-                        react_1.default.createElement(react_intl_1.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_1.default.createElement("strong", null, chunks)
-                            } })),
-                    react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 1, alignItems: "center" },
-                        react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isVisible }) },
-                            react_1.default.createElement(material_1.Icon, null, "visibility_off"),
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })),
-                        react_1.default.createElement(material_1.Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }),
-                        react_1.default.createElement(material_1.Typography, { className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isVisible }) },
-                            react_1.default.createElement(material_1.Icon, null, "visibility"),
-                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" }))),
-                    react_1.default.createElement(material_1.Typography, { variant: "body2", className: classes.visibilitySectionInfo }, !field.isVisible ? (react_1.default.createElement(react_intl_1.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_1.default.createElement("strong", null, chunks)
-                        } })) : (react_1.default.createElement(react_intl_1.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_1.default.createElement("strong", null, chunks)
-                        } })))))))),
-            !group && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.Divider, null),
-                react_1.default.createElement(material_1.Box, { className: classes.inviteSection },
-                    react_1.default.createElement(GroupInviteButton_1.default, { handleInvitations: handleInviteSection })))))));
+                field.name.description > Group_1.GROUP_DESCRIPTION_MAX_LENGTH, variant: "contained", onClick: handleSubmit, color: "secondary" }, { children: group ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.edit", defaultMessage: "ui.groupForm.button.edit" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.button.create", defaultMessage: "ui.groupForm.button.create" })) })) }, rest, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Paper, Object.assign({ style: _backgroundCover, classes: { root: classes.cover } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.avatar }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { children: field.imageOriginal ? (0, jsx_runtime_1.jsx)("img", { src: field.imageOriginal, alt: "avatar" }) : (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "icon_image" }) }) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChangeGroupPicture_1.default, { isCreationMode: true, onChange: handleChangeAvatar }), (0, jsx_runtime_1.jsx)(ChangeGroupCover_1.default, { isCreationMode: true, onChange: handleChangeCover })] })] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.header, { [classes.error]: error.emotionalImageOriginalError || error.imageOriginalError }), align: "center" }, { children: error.emotionalImageOriginalError || error.imageOriginalError ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.header.error", defaultMessage: "ui.groupForm.header.error" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.header", defaultMessage: "ui.groupForm.header" })) }))] }), (0, jsx_runtime_1.jsxs)(material_1.FormGroup, Object.assign({ className: classes.form }, { children: [(0, jsx_runtime_1.jsx)(material_1.TextField, { required: true, className: classes.name, placeholder: `${intl.formatMessage(messages.name)}`, margin: "normal", value: field.name, name: "name", onChange: handleChange, InputProps: {
+                                endAdornment: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: Group_1.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_1.GROUP_TITLE_MAX_LENGTH), helperText: ((_b = field === null || field === void 0 ? void 0 : field.name) === null || _b === void 0 ? void 0 : _b.length) > Group_1.GROUP_TITLE_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.name.error.maxLength", defaultMessage: "ui.groupForm.name.error.maxLength" })) : null }), (0, jsx_runtime_1.jsx)(material_1.TextField, { multiline: true, className: classes.description, placeholder: `${intl.formatMessage(messages.description)}`, margin: "normal", value: field.description, name: "description", onChange: handleChange, InputProps: {
+                                endAdornment: ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2" }, { children: ((_c = field.description) === null || _c === void 0 ? void 0 : _c.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH })))
+                            }, error: Boolean(((_d = field.description) === null || _d === void 0 ? void 0 : _d.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH), helperText: ((_e = field.description) === null || _e === void 0 ? void 0 : _e.length) > Group_1.GROUP_DESCRIPTION_MAX_LENGTH ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.description.error.maxLength", defaultMessage: "ui.groupForm.description.error.maxLength" })) : null }), privateEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.privacySection }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                        } }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "private" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.private", defaultMessage: "ui.groupForm.privacy.private" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isPublic, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isPublic']: !field.isPublic }))), disabled: group && group.privacy === types_1.SCGroupPrivacyType.PRIVATE }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isPublic }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "public" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.privacy.public", defaultMessage: "ui.groupForm.privacy.public" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.privacySectionInfo }, { children: field.isPublic ? ((0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                        } })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: group && group.privacy === types_1.SCGroupPrivacyType.PRIVATE ? ((0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                            } })) : ((0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                            } })) })) }))] }))), privateEnabled && visibilityEnabled && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.visibilitySection }, { children: ((!field.isPublic && !group) || (group && !field.isPublic)) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h4" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                            } }) })), (0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "center" }, { children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: !field.isVisible }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility_off" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.hidden", defaultMessage: "ui.groupForm.visibility.hidden" })] })), (0, jsx_runtime_1.jsx)(material_1.Switch, { className: classes.switch, checked: field.isVisible, onChange: () => setField((prev) => (Object.assign(Object.assign({}, prev), { ['isVisible']: !field.isVisible }))) }), (0, jsx_runtime_1.jsxs)(material_1.Typography, Object.assign({ className: (0, classnames_1.default)(classes.switchLabel, { [classes.active]: field.isVisible }) }, { children: [(0, jsx_runtime_1.jsx)(material_1.Icon, { children: "visibility" }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.groupForm.visibility.visible", defaultMessage: "ui.groupForm.visibility.visible" })] }))] })), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body2", className: classes.visibilitySectionInfo }, { children: !field.isVisible ? ((0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                            } })) : ((0, jsx_runtime_1.jsx)(react_intl_1.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) => (0, jsx_runtime_1.jsx)("strong", { children: chunks })
+                                            } })) }))] })) })))] })), !group && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.inviteSection }, { children: (0, jsx_runtime_1.jsx)(GroupInviteButton_1.default, { handleInvitations: handleInviteSection }) }))] }))] }) })));
 }
 exports.default = GroupForm;