@selfcommunity/react-ui 0.11.0-react-17.0.1.3 → 1.0.0-alpha.1

package/lib/esm/components/Categories/prefetchedCategories.js

@@ -1,128 +1,128 @@
 const prefetchedCategories = [
     {
-        "id": 12,
-        "tags": [],
-        "followed": true,
-        "order": 0,
-        "name": "Decimo",
-        "name_synonyms": "",
-        "slug": "decimo",
-        "slogan": "",
-        "html_info": null,
-        "seo_title": "",
-        "seo_description": "",
-        "auto_follow": "none",
-        "active": true,
-        "image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/decimo_6924.png",
-        "image_bigger": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/decimo_8041.png",
-        "image_big": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/decimo_3816.png",
-        "image_medium": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/decimo_0379.png",
-        "image_small": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/decimo_2449.png",
-        "emotional_image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/decimo_6614.jpg",
-        "emotional_image_position": 50,
-        "lastmod_datetime": "2022-03-16T11:27:54.224553+01:00",
-        "stream_order_by": "recent",
-        "followers_counter": 121
+        id: 12,
+        tags: [],
+        followed: true,
+        order: 0,
+        name: 'Decimo',
+        name_synonyms: '',
+        slug: 'decimo',
+        slogan: '',
+        html_info: undefined,
+        seo_title: '',
+        seo_description: '',
+        auto_follow: 'none',
+        active: true,
+        image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/decimo_6924.png',
+        image_bigger: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/decimo_8041.png',
+        image_big: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/decimo_3816.png',
+        image_medium: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/decimo_0379.png',
+        image_small: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/decimo_2449.png',
+        emotional_image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/decimo_6614.jpg',
+        emotional_image_position: 50,
+        lastmod_datetime: '2022-03-16T11:27:54.224553+01:00',
+        stream_order_by: 'recent',
+        followers_counter: 121
     },
     {
-        "id": 21,
-        "tags": [],
-        "followed": true,
-        "order": 0,
-        "name": "Diciannovesimo",
-        "name_synonyms": "",
-        "slug": "diciannovesimo",
-        "slogan": "",
-        "html_info": null,
-        "seo_title": "",
-        "seo_description": "",
-        "auto_follow": "none",
-        "active": true,
-        "image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/diciannovesimo_3711.png",
-        "image_bigger": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/diciannovesimo_2523.png",
-        "image_big": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/diciannovesimo_0903.png",
-        "image_medium": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/diciannovesimo_8502.png",
-        "image_small": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/diciannovesimo_8366.png",
-        "emotional_image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/diciannovesimo_8326.jpg",
-        "emotional_image_position": 50,
-        "lastmod_datetime": "2022-03-16T11:29:56.488219+01:00",
-        "stream_order_by": "recent",
-        "followers_counter": 128
+        id: 21,
+        tags: [],
+        followed: true,
+        order: 0,
+        name: 'Diciannovesimo',
+        name_synonyms: '',
+        slug: 'diciannovesimo',
+        slogan: '',
+        html_info: undefined,
+        seo_title: '',
+        seo_description: '',
+        auto_follow: 'none',
+        active: true,
+        image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/diciannovesimo_3711.png',
+        image_bigger: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/diciannovesimo_2523.png',
+        image_big: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/diciannovesimo_0903.png',
+        image_medium: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/diciannovesimo_8502.png',
+        image_small: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/diciannovesimo_8366.png',
+        emotional_image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/diciannovesimo_8326.jpg',
+        emotional_image_position: 50,
+        lastmod_datetime: '2022-03-16T11:29:56.488219+01:00',
+        stream_order_by: 'recent',
+        followers_counter: 128
     },
     {
-        "id": 19,
-        "tags": [],
-        "followed": true,
-        "order": 0,
-        "name": "Diciasettesimo",
-        "name_synonyms": "",
-        "slug": "diciasettesimo",
-        "slogan": "",
-        "html_info": null,
-        "seo_title": "",
-        "seo_description": "",
-        "auto_follow": "none",
-        "active": true,
-        "image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/diciasettesimo_1283.png",
-        "image_bigger": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/diciasettesimo_5019.png",
-        "image_big": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/diciasettesimo_6746.png",
-        "image_medium": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/diciasettesimo_7799.png",
-        "image_small": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/diciasettesimo_7603.png",
-        "emotional_image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/diciasettesimo_0512.jpg",
-        "emotional_image_position": 50,
-        "lastmod_datetime": "2022-03-16T11:29:27.579942+01:00",
-        "stream_order_by": "recent",
-        "followers_counter": 117
+        id: 19,
+        tags: [],
+        followed: true,
+        order: 0,
+        name: 'Diciasettesimo',
+        name_synonyms: '',
+        slug: 'diciasettesimo',
+        slogan: '',
+        html_info: undefined,
+        seo_title: '',
+        seo_description: '',
+        auto_follow: 'none',
+        active: true,
+        image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/diciasettesimo_1283.png',
+        image_bigger: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/diciasettesimo_5019.png',
+        image_big: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/diciasettesimo_6746.png',
+        image_medium: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/diciasettesimo_7799.png',
+        image_small: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/diciasettesimo_7603.png',
+        emotional_image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/diciasettesimo_0512.jpg',
+        emotional_image_position: 50,
+        lastmod_datetime: '2022-03-16T11:29:27.579942+01:00',
+        stream_order_by: 'recent',
+        followers_counter: 117
     },
     {
-        "id": 20,
-        "tags": [],
-        "followed": true,
-        "order": 0,
-        "name": "Diciottesimo",
-        "name_synonyms": "",
-        "slug": "diciottesimo",
-        "slogan": "",
-        "html_info": null,
-        "seo_title": "",
-        "seo_description": "",
-        "auto_follow": "none",
-        "active": true,
-        "image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/diciottesimo_7510.png",
-        "image_bigger": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/diciottesimo_4703.png",
-        "image_big": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/diciottesimo_7082.png",
-        "image_medium": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/diciottesimo_4128.png",
-        "image_small": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/diciottesimo_9547.png",
-        "emotional_image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/diciottesimo_0577.jpg",
-        "emotional_image_position": 50,
-        "lastmod_datetime": "2022-03-16T11:29:38.915804+01:00",
-        "stream_order_by": "recent",
-        "followers_counter": 117
+        id: 20,
+        tags: [],
+        followed: true,
+        order: 0,
+        name: 'Diciottesimo',
+        name_synonyms: '',
+        slug: 'diciottesimo',
+        slogan: '',
+        html_info: undefined,
+        seo_title: '',
+        seo_description: '',
+        auto_follow: 'none',
+        active: true,
+        image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/diciottesimo_7510.png',
+        image_bigger: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/diciottesimo_4703.png',
+        image_big: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/diciottesimo_7082.png',
+        image_medium: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/diciottesimo_4128.png',
+        image_small: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/diciottesimo_9547.png',
+        emotional_image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/diciottesimo_0577.jpg',
+        emotional_image_position: 50,
+        lastmod_datetime: '2022-03-16T11:29:38.915804+01:00',
+        stream_order_by: 'recent',
+        followers_counter: 117
     },
     {
-        "id": 14,
-        "tags": [],
-        "followed": true,
-        "order": 0,
-        "name": "Dodicesimo",
-        "name_synonyms": "",
-        "slug": "dodicesimo",
-        "slogan": "",
-        "html_info": null,
-        "seo_title": "",
-        "seo_description": "",
-        "auto_follow": "none",
-        "active": true,
-        "image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/dodicesimo_7967.png",
-        "image_bigger": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/dodicesimo_2679.png",
-        "image_big": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/dodicesimo_3516.png",
-        "image_medium": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/dodicesimo_2780.png",
-        "image_small": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/dodicesimo_6346.png",
-        "emotional_image_original": "https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/dodicesimo_8289.jpg",
-        "emotional_image_position": 50,
-        "lastmod_datetime": "2022-03-16T11:28:12.013730+01:00",
-        "stream_order_by": "recent",
-        "followers_counter": 122
+        id: 14,
+        tags: [],
+        followed: true,
+        order: 0,
+        name: 'Dodicesimo',
+        name_synonyms: '',
+        slug: 'dodicesimo',
+        slogan: '',
+        html_info: undefined,
+        seo_title: '',
+        seo_description: '',
+        auto_follow: 'none',
+        active: true,
+        image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/original/dodicesimo_7967.png',
+        image_bigger: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/bigger/dodicesimo_2679.png',
+        image_big: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/big/dodicesimo_3516.png',
+        image_medium: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/medium/dodicesimo_2780.png',
+        image_small: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/small/dodicesimo_6346.png',
+        emotional_image_original: 'https://static.quentrix.com/dhpyt711mb8h2n3m/upfiles/categories/e_original/dodicesimo_8289.jpg',
+        emotional_image_position: 50,
+        lastmod_datetime: '2022-03-16T11:28:12.013730+01:00',
+        stream_order_by: 'recent',
+        followers_counter: 122
     }
 ];
 export { prefetchedCategories };

