@selfcommunity/react-ui 0.7.35 → 0.7.36-alpha.1

package/lib/cjs/components/Category/Category.js

@@ -12,6 +12,8 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const BaseItemButton_1 = tslib_1.__importDefault(require("../../shared/BaseItemButton"));
 const constants_1 = require("./constants");
+const string_1 = require("../../utils/string");
+const Category_1 = require("../../constants/Category");
 const messages = (0, react_intl_1.defineMessages)({
     categoryFollowers: {
         id: 'ui.category.categoryFollowers',
@@ -66,14 +68,18 @@ function Category(inProps) {
     const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
     // MEMO
     const _ButtonBaseProps = (0, react_1.useMemo)(() => (ButtonBaseProps ? ButtonBaseProps : { component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.CATEGORY_ROUTE_NAME, scCategory) }), [ButtonBaseProps, scRoutingContext, scCategory]);
-    // INTL
+    // HOOKS
     const intl = (0, react_intl_1.useIntl)();
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     if (!scCategory) {
         return react_1.default.createElement(Skeleton_1.default, { elevation: elevation });
     }
     // RENDER
     if (!autoHide) {
-        return (react_1.default.createElement(Root, Object.assign({ elevation: elevation, className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: _ButtonBaseProps, image: react_1.default.createElement(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: scCategory.name, secondary: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan, actions: react_1.default.createElement(CategoryFollowButton_1.default, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
+        return (react_1.default.createElement(Root, Object.assign({ elevation: elevation, className: (0, classnames_1.default)(classes.root, className), ButtonBaseProps: _ButtonBaseProps, image: react_1.default.createElement(material_1.Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: isMobile
+                ? (0, string_1.formatCroppedName)(scCategory.name, Category_1.CATEGORY_NAME_MAX_LENGTH_MOBILE)
+                : (0, string_1.formatCroppedName)(scCategory.name, Category_1.CATEGORY_NAME_MAX_LENGTH_DESKTOP), secondary: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan, actions: react_1.default.createElement(CategoryFollowButton_1.default, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
     }
     return null;
 }

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

@@ -14,6 +14,8 @@ const UserDeletedSnackBar_1 = tslib_1.__importDefault(require("../../shared/User
 const constants_1 = require("./constants");
 const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 const GroupSubscribeButton_1 = tslib_1.__importDefault(require("../GroupSubscribeButton"));
+const string_1 = require("../../utils/string");
+const Group_1 = require("../../constants/Group");
 const messages = (0, react_intl_1.defineMessages)({
     groupMembers: {
         id: 'ui.group.members',
@@ -78,8 +80,10 @@ function Group(inProps) {
     // CONST
     const isGroupAdmin = (0, react_1.useMemo)(() => { var _a; return scUserContext.user && ((_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
     const [openAlert, setOpenAlert] = (0, react_1.useState)(false);
-    // INTL
+    // HOOKS
     const intl = (0, react_intl_1.useIntl)();
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, material_1.useMediaQuery)(theme.breakpoints.down('md'));
     /**
      * Render authenticated actions
      * @return {JSX.Element}
@@ -100,8 +104,10 @@ function Group(inProps) {
      */
     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,
-                scGroup.name,
-                " ",
+                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) })));
 }

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

@@ -92,7 +92,7 @@ const Root = (0, styles_1.styled)(BaseDialog_1.default, {
  * @param inProps
  */
 function GroupForm(inProps) {
-    var _a;
+    var _a, _b, _c, _d, _e;
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -213,7 +213,10 @@ 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 || Object.keys(error).length !== 0, 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),
+    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 ||
+                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 } },
@@ -226,10 +229,10 @@ function GroupForm(inProps) {
             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" }, ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? Group_1.GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : Group_1.GROUP_DESCRIPTION_MAX_LENGTH))
-                    } }),
+                        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 }),
                 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: {

package/lib/cjs/constants/Category.d.ts

@@ -0,0 +1,2 @@
+export declare const CATEGORY_NAME_MAX_LENGTH_MOBILE = 15;
+export declare const CATEGORY_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/cjs/constants/Category.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CATEGORY_NAME_MAX_LENGTH_DESKTOP = exports.CATEGORY_NAME_MAX_LENGTH_MOBILE = void 0;
+exports.CATEGORY_NAME_MAX_LENGTH_MOBILE = 15;
+exports.CATEGORY_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/cjs/constants/Group.d.ts

@@ -1,2 +1,4 @@
-export declare const GROUP_TITLE_MAX_LENGTH = 50;
+export declare const GROUP_TITLE_MAX_LENGTH = 40;
 export declare const GROUP_DESCRIPTION_MAX_LENGTH = 500;
+export declare const GROUP_NAME_MAX_LENGTH_MOBILE = 15;
+export declare const GROUP_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/cjs/constants/Group.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.GROUP_DESCRIPTION_MAX_LENGTH = exports.GROUP_TITLE_MAX_LENGTH = void 0;
-exports.GROUP_TITLE_MAX_LENGTH = 50;
+exports.GROUP_NAME_MAX_LENGTH_DESKTOP = exports.GROUP_NAME_MAX_LENGTH_MOBILE = exports.GROUP_DESCRIPTION_MAX_LENGTH = exports.GROUP_TITLE_MAX_LENGTH = void 0;
+exports.GROUP_TITLE_MAX_LENGTH = 40;
 exports.GROUP_DESCRIPTION_MAX_LENGTH = 500;
+exports.GROUP_NAME_MAX_LENGTH_MOBILE = 15;
+exports.GROUP_NAME_MAX_LENGTH_DESKTOP = 20;

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

@@ -0,0 +1 @@
+export declare const formatCroppedName: (name: any, maxLength: any) => any;

package/lib/cjs/utils/string.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatCroppedName = void 0;
+const formatCroppedName = (name, maxLength) => {
+    if (name.length <= maxLength) {
+        return name;
+    }
+    return name.substring(0, maxLength) + '...';
+};
+exports.formatCroppedName = formatCroppedName;

package/lib/esm/components/Category/Category.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React, { useMemo } from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar } from '@mui/material';
+import { Avatar, useMediaQuery, useTheme } from '@mui/material';
 import { Link, SCRoutes, useSCFetchCategory, useSCRouting } from '@selfcommunity/react-core';
 import CategorySkeleton from './Skeleton';
 import CategoryFollowButton from '../CategoryFollowButton';
@@ -10,6 +10,8 @@ import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import BaseItemButton from '../../shared/BaseItemButton';
 import { PREFIX } from './constants';
+import { formatCroppedName } from '../../utils/string';
+import { CATEGORY_NAME_MAX_LENGTH_DESKTOP, CATEGORY_NAME_MAX_LENGTH_MOBILE } from '../../constants/Category';
 const messages = defineMessages({
     categoryFollowers: {
         id: 'ui.category.categoryFollowers',
@@ -64,14 +66,18 @@ export default function Category(inProps) {
     const { scCategory, setSCCategory } = useSCFetchCategory({ id: categoryId, category });
     // MEMO
     const _ButtonBaseProps = useMemo(() => (ButtonBaseProps ? ButtonBaseProps : { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_ROUTE_NAME, scCategory) }), [ButtonBaseProps, scRoutingContext, scCategory]);
-    // INTL
+    // HOOKS
     const intl = useIntl();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     if (!scCategory) {
         return React.createElement(CategorySkeleton, { elevation: elevation });
     }
     // RENDER
     if (!autoHide) {
-        return (React.createElement(Root, Object.assign({ elevation: elevation, className: classNames(classes.root, className), ButtonBaseProps: _ButtonBaseProps, image: React.createElement(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: scCategory.name, secondary: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan, actions: React.createElement(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
+        return (React.createElement(Root, Object.assign({ elevation: elevation, className: classNames(classes.root, className), ButtonBaseProps: _ButtonBaseProps, image: React.createElement(Avatar, { alt: scCategory.name, src: scCategory.image_medium, variant: "square", className: classes.categoryImage }), primary: isMobile
+                ? formatCroppedName(scCategory.name, CATEGORY_NAME_MAX_LENGTH_MOBILE)
+                : formatCroppedName(scCategory.name, CATEGORY_NAME_MAX_LENGTH_DESKTOP), secondary: showFollowers ? `${intl.formatMessage(messages.categoryFollowers, { total: scCategory.followers_counter })}` : scCategory.slogan, actions: React.createElement(CategoryFollowButton, Object.assign({ category: scCategory }, categoryFollowButtonProps)) }, rest)));
     }
     return null;
 }

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

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import React, { useMemo, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Avatar, Button, Icon, Stack } from '@mui/material';
+import { Avatar, Button, Icon, Stack, useMediaQuery, useTheme } from '@mui/material';
 import { SCGroupPrivacyType, SCGroupSubscriptionStatusType } from '@selfcommunity/types';
 import { Link, SCRoutes, useSCFetchGroup, useSCRouting, useSCUser } from '@selfcommunity/react-core';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
@@ -12,6 +12,8 @@ import UserDeletedSnackBar from '../../shared/UserDeletedSnackBar';
 import { PREFIX } from './constants';
 import GroupSkeleton from './Skeleton';
 import GroupSubscribeButton from '../GroupSubscribeButton';
+import { formatCroppedName } from '../../utils/string';
+import { GROUP_NAME_MAX_LENGTH_DESKTOP, GROUP_NAME_MAX_LENGTH_MOBILE } from '../../constants/Group';
 const messages = defineMessages({
     groupMembers: {
         id: 'ui.group.members',
@@ -76,8 +78,10 @@ export default function Group(inProps) {
     // CONST
     const isGroupAdmin = useMemo(() => { var _a; return scUserContext.user && ((_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id) === scUserContext.user.id; }, [scUserContext.user, (_a = scGroup === null || scGroup === void 0 ? void 0 : scGroup.managed_by) === null || _a === void 0 ? void 0 : _a.id]);
     const [openAlert, setOpenAlert] = useState(false);
-    // INTL
+    // HOOKS
     const intl = useIntl();
+    const theme = useTheme();
+    const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     /**
      * Render authenticated actions
      * @return {JSX.Element}
@@ -98,8 +102,10 @@ export default function Group(inProps) {
      */
     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,
-                scGroup.name,
-                " ",
+                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) })));
 }

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

@@ -90,7 +90,7 @@ const Root = styled(BaseDialog, {
  * @param inProps
  */
 export default function GroupForm(inProps) {
-    var _a;
+    var _a, _b, _c, _d, _e;
     //PROPS
     const props = useThemeProps({
         props: inProps,
@@ -211,7 +211,10 @@ 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 || Object.keys(error).length !== 0, 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),
+    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 ||
+                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 } },
@@ -224,10 +227,10 @@ export default function GroupForm(inProps) {
             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" }, ((_a = field.description) === null || _a === void 0 ? void 0 : _a.length) ? GROUP_DESCRIPTION_MAX_LENGTH - field.description.length : GROUP_DESCRIPTION_MAX_LENGTH))
-                    } }),
+                        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 }),
                 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: {

package/lib/esm/constants/Category.d.ts

@@ -0,0 +1,2 @@
+export declare const CATEGORY_NAME_MAX_LENGTH_MOBILE = 15;
+export declare const CATEGORY_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/esm/constants/Category.js

@@ -0,0 +1,2 @@
+export const CATEGORY_NAME_MAX_LENGTH_MOBILE = 15;
+export const CATEGORY_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/esm/constants/Group.d.ts

@@ -1,2 +1,4 @@
-export declare const GROUP_TITLE_MAX_LENGTH = 50;
+export declare const GROUP_TITLE_MAX_LENGTH = 40;
 export declare const GROUP_DESCRIPTION_MAX_LENGTH = 500;
+export declare const GROUP_NAME_MAX_LENGTH_MOBILE = 15;
+export declare const GROUP_NAME_MAX_LENGTH_DESKTOP = 20;

package/lib/esm/constants/Group.js

@@ -1,2 +1,4 @@
-export const GROUP_TITLE_MAX_LENGTH = 50;
+export const GROUP_TITLE_MAX_LENGTH = 40;
 export const GROUP_DESCRIPTION_MAX_LENGTH = 500;
+export const GROUP_NAME_MAX_LENGTH_MOBILE = 15;
+export const GROUP_NAME_MAX_LENGTH_DESKTOP = 20;

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

@@ -0,0 +1 @@
+export declare const formatCroppedName: (name: any, maxLength: any) => any;

package/lib/esm/utils/string.js

@@ -0,0 +1,6 @@
+export const formatCroppedName = (name, maxLength) => {
+    if (name.length <= maxLength) {
+        return name;
+    }
+    return name.substring(0, maxLength) + '...';
+};