package/lib/esm/components/CategoryAutocomplete/CategoryAutocomplete.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import parse from 'autosuggest-highlight/parse';
@@ -81,14 +81,23 @@ const CategoryAutocomplete = (inProps) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
     };
     // Render
-    return (_jsx(Root, Object.assign({ className: classes.root, multiple: multiple, open: open, onOpen: handleOpen, onClose: handleClose, filterSelectedOptions: !checkboxSelect, disableCloseOnSelect: checkboxSelect, options: categories || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.categoryAutocomplete.empty", defaultMessage: "ui.categoryAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderTags: (value, getTagProps) => {
-            return value.map((option, index) => (_jsx(Chip, Object.assign({ id: option.id, label: option.name, color: option.color }, getTagProps({ index })), option.id)));
+    return (_jsx(Root, Object.assign({ className: classes.root, multiple: multiple, open: open, onOpen: handleOpen, onClose: handleClose, filterSelectedOptions: !checkboxSelect, disableCloseOnSelect: checkboxSelect, options: categories || [], getOptionLabel: (option) => option.name || '', value: value, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: _jsx(FormattedMessage, { id: "ui.categoryAutocomplete.empty", defaultMessage: "ui.categoryAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, value) => value.id === option.id, renderValue: (value, getItemProps) => {
+            if (multiple) {
+                return value.map((option, index) => {
+                    const _a = getItemProps({ index }), { key } = _a, rest = __rest(_a, ["key"]);
+                    return _jsx(Chip, Object.assign({ id: option.id, label: option.name, color: option.color }, rest), key);
+                });
+            }
+            return _jsx(Chip, Object.assign({ id: value.id, label: value.name, color: value.color }, getItemProps));
         }, renderOption: (props, option, { selected, inputValue }) => {
+            const { key } = props, rest = __rest(props, ["key"]);
             const matches = match(option.name, inputValue);
             const parts = parse(option.name, matches);
-            return (_jsxs("li", Object.assign({}, props, { children: [checkboxSelect && _jsx(Checkbox, { style: { marginRight: 8 }, checked: selected }), _jsx(Chip, { label: _jsx(Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) })] })));
+            return (_jsxs("li", Object.assign({}, rest, { children: [checkboxSelect && _jsx(Checkbox, { style: { marginRight: 8 }, checked: selected }), _jsx(Chip, { label: _jsx(Fragment, { children: parts.map((part, index) => (_jsx("span", Object.assign({ style: { fontWeight: part.highlight ? 700 : 400 } }, { children: part.text }), index))) }) })] }), key));
         }, renderInput: (params) => {
-            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", InputProps: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: (_jsxs(Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) }) })));
+            return (_jsx(TextField, Object.assign({}, params, TextFieldProps, { margin: "dense", slotProps: {
+                    input: Object.assign(Object.assign({}, params.InputProps), { autoComplete: 'categories', endAdornment: (_jsxs(_Fragment, { children: [isLoading ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : null, params.InputProps.endAdornment] })) })
+                } })));
         } }, rest)));
 };
 export default CategoryAutocomplete;

package/lib/esm/components/CategoryFollowButton/CategoryFollowButton.js

@@ -1,12 +1,11 @@
 import { __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
-import { styled } from '@mui/material';
+import { Button, styled } from '@mui/material';
 import { CacheStrategies, Logger } from '@selfcommunity/utils';
 import { SCPreferences, useSCContext, useSCFetchCategory, useSCPaymentsEnabled, useSCPreferences, useSCUser } from '@selfcommunity/react-core';
 import { SCCategoryAutoFollowType, SCContentType } from '@selfcommunity/types';
 import { SCOPE_SC_UI } from '../../constants/Errors';
-import { LoadingButton } from '@mui/lab';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -15,11 +14,11 @@ const PREFIX = 'SCCategoryFollowButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    overridesResolver: (_props, styles) => styles.root
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Follow Category Button component. Learn about the available props and the CSS API.
 

package/lib/esm/components/ChangeCover/ChangeCover.js

@@ -173,12 +173,8 @@ export default function ChangeCover(inProps) {
                             vertical: 'bottom',
                             horizontal: 'right'
                         } }, { children: _jsxs(Box, Object.assign({ sx: { p: '10px' } }, { children: [_jsx(Typography, Object.assign({ component: "h3" }, { children: _jsx(FormattedMessage, { id: "ui.changeCover.button.uploadA", defaultMessage: "ui.changeCover.button.uploadA" }) })), _jsx(Divider, {}), _jsx(Typography, Object.assign({ component: "span" }, { children: _jsx(FormattedMessage, { id: "ui.changeCover.info", defaultMessage: "ui.changeCover.info", values: {
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                            // @ts-ignore
-                                            li: (chunks) => _jsx("li", { children: chunks }),
-                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                            // @ts-ignore
-                                            ul: (chunks) => _jsx("ul", { children: chunks })
+                                            li: (chunks) => _jsx("li", { children: chunks }, "ui.changeCover.info.li"),
+                                            ul: (chunks) => _jsx("ul", { children: chunks }, "ui.changeCover.info.ul")
                                         } }) }))] })) })))] })), openDeleteCoverDialog && (_jsx(ConfirmDialog, { open: openDeleteCoverDialog, title: _jsx(FormattedMessage, { id: "ui.changeCover.dialog.msg", defaultMessage: "ui.changeCover.dialog.msg" }), onConfirm: deleteCover, isUpdating: isDeletingCover, onClose: () => {
                     setOpenDeleteCoverDialog(false);
                     setAnchorEl(null);

package/lib/esm/components/ChangeGroupCover/ChangeGroupCover.js

@@ -1,20 +1,19 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useRef, useState } from 'react';
-import { Alert, styled, Icon } from '@mui/material';
+import { Alert, styled, Icon, Button } from '@mui/material';
 import { SCUserContext } from '@selfcommunity/react-core';
 import { defineMessages, useIntl } from 'react-intl';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import { PREFIX } from './constants';
-import { LoadingButton } from '@mui/lab';
 import { GroupService } from '@selfcommunity/api-services';
 import { SCOPE_SC_UI } from '../../constants/Errors';
 import { Logger } from '@selfcommunity/utils';
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));

package/lib/esm/components/ChangeGroupPicture/ChangeGroupPicture.js

@@ -1,7 +1,7 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useRef, useState } from 'react';
-import { Alert, styled, Icon } from '@mui/material';
+import { Alert, styled, Icon, Button } from '@mui/material';
 import { SCUserContext } from '@selfcommunity/react-core';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
@@ -10,7 +10,6 @@ import { SCOPE_SC_UI } from '../../constants/Errors';
 import { GroupService } from '@selfcommunity/api-services';
 import { Logger } from '@selfcommunity/utils';
 import { defineMessages, useIntl } from 'react-intl';
-import { LoadingButton } from '@mui/lab';
 const messages = defineMessages({
     errorLoadImage: {
         id: 'ui.changeGroupPicture.alert',
@@ -20,7 +19,7 @@ const messages = defineMessages({
 const classes = {
     root: `${PREFIX}-root`
 };
-const Root = styled(LoadingButton, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root'
 })(() => ({}));

package/lib/esm/components/ChangePicture/ChangePictureDialog/ChangePictureDialog.js

@@ -30,7 +30,7 @@ export default function ChangePictureDialog(props) {
     const scUserContext = useContext(SCUserContext);
     const scContext = useContext(SCContext);
     //STATE
-    const [file, setFile] = useState(scUserContext.user['avatar']);
+    const [, setFile] = useState(scUserContext.user['avatar']);
     const [error, setError] = useState(false);
     const [alert, setAlert] = useState(false);
     const [primary, setPrimary] = useState(null);
@@ -175,11 +175,7 @@ export default function ChangePictureDialog(props) {
      * Renders root object
      */
     return (_jsxs(Root, Object.assign({ className: classNames(classes.dialogRoot, className), title: _jsx(FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest, { children: [_jsxs(Box, Object.assign({ className: classes.upload }, { children: [alert ? (_jsx(Alert, Object.assign({ color: "error", onClose: () => setAlert(false) }, { children: _jsx(FormattedMessage, { id: "ui.changePicture.button.upload.alert", defaultMessage: "ui.changePicture.button.upload.alert" }) }))) : (_jsxs(_Fragment, { children: [_jsx("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(Button, Object.assign({ disabled: loading || isDeletingAvatar, variant: "outlined", onClick: () => fileInput.current.click(), color: error ? 'error' : 'primary', startIcon: loading ? null : _jsx(Icon, { children: "folder_open" }) }, { children: loading ? (_jsx(CircularProgress, { size: 15 })) : (_jsx(_Fragment, { children: error ? (_jsx(FormattedMessage, { id: "ui.changePicture.button.upload.error", defaultMessage: "ui.changePicture.button.upload.error" })) : (_jsx(FormattedMessage, { id: "ui.changePicture.button.upload", defaultMessage: "ui.changePicture.button.upload" })) })) }))] })), _jsx(Typography, Object.assign({ component: "span", fontSize: "small", color: "text.secondary", gutterBottom: true }, { children: _jsx(FormattedMessage, { id: "ui.changePicture.info", defaultMessage: "ui.changePicture.info", values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                li: (chunks) => _jsx("li", { children: chunks }),
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                ul: (chunks) => _jsx("ul", { children: chunks })
-                            } }) }))] })), _jsx(ImageList, Object.assign({ cols: 3, rowHeight: 'auto', id: "avatarsList", classes: { root: classes.imagesList } }, { children: avatars.map((avatar) => (_jsx(Box, Object.assign({ className: classes.imageItem }, { children: _jsxs(ImageListItem, Object.assign({ className: primary === avatar.id ? classes.primary : '', onClick: () => selectPrimaryAvatar(avatar) }, { children: [_jsx("img", { src: avatar.avatar, loading: "lazy", alt: 'img' }), _jsx(ImageListItemBar, { position: "top", actionIcon: _jsx(IconButton, Object.assign({ onClick: () => handleOpen(avatar.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) })) })] }), avatar.id) }), avatar.id))) })), openDeleteAvatarDialog && (_jsx(ConfirmDialog, { open: openDeleteAvatarDialog, title: _jsx(FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))] })));
+                                li: (chunks) => _jsx("li", { children: chunks }, "ui.changePicture.info.li"),
+                                ul: (chunks) => _jsx("ul", { children: chunks }, "ui.changePicture.info.ul")
+                            } }) }))] })), _jsx(ImageList, Object.assign({ cols: 3, rowHeight: "auto", id: "avatarsList", classes: { root: classes.imagesList } }, { children: avatars.map((avatar) => (_jsx(Box, Object.assign({ className: classes.imageItem }, { children: _jsxs(ImageListItem, Object.assign({ className: primary === avatar.id ? classes.primary : '', onClick: () => selectPrimaryAvatar(avatar) }, { children: [_jsx("img", { src: avatar.avatar, loading: "lazy", alt: "img" }), _jsx(ImageListItemBar, { position: "top", actionIcon: _jsx(IconButton, Object.assign({ onClick: () => handleOpen(avatar.id), size: "small" }, { children: _jsx(Icon, { children: "delete" }) })) })] }), avatar.id) }), avatar.id))) })), openDeleteAvatarDialog && (_jsx(ConfirmDialog, { open: openDeleteAvatarDialog, title: _jsx(FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: _jsx(FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))] })));
 }

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

@@ -1,6 +1,6 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Grid, Hidden, Stack, useTheme, Skeleton, styled } from '@mui/material';
+import { Box, Grid, Stack, Skeleton, styled } from '@mui/material';
 import { PREFIX } from './constants';
 import classNames from 'classnames';
 const classes = {
@@ -78,7 +78,5 @@ const Root = styled(Grid, {
  */
 export default function CheckoutSkeleton(inProps) {
     const { className = {} } = inProps, rest = __rest(inProps, ["className"]);
-    // HOOKS
-    const theme = useTheme();
-    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), container: true }, rest, { children: [_jsx(Grid, Object.assign({ item: true, xs: 12, md: 6, className: classNames(classes.left, classes.paper, classes.header) }, { children: _jsx(Skeleton, { variant: "rounded", height: 150, width: '100%' }) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 6, className: classNames(classes.right, classes.header) }, { children: _jsx(Hidden, Object.assign({ mdDown: true }, { children: _jsxs(Stack, Object.assign({ direction: "column", spacing: 2, pt: 2 }, { children: [_jsx(Skeleton, { variant: "rounded", height: 20, width: 190 }), _jsx(Skeleton, { variant: "rounded", height: 90, width: '100%' })] })) })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 6, className: classNames(classes.left, classes.paper) }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 30, width: 140 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 110 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 150 }), _jsxs(Hidden, Object.assign({ mdDown: true }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 200 })] }))] })) })), _jsx(Grid, Object.assign({ item: true, xs: 12, md: 6, className: classes.right }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 110 }), _jsxs(Hidden, Object.assign({ mdDown: true }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 70 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 340 })] }))] })) }))] })));
+    return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className), container: true, width: "100%" }, rest, { children: [_jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classNames(classes.left, classes.paper, classes.header) }, { children: _jsx(Skeleton, { variant: "rounded", height: 150, width: "100%" }) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classNames(classes.right, classes.header) }, { children: _jsxs(Stack, Object.assign({ sx: { display: { xs: 'none', md: 'flex' } }, direction: "column", spacing: 2, pt: 2 }, { children: [_jsx(Skeleton, { variant: "rounded", height: 20, width: 190 }), _jsx(Skeleton, { variant: "rounded", height: 90, width: "100%" })] })) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classNames(classes.left, classes.paper) }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 30, width: 140 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 110 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 150 }), _jsxs(Box, Object.assign({ sx: { display: { xs: 'none', md: 'block' } } }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 200 })] }))] })) })), _jsx(Grid, Object.assign({ size: { xs: 12, md: 6 }, className: classes.right }, { children: _jsxs(Box, Object.assign({ className: classes.content }, { children: [_jsx(Skeleton, { variant: "rounded", height: 110 }), _jsxs(Box, Object.assign({ sx: { display: { xs: 'none', md: 'block' } } }, { children: [_jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 70 }), _jsx("br", {}), _jsx(Skeleton, { variant: "rounded", height: 340 })] }))] })) }))] })));
 }

package/lib/esm/components/CheckoutReturnDialog/CheckoutReturnDialog.js

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { Button, CircularProgress, Dialog, DialogContent, DialogTitle, Slide, Stack, styled, Typography } from '@mui/material';
 import { useThemeProps } from '@mui/system';
@@ -27,9 +27,9 @@ const Root = styled(Dialog, {
 const Transition = React.forwardRef(function Transition(props, ref) {
     return _jsx(Slide, Object.assign({ direction: "up", ref: ref }, props));
 });
-const NoTransition = React.forwardRef(function NoTransition(props, ref) {
-    return _jsxs(React.Fragment, { children: [" ", props.children, " "] });
-});
+const NoTransition = function NoTransition(props) {
+    return _jsx(React.Fragment, { children: props.children });
+};
 export default function CheckoutReturnDialog(inProps) {
     // PROPS
     const props = useThemeProps({
@@ -40,7 +40,7 @@ export default function CheckoutReturnDialog(inProps) {
     // STATE
     const [loading, setLoading] = useState(true);
     const [contentType, setContentType] = useState(null);
-    const [contentId, setContentId] = useState(null);
+    const [, setContentId] = useState(null);
     const [content, setContent] = useState(null);
     const [paymentPrice, setPaymentPrice] = useState(null);
     // HOOKS
@@ -136,25 +136,25 @@ export default function CheckoutReturnDialog(inProps) {
         if (contentType === SCContentType.EVENT) {
             footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: paymentPrice && paymentPrice.recurring_interval ? (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.recurrent.event", defaultMessage: "ui.checkoutReturnDialog.buy.recurrent.event", values: {
                                 frequency: getPaymentRecurringLabel(paymentPrice.recurring_interval, scContext.settings.locale.default)
-                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.event", defaultMessage: "ui.checkoutReturnDialog.buy.event" })) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.event.button", defaultMessage: "ui.checkoutReturnDialog.event.button" }) }))] }));
+                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.event", defaultMessage: "ui.checkoutReturnDialog.buy.event" })) })), _jsx(Button, Object.assign({ size: "medium", variant: "contained", onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.event.button", defaultMessage: "ui.checkoutReturnDialog.event.button" }) }))] }));
         }
         else if (contentType === SCContentType.CATEGORY) {
-            footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy", defaultMessage: "ui.checkoutReturnDialog.buy" }) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.category.button", defaultMessage: "ui.checkoutReturnDialog.category.button" }) }))] }));
+            footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy", defaultMessage: "ui.checkoutReturnDialog.buy" }) })), _jsx(Button, Object.assign({ size: "medium", variant: "contained", onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.category.button", defaultMessage: "ui.checkoutReturnDialog.category.button" }) }))] }));
         }
         else if (contentType === SCContentType.COURSE) {
             footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: paymentPrice && paymentPrice.recurring_interval ? (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.recurrent.course", defaultMessage: "ui.checkoutReturnDialog.buy.recurrent.course", values: {
                                 frequency: getPaymentRecurringLabel(paymentPrice.recurring_interval, scContext.settings.locale.default)
-                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.course", defaultMessage: "ui.checkoutReturnDialog.buy.course" })) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.course.button", defaultMessage: "ui.checkoutReturnDialog.course.button" }) }))] }));
+                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.course", defaultMessage: "ui.checkoutReturnDialog.buy.course" })) })), _jsx(Button, Object.assign({ size: "medium", variant: "contained", onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.course.button", defaultMessage: "ui.checkoutReturnDialog.course.button" }) }))] }));
         }
         else if (contentType === SCContentType.GROUP) {
             footer = (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: paymentPrice && paymentPrice.recurring_interval ? (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.recurrent.group", defaultMessage: "ui.checkoutReturnDialog.buy.recurrent.group", values: {
                                 frequency: getPaymentRecurringLabel(paymentPrice.recurring_interval, scContext.settings.locale.default)
-                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.group", defaultMessage: "ui.checkoutReturnDialog.buy.group" })) })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.group.button", defaultMessage: "ui.checkoutReturnDialog.group.button" }) }))] }));
+                            } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.group", defaultMessage: "ui.checkoutReturnDialog.buy.group" })) })), _jsx(Button, Object.assign({ size: "medium", variant: "contained", onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.group.button", defaultMessage: "ui.checkoutReturnDialog.group.button" }) }))] }));
         }
         else if (contentType === SCContentType.COMMUNITY) {
             footer = (_jsxs(_Fragment, { children: [paymentPrice && (_jsxs(_Fragment, { children: [_jsx(Typography, Object.assign({ color: "primary" }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.payment.success", defaultMessage: "ui.checkoutReturnDialog.payment.success" }) })), _jsx(Typography, Object.assign({ variant: "body2", color: "textSecondary" }, { children: paymentPrice.recurring_interval ? (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.recurrent.community", defaultMessage: "ui.checkoutReturnDialog.buy.recurrent.community", values: {
                                         frequency: getPaymentRecurringLabel(paymentPrice.recurring_interval, scContext.settings.locale.default)
-                                    } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.community", defaultMessage: "ui.checkoutReturnDialog.buy.community" })) }))] })), _jsx(Button, Object.assign({ size: "medium", variant: 'contained', onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.community.button", defaultMessage: "ui.checkoutReturnDialog.community.button" }) }))] }));
+                                    } })) : (_jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.buy.community", defaultMessage: "ui.checkoutReturnDialog.buy.community" })) }))] })), _jsx(Button, Object.assign({ size: "medium", variant: "contained", onClick: handleViewPurchasedObject, component: Link, className: classes.btn }, { children: _jsx(FormattedMessage, { id: "ui.checkoutReturnDialog.community.button", defaultMessage: "ui.checkoutReturnDialog.community.button" }) }))] }));
         }
         return (_jsxs(Stack, Object.assign({ spacing: 2, justifyContent: "center", alignItems: "center" }, { children: [_jsx(Grow, Object.assign({ in: true, style: { transitionDelay: '300ms' } }, { children: _jsx("img", { src: SuccessPlaceholder, className: classes.img, alt: intl.formatMessage({
                             id: 'ui.checkoutReturnDialog.buy',
@@ -164,5 +164,5 @@ export default function CheckoutReturnDialog(inProps) {
     if (!isPaymentsEnabled) {
         return null;
     }
-    return (_jsxs(Root, Object.assign({ maxWidth: 'sm', fullWidth: true, scroll: 'paper', open: true }, (disableInitialTransition ? { TransitionComponent: NoTransition } : { TransitionComponent: Transition }), { className: classNames(classes.root, className), TransitionComponent: Transition }, rest, { children: [_jsx(DialogTitle, { children: renderTitle() }), _jsx(DialogContent, { children: loading ? _jsx(CircularProgress, {}) : renderContent() })] })));
+    return (_jsxs(Root, Object.assign({ maxWidth: "sm", fullWidth: true, scroll: "paper", open: true }, (disableInitialTransition ? { slots: { transition: NoTransition } } : { slots: { transition: Transition } }), { className: classNames(classes.root, className) }, rest, { children: [_jsx(DialogTitle, { children: renderTitle() }), _jsx(DialogContent, { children: loading ? _jsx(CircularProgress, {}) : renderContent() })] })));
 }

package/lib/esm/components/CommentObjectReply/CommentObjectReply.js

@@ -3,11 +3,10 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useMemo, useRef, useState } from 'react';
 import Widget from '../Widget';
 import { FormattedMessage } from 'react-intl';
-import { Avatar, Icon, IconButton, Stack, useMediaQuery, useTheme, styled } from '@mui/material';
+import { Avatar, Icon, IconButton, Stack, useMediaQuery, useTheme, styled, Button } from '@mui/material';
 import { useSCUser } from '@selfcommunity/react-core';
 import Editor from '../Editor';
 import classNames from 'classnames';
-import { LoadingButton } from '@mui/lab';
 import BaseItem from '../../shared/BaseItem';
 import UserAvatar from '../../shared/UserAvatar';
 import { useThemeProps } from '@mui/system';
@@ -75,7 +74,7 @@ export default function CommentObjectReply(inProps) {
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('md'));
     // REFS
-    let editor = useRef();
+    let editor = useRef(null);
     /**
      * When CommentObjectReply is mount
      * if autoFocus === true focus on editor
@@ -131,5 +130,5 @@ export default function CommentObjectReply(inProps) {
     // RENDER
     return (_jsx(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: classNames(classes.root, className), image: showAvatar &&
             (!scUserContext.user ? (_jsx(Avatar, { variant: "circular", className: classes.avatar })) : (_jsx(UserAvatar, Object.assign({ hide: !scUserContext.user.community_badge }, { children: _jsx(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) })))), secondary: _jsxs(Widget, Object.assign({ className: classNames(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [media && media.length > 0 && _jsx(PreviewComponent, { value: media, onChange: handleChangeMedias, className: classes.media }), _jsx(Editor, Object.assign({ ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true, action: replyIcon &&
-                        onReply && (_jsx(IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply, disabled: uploadingMedia }, { children: _jsx(Icon, { children: "send" }) }))) }, EditorProps, { MediaPluginProps: { isUploading: setUploadingMedia, onMediaAdd: handleChangeMedia } })), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && (_jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && (_jsxs(_Fragment, { children: [onCancel && (_jsx(LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), _jsx(LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
+                        onReply && (_jsx(IconButton, Object.assign({ onClick: handleReply, className: classes.iconReply, disabled: uploadingMedia }, { children: _jsx(Icon, { children: "send" }) }))) }, EditorProps, { MediaPluginProps: { isUploading: setUploadingMedia, onMediaAdd: handleChangeMedia } })), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && !replyIcon && (_jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && (_jsxs(_Fragment, { children: [onCancel && (_jsx(Button, Object.assign({ variant: "text", size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), _jsx(Button, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
 }

package/lib/esm/components/CommentsFeedObject/CommentsFeedObject.js

@@ -78,7 +78,7 @@ export default function CommentsFeedObject(inProps) {
     const objId = commentsObject.feedObject ? commentsObject.feedObject.id : null;
     const commentObjId = commentObj ? commentObj.id : null;
     // REFS
-    const commentsContainerRef = useRef();
+    const commentsContainerRef = useRef(null);
     /**
      * Total number of comments
      */
@@ -88,7 +88,7 @@ export default function CommentsFeedObject(inProps) {
      */
     const renderTitle = useMemo(() => () => {
         if (showTitle) {
-            return (_jsx(Typography, Object.assign({ variant: "h6", gutterBottom: true, color: 'inherit' }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.title", defaultMessage: "ui.commentsObject.title", values: { total: total } }) })));
+            return (_jsx(Typography, Object.assign({ variant: "h6", gutterBottom: true, color: "inherit" }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.title", defaultMessage: "ui.commentsObject.title", values: { total: total } }) })));
         }
         return null;
     }, [total, isLoading]);