@selfcommunity/react-ui 0.7.50-events.41 → 0.7.50-events.43

package/lib/esm/components/CategoryTrendingFeedWidget/CategoryTrendingFeedWidget.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useReducer, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import List from '@mui/material/List';
@@ -174,26 +175,13 @@ export default function CategoryTrendingFeedWidget(inProps) {
     };
     // RENDER
     if ((!contentAvailability && !scUserContext.user) || (autoHide && !state.count && state.initialized)) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
     if (!state.initialized) {
-        return React.createElement(Skeleton, null);
+        return _jsx(Skeleton, {});
     }
-    const content = (React.createElement(CardContent, null,
-        React.createElement(Typography, { className: classes.title, variant: "h5" },
-            React.createElement(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.title", defaultMessage: "ui.categoryTrendingFeedWidget.title" })),
-        !state.count ? (React.createElement(Typography, { className: classes.noResults, variant: "body2" },
-            React.createElement(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noResults", defaultMessage: "ui.categoryTrendingFeedWidget.noResults" }))) : (React.createElement(React.Fragment, null,
-            React.createElement(List, null, state.results.slice(0, state.visibleItems).map((obj) => (React.createElement(ListItem, { key: obj[obj.type].id },
-                React.createElement(FeedObject, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)))))),
-            state.count > state.visibleItems && (React.createElement(Button, Object.assign({ className: classes.showMore }, (isMobile
-                ? { onClick: handleToggleDialogOpen }
-                : { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_TRENDING_FEED_ROUTE_NAME, scCategory) })),
-                React.createElement(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.button.showAll", defaultMessage: "ui.categoryTrendingFeedWidget.button.showAll" }))))),
-        openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.categoryTrendingFeedWidget.title", id: "ui.categoryTrendingFeedWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
-            React.createElement(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: React.createElement(FeedObjectSkeleton, Object.assign({ elevation: 0 }, FeedObjectProps)), height: isMobile ? '100%' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
-                    React.createElement(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noMoreResults", defaultMessage: "ui.categoryTrendingFeedWidget.noMoreResults" })) },
-                React.createElement(List, null, state.results.map((obj) => (React.createElement(ListItem, { key: obj[obj.type].id },
-                    React.createElement(FeedObject, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)))))))))));
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
+    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.title", defaultMessage: "ui.categoryTrendingFeedWidget.title" }) })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noResults", defaultMessage: "ui.categoryTrendingFeedWidget.noResults" }) }))) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((obj) => (_jsx(ListItem, { children: _jsx(FeedObject, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)) }, obj[obj.type].id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore }, (isMobile
+                        ? { onClick: handleToggleDialogOpen }
+                        : { component: Link, to: scRoutingContext.url(SCRoutes.CATEGORY_TRENDING_FEED_ROUTE_NAME, scCategory) }), { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.button.showAll", defaultMessage: "ui.categoryTrendingFeedWidget.button.showAll" }) })))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.categoryTrendingFeedWidget.title", id: "ui.categoryTrendingFeedWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(FeedObjectSkeleton, Object.assign({ elevation: 0 }, FeedObjectProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingFeedWidget.noMoreResults", defaultMessage: "ui.categoryTrendingFeedWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((obj) => (_jsx(ListItem, { children: _jsx(FeedObject, Object.assign({ elevation: 0, feedObject: obj[obj.type] }, FeedObjectProps)) }, obj[obj.type].id))) }) })) })))] }));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import Widget from '../Widget';
 import List from '@mui/material/List';
 import { styled } from '@mui/material/styles';
@@ -35,7 +35,5 @@ const Root = styled(Widget, {
  *
  */
 export default function CategoryTrendingFeedWidgetSkeleton(props) {
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props),
-        React.createElement(CardContent, null,
-            React.createElement(List, { className: classes.list }, [...Array(4)].map((post, index) => (React.createElement(FeedObjectSkeleton, { key: index, elevation: 0 })))))));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsx(CardContent, { children: _jsx(List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((post, index) => (_jsx(FeedObjectSkeleton, { elevation: 0 }, index))) })) }) })));
 }

package/lib/esm/components/CategoryTrendingUsersWidget/CategoryTrendingUsersWidget.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useMemo, useReducer, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import List from '@mui/material/List';
@@ -166,24 +167,11 @@ export default function CategoryTrendingUsersWidget(inProps) {
     };
     // RENDER
     if ((!contentAvailability && !scUserContext.user) || (autoHide && !state.count && state.initialized)) {
-        return React.createElement(HiddenPlaceholder, null);
+        return _jsx(HiddenPlaceholder, {});
     }
     if (!state.initialized) {
-        return React.createElement(Skeleton, null);
+        return _jsx(Skeleton, {});
     }
-    const content = (React.createElement(CardContent, null,
-        React.createElement(Typography, { className: classes.title, variant: "h5" },
-            React.createElement(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.title", defaultMessage: "ui.categoryTrendingUsersWidget.title" })),
-        !state.count ? (React.createElement(Typography, { className: classes.noResults, variant: "body2" },
-            React.createElement(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noResults", defaultMessage: "ui.categoryTrendingUsersWidget.noResults" }))) : (React.createElement(React.Fragment, null,
-            React.createElement(List, null, state.results.slice(0, state.visibleItems).map((user) => (React.createElement(ListItem, { key: user.id },
-                React.createElement(User, Object.assign({ elevation: 0, user: user }, UserProps)))))),
-            state.count > state.visibleItems && (React.createElement(Button, { className: classes.showMore, onClick: handleToggleDialogOpen },
-                React.createElement(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.button.showAll", defaultMessage: "ui.categoryTrendingUsersWidget.button.showAll" }))))),
-        openDialog && (React.createElement(DialogRoot, Object.assign({ className: classes.dialogRoot, title: React.createElement(FormattedMessage, { defaultMessage: "ui.categoryTrendingUsersWidget.title", id: "ui.categoryTrendingUsersWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps),
-            React.createElement(InfiniteScroll, { dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: React.createElement(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: React.createElement(Typography, { className: classes.endMessage },
-                    React.createElement(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noMoreResults", defaultMessage: "ui.categoryTrendingUsersWidget.noMoreResults" })) },
-                React.createElement(List, null, state.results.map((user) => (React.createElement(ListItem, { key: user.id },
-                    React.createElement(User, Object.assign({ elevation: 0, user: user }, UserProps)))))))))));
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest), content));
+    const content = (_jsxs(CardContent, { children: [_jsx(Typography, Object.assign({ className: classes.title, variant: "h5" }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.title", defaultMessage: "ui.categoryTrendingUsersWidget.title" }) })), !state.count ? (_jsx(Typography, Object.assign({ className: classes.noResults, variant: "body2" }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noResults", defaultMessage: "ui.categoryTrendingUsersWidget.noResults" }) }))) : (_jsxs(React.Fragment, { children: [_jsx(List, { children: state.results.slice(0, state.visibleItems).map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, UserProps)) }, user.id))) }), state.count > state.visibleItems && (_jsx(Button, Object.assign({ className: classes.showMore, onClick: handleToggleDialogOpen }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.button.showAll", defaultMessage: "ui.categoryTrendingUsersWidget.button.showAll" }) })))] })), openDialog && (_jsx(DialogRoot, Object.assign({ className: classes.dialogRoot, title: _jsx(FormattedMessage, { defaultMessage: "ui.categoryTrendingUsersWidget.title", id: "ui.categoryTrendingUsersWidget.title", values: { total: state.count } }), onClose: handleToggleDialogOpen, open: openDialog }, DialogProps, { children: _jsx(InfiniteScroll, Object.assign({ dataLength: state.results.length, next: handleNext, hasMoreNext: Boolean(state.next), loaderNext: _jsx(UserSkeleton, Object.assign({ elevation: 0 }, UserProps)), height: isMobile ? '100%' : 400, endMessage: _jsx(Typography, Object.assign({ className: classes.endMessage }, { children: _jsx(FormattedMessage, { id: "ui.categoryTrendingUsersWidget.noMoreResults", defaultMessage: "ui.categoryTrendingUsersWidget.noMoreResults" }) })) }, { children: _jsx(List, { children: state.results.map((user) => (_jsx(ListItem, { children: _jsx(User, Object.assign({ elevation: 0, user: user }, UserProps)) }, user.id))) }) })) })))] }));
+    return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: content })));
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import Widget from '../Widget';
 import List from '@mui/material/List';
 import { styled } from '@mui/material/styles';
@@ -35,8 +35,5 @@ const Root = styled(Widget, {
  *
  */
 export default function CategoryTrendingPeopleWidgetSkeleton(props) {
-    return (React.createElement(Root, Object.assign({ className: classes.root }, props),
-        React.createElement(CardContent, null,
-            React.createElement(List, { className: classes.list }, [...Array(4)].map((person, index) => (React.createElement(ListItem, { key: index },
-                React.createElement(UserSkeleton, { elevation: 0 }))))))));
+    return (_jsx(Root, Object.assign({ className: classes.root }, props, { children: _jsx(CardContent, { children: _jsx(List, Object.assign({ className: classes.list }, { children: [...Array(4)].map((person, index) => (_jsx(ListItem, { children: _jsx(UserSkeleton, { elevation: 0 }) }, index))) })) }) })));
 }

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

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useContext, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Alert, Box, Button, Divider, ListItemIcon, Menu, MenuItem, Popover, SwipeableDrawer, Typography, useMediaQuery, useTheme } from '@mui/material';
@@ -166,60 +167,36 @@ export default function ChangeCover(inProps) {
      * Renders change cover menu items
      */
     function renderMenuItems() {
-        return (React.createElement(Box, null, loading ? (React.createElement(MenuItem, { sx: { justifyContent: 'center' } },
-            React.createElement(CircularProgress, { size: 15 }))) : (React.createElement(React.Fragment, null,
-            React.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
-            React.createElement(MenuItem, { disabled: loading, onClick: () => fileInput.current.click(), className: classes.addMenuItem },
-                React.createElement(ListItemIcon, null,
-                    React.createElement(Icon, null, "add_circle_outline")),
-                React.createElement(FormattedMessage, { id: "ui.changeCover.button.upload", defaultMessage: "ui.changeCover.button.upload" })),
-            hasCover && (React.createElement(MenuItem, { className: classes.delMenuItem, onClick: () => setOpenDeleteCoverDialog(true) },
-                React.createElement(ListItemIcon, null,
-                    React.createElement(Icon, null, "delete")),
-                React.createElement(FormattedMessage, { id: "ui.changeCover.button.delete", defaultMessage: "ui.changeCover.button.delete" })))))));
+        return (_jsx(Box, { children: loading ? (_jsx(MenuItem, Object.assign({ sx: { justifyContent: 'center' } }, { children: _jsx(CircularProgress, { size: 15 }) }))) : (_jsxs(_Fragment, { children: [_jsx("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsxs(MenuItem, Object.assign({ disabled: loading, onClick: () => fileInput.current.click(), className: classes.addMenuItem }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "add_circle_outline" }) }), _jsx(FormattedMessage, { id: "ui.changeCover.button.upload", defaultMessage: "ui.changeCover.button.upload" })] })), hasCover && (_jsxs(MenuItem, Object.assign({ className: classes.delMenuItem, onClick: () => setOpenDeleteCoverDialog(true) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "delete" }) }), _jsx(FormattedMessage, { id: "ui.changeCover.button.delete", defaultMessage: "ui.changeCover.button.delete" })] })))] })) }));
     }
     /**
      * Renders change cover menu
      */
-    const cc = (React.createElement(React.Fragment, null,
-        React.createElement(Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest),
-            React.createElement(Icon, null, "photo_camera")),
-        React.createElement(React.Fragment, null, isMobile ? (React.createElement(SwipeableDrawer, { open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, renderMenuItems())) : (React.createElement(Menu, { anchorEl: anchorEl, open: open, onClose: handleClose }, renderMenuItems()))),
-        !isMobile && (React.createElement(React.Fragment, null,
-            React.createElement(Button, { className: classes.helpPopover, variant: "contained", onClick: handleClickHelpButton },
-                React.createElement(Icon, null, "help_outline")),
-            isOpen && (React.createElement(Popover, { open: isOpen, anchorEl: anchorElPopover, onClose: handleCloseHelpPopover, anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right'
-                } },
-                React.createElement(Box, { sx: { p: '10px' } },
-                    React.createElement(Typography, { component: "h3" },
-                        React.createElement(FormattedMessage, { id: "ui.changeCover.button.uploadA", defaultMessage: "ui.changeCover.button.uploadA" })),
-                    React.createElement(Divider, null),
-                    React.createElement(Typography, { component: "span" },
-                        React.createElement(FormattedMessage, { id: "ui.changeCover.info", defaultMessage: "ui.changeCover.info", values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                li: (chunks) => React.createElement("li", null, chunks),
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                ul: (chunks) => React.createElement("ul", null, chunks)
-                            } }))))))),
-        openDeleteCoverDialog && (React.createElement(ConfirmDialog, { open: openDeleteCoverDialog, title: React.createElement(FormattedMessage, { id: "ui.changeCover.dialog.msg", defaultMessage: "ui.changeCover.dialog.msg" }), onConfirm: deleteCover, isUpdating: isDeletingCover, onClose: () => {
-                setOpenDeleteCoverDialog(false);
-                setAnchorEl(null);
-            } }))));
+    const cc = (_jsxs(React.Fragment, { children: [_jsx(Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest, { children: _jsx(Icon, { children: "photo_camera" }) })), _jsx(_Fragment, { children: isMobile ? (_jsx(SwipeableDrawer, Object.assign({ open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : (_jsx(Menu, Object.assign({ anchorEl: anchorEl, open: open, onClose: handleClose }, { children: renderMenuItems() }))) }), !isMobile && (_jsxs(_Fragment, { children: [_jsx(Button, Object.assign({ className: classes.helpPopover, variant: "contained", onClick: handleClickHelpButton }, { children: _jsx(Icon, { children: "help_outline" }) })), isOpen && (_jsx(Popover, Object.assign({ open: isOpen, anchorEl: anchorElPopover, onClose: handleCloseHelpPopover, anchorOrigin: {
+                            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 })
+                                        } }) }))] })) })))] })), 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);
+                } }))] }));
     /**
      * If there is an error
      */
     if (alert) {
-        return (React.createElement(Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+        return (_jsx(Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
     /**
      * Renders root object (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return (React.createElement(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }), cc));
+        return (_jsx(Root, Object.assign({}, rest, { className: classNames(classes.root, className) }, { children: cc })));
     }
     return null;
 }

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Alert } from '@mui/material';
 import { SCUserContext } from '@selfcommunity/react-core';
@@ -122,16 +123,13 @@ export default function ChangeGroupCover(inProps) {
      * If there is an error
      */
     if (alert) {
-        return (React.createElement(Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+        return (_jsx(Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
     /**
      * Renders root object (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
-            React.createElement(Root, Object.assign({ className: classNames(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
-                React.createElement(Icon, null, "image"))));
+        return (_jsxs(_Fragment, { children: [_jsx("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(Root, Object.assign({ className: classNames(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: _jsx(Icon, { children: "image" }) }))] }));
     }
     return null;
 }

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Alert } from '@mui/material';
 import Icon from '@mui/material/Icon';
@@ -120,16 +121,13 @@ export default function ChangeGroupPicture(inProps) {
      * If there is an error
      */
     if (alert) {
-        return (React.createElement(Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+        return (_jsx(Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
     /**
      * Renders the component (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
-            React.createElement(Root, Object.assign({ className: classNames(classes.root, className), size: "small", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
-                React.createElement(Icon, null, "photo_camera"))));
+        return (_jsxs(_Fragment, { children: [_jsx("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), _jsx(Root, Object.assign({ className: classNames(classes.root, className), size: "small", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: _jsx(Icon, { children: "photo_camera" }) }))] }));
     }
     return null;
 }

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useContext, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Button } from '@mui/material';
 import ChangePictureDialog from './ChangePictureDialog/ChangePictureDialog';
@@ -62,9 +63,7 @@ export default function ChangePicture(inProps) {
      * Renders the component (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(Root, Object.assign({ className: classNames(classes.root, className), size: "small", variant: "contained", onClick: () => setOpenChangePictureDialog(true) }, rest), iconButton ? (React.createElement(Icon, null, "photo_camera")) : (React.createElement(FormattedMessage, { id: "ui.changePicture.button.change", defaultMessage: "ui.changePicture.button.change" }))),
-            openChangePictureDialog && (React.createElement(ChangePictureDialog, { className: classes.dialog, open: openChangePictureDialog, onChange: (avatar) => onChange && onChange(avatar), onClose: () => setOpenChangePictureDialog(false) }))));
+        return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ className: classNames(classes.root, className), size: "small", variant: "contained", onClick: () => setOpenChangePictureDialog(true) }, rest, { children: iconButton ? (_jsx(Icon, { children: "photo_camera" })) : (_jsx(FormattedMessage, { id: "ui.changePicture.button.change", defaultMessage: "ui.changePicture.button.change" })) })), openChangePictureDialog && (_jsx(ChangePictureDialog, { className: classes.dialog, open: openChangePictureDialog, onChange: (avatar) => onChange && onChange(avatar), onClose: () => setOpenChangePictureDialog(false) }))] }));
     }
     return null;
 }

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

@@ -1,5 +1,6 @@
 import { __awaiter, __rest } from "tslib";
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useEffect, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
@@ -178,25 +179,12 @@ export default function ChangePictureDialog(props) {
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ className: classNames(classes.dialogRoot, className), title: React.createElement(FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest),
-        React.createElement(Box, { className: classes.upload },
-            alert ? (React.createElement(Alert, { color: "error", onClose: () => setAlert(false) },
-                React.createElement(FormattedMessage, { id: "ui.changePicture.button.upload.alert", defaultMessage: "ui.changePicture.button.upload.alert" }))) : (React.createElement(React.Fragment, null,
-                React.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
-                React.createElement(Button, { disabled: loading || isDeletingAvatar, variant: "outlined", onClick: () => fileInput.current.click(), color: error ? 'error' : 'primary', startIcon: loading ? null : React.createElement(Icon, null, "folder_open") }, loading ? (React.createElement(CircularProgress, { size: 15 })) : (React.createElement(React.Fragment, null, error ? (React.createElement(FormattedMessage, { id: "ui.changePicture.button.upload.error", defaultMessage: "ui.changePicture.button.upload.error" })) : (React.createElement(FormattedMessage, { id: "ui.changePicture.button.upload", defaultMessage: "ui.changePicture.button.upload" }))))))),
-            React.createElement(Typography, { component: "span", fontSize: "small", color: "text.secondary", gutterBottom: true },
-                React.createElement(FormattedMessage, { id: "ui.changePicture.info", defaultMessage: "ui.changePicture.info", values: {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        li: (chunks) => React.createElement("li", null, chunks),
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        ul: (chunks) => React.createElement("ul", null, chunks)
-                    } }))),
-        React.createElement(ImageList, { cols: 3, rowHeight: 'auto', id: "avatarsList", classes: { root: classes.imagesList } }, avatars.map((avatar) => (React.createElement(Box, { className: classes.imageItem, key: avatar.id },
-            React.createElement(ImageListItem, { className: primary === avatar.id ? classes.primary : '', key: avatar.id, onClick: () => selectPrimaryAvatar(avatar) },
-                React.createElement("img", { src: avatar.avatar, loading: "lazy", alt: 'img' }),
-                React.createElement(ImageListItemBar, { position: "top", actionIcon: React.createElement(IconButton, { onClick: () => handleOpen(avatar.id), size: "small" },
-                        React.createElement(Icon, null, "delete")) })))))),
-        openDeleteAvatarDialog && (React.createElement(ConfirmDialog, { open: openDeleteAvatarDialog, title: React.createElement(FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: React.createElement(FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))));
+    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) }))] })));
 }

package/lib/esm/components/CommentObject/CommentObject.js

@@ -1,4 +1,5 @@
 import { __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useContext, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Widget from '../Widget';
@@ -133,16 +134,14 @@ export default function CommentObject(inProps) {
      * @param comment
      */
     function renderTimeAgo(comment) {
-        return (React.createElement(React.Fragment, null, linkableCommentDateTime ? (React.createElement(Link, { to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.activityAt },
-            React.createElement(DateTimeAgo, { date: comment.added_at }))) : (React.createElement(DateTimeAgo, { date: comment.added_at }))));
+        return (_jsx(_Fragment, { children: linkableCommentDateTime ? (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.activityAt }, { children: _jsx(DateTimeAgo, { date: comment.added_at }) }))) : (_jsx(DateTimeAgo, { date: comment.added_at })) }));
     }
     /**
      * Render CommentObjectReply action
      * @param comment
      */
     function renderActionReply(comment) {
-        return (React.createElement(Button, { className: classes.reply, variant: "text", onClick: () => reply(comment) },
-            React.createElement(FormattedMessage, { id: "ui.commentObject.reply", defaultMessage: "ui.commentObject.reply" })));
+        return (_jsx(Button, Object.assign({ className: classes.reply, variant: "text", onClick: () => reply(comment) }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.reply", defaultMessage: "ui.commentObject.reply" }) })));
     }
     /**
      * Handle reply: open Editor
@@ -180,7 +179,7 @@ export default function CommentObject(inProps) {
      */
     function handleReply(comment) {
         if (UserUtils.isBlocked(scUserContext.user)) {
-            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -198,7 +197,7 @@ export default function CommentObject(inProps) {
             })
                 .catch((error) => {
                 Logger.error(SCOPE_SC_UI, error);
-                enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
                     variant: 'error',
                     autoHideDuration: 3000
                 });
@@ -258,7 +257,7 @@ export default function CommentObject(inProps) {
      */
     function handleSave(comment) {
         if (UserUtils.isBlocked(scUserContext.user)) {
-            enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -279,7 +278,7 @@ export default function CommentObject(inProps) {
             })
                 .catch((error) => {
                 Logger.error(SCOPE_SC_UI, error);
-                enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                enqueueSnackbar(_jsx(FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
                     variant: 'error',
                     autoHideDuration: 3000
                 });
@@ -300,37 +299,14 @@ export default function CommentObject(inProps) {
         const summaryHtmlTruncated = 'summary_truncated' in comment ? comment.summary_truncated : false;
         const commentHtml = 'summary_html' in comment && truncateContent && summaryHtmlTruncated ? comment.summary_html : comment.html;
         const summaryHtml = getContributionHtml(commentHtml, scRoutingContext.url);
-        return (React.createElement(React.Fragment, { key: comment.id },
-            editComment && editComment.id === comment.id ? (React.createElement(Box, { className: classes.comment },
-                React.createElement(CommentObjectReply, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)))) : (React.createElement(BaseItem, { elevation: 0, className: classes.comment, image: React.createElement(Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }),
-                    React.createElement(UserAvatar, { hide: !obj.author.community_badge },
-                        React.createElement(Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }))), disableTypography: true, primary: React.createElement(React.Fragment, null,
-                    React.createElement(Widget, Object.assign({ className: classes.content, elevation: elevation }, rest),
-                        React.createElement(CardContent, { className: classNames({ [classes.deleted]: obj && obj.deleted }) },
-                            React.createElement(Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }),
-                                React.createElement(Typography, { component: "span" }, comment.author.username)),
-                            React.createElement(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }),
-                            summaryHtmlTruncated && truncateContent && (React.createElement(Link, { to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.showMoreContent },
-                                React.createElement(FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" })))),
-                        scUserContext.user && (React.createElement(Box, { className: classes.commentActionsMenu },
-                            React.createElement(ContributionActionsMenu, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit })))),
-                    React.createElement(Box, { component: "span", className: classes.contentSubSection },
-                        renderTimeAgo(comment),
-                        React.createElement(Bullet, null),
-                        React.createElement(VoteButton, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }),
-                        React.createElement(Bullet, null),
-                        renderActionReply(comment),
-                        React.createElement(VoteAudienceButton, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment }))) })),
-            comment.comment_count > 0 && React.createElement(Box, { className: classes.nestedComments }, renderLatestComment(comment)),
-            scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && (React.createElement(Box, { className: classes.nestedComments },
-                React.createElement(CommentObjectReply, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, key: `reply-${replyComment.id}`, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps))))));
+        return (_jsxs(React.Fragment, { children: [editComment && editComment.id === comment.id ? (_jsx(Box, Object.assign({ className: classes.comment }, { children: _jsx(CommentObjectReply, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : (_jsx(BaseItem, { elevation: 0, className: classes.comment, image: _jsx(Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(UserAvatar, Object.assign({ hide: !obj.author.community_badge }, { children: _jsx(Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: _jsxs(_Fragment, { children: [_jsxs(Widget, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [_jsxs(CardContent, Object.assign({ className: classNames({ [classes.deleted]: obj && obj.deleted }) }, { children: [_jsx(Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: _jsx(Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), _jsx(Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && (_jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.COMMENT_ROUTE_NAME, getRouteData(comment)), className: classes.showMoreContent }, { children: _jsx(FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && (_jsx(Box, Object.assign({ className: classes.commentActionsMenu }, { children: _jsx(ContributionActionsMenu, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), _jsxs(Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), _jsx(Bullet, {}), _jsx(VoteButton, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), _jsx(Bullet, {}), renderActionReply(comment), _jsx(VoteAudienceButton, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: SCContributionType.COMMENT, contribution: comment })] }))] }) })), comment.comment_count > 0 && _jsx(Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && (_jsx(Box, Object.assign({ className: classes.nestedComments }, { children: _jsx(CommentObjectReply, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps), `reply-${replyComment.id}`) })))] }, comment.id));
     }
     /**
      * Render Latest Comment
      * @param comment
      */
     function renderLatestComment(comment) {
-        return (React.createElement(CommentsObject, Object.assign({ feedObject: commentsObject.feedObject, feedObjectType: commentsObject.feedObject ? commentsObject.feedObject.type : feedObjectType, hideAdvertising: true, comments: [].concat(commentsObject.comments).reverse(), endComments: comment.latest_comments, previous: comment.comment_count > comment.latest_comments.length ? commentsObject.next : null, isLoadingPrevious: commentsObject.isLoadingNext, handlePrevious: commentsObject.getNextPage, CommentComponentProps: Object.assign(Object.assign({ onOpenReply: reply, CommentObjectSkeletonProps, elevation: elevation, linkableCommentDateTime: linkableCommentDateTime }, rest), { cacheStrategy,
+        return (_jsx(CommentsObject, Object.assign({ feedObject: commentsObject.feedObject, feedObjectType: commentsObject.feedObject ? commentsObject.feedObject.type : feedObjectType, hideAdvertising: true, comments: [].concat(commentsObject.comments).reverse(), endComments: comment.latest_comments, previous: comment.comment_count > comment.latest_comments.length ? commentsObject.next : null, isLoadingPrevious: commentsObject.isLoadingNext, handlePrevious: commentsObject.getNextPage, CommentComponentProps: Object.assign(Object.assign({ onOpenReply: reply, CommentObjectSkeletonProps, elevation: elevation, linkableCommentDateTime: linkableCommentDateTime }, rest), { cacheStrategy,
                 truncateContent }), CommentsObjectSkeletonProps: { count: 1, CommentObjectSkeletonProps: CommentObjectSkeletonProps }, inPlaceLoadMoreContents: true }, CommentsObjectComponentProps, { cacheStrategy: cacheStrategy })));
     }
     /**
@@ -341,12 +317,10 @@ export default function CommentObject(inProps) {
         comment = renderComment(obj);
     }
     else {
-        comment = React.createElement(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps));
+        comment = _jsx(CommentObjectSkeleton, Object.assign({}, CommentObjectSkeletonProps));
     }
     /**
      * Render object
      */
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Root, { id: id, className: classNames(classes.root, className) }, comment),
-        openAlert && React.createElement(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })));
+    return (_jsxs(_Fragment, { children: [_jsx(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, { children: comment })), openAlert && _jsx(UserDeletedSnackBar, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }

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

@@ -1,5 +1,5 @@
 import { __rest } from "tslib";
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Widget from '../Widget';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
@@ -38,9 +38,5 @@ const Root = styled(BaseItem, {
 export default function CommentObjectSkeleton(props) {
     const { WidgetProps } = props, rest = __rest(props, ["WidgetProps"]);
     const theme = useTheme();
-    return (React.createElement(Root, Object.assign({ className: classes.root, disableTypography: true }, rest, { image: React.createElement(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium, className: classes.avatar }), secondary: React.createElement(React.Fragment, null,
-            React.createElement(Widget, Object.assign({}, WidgetProps),
-                React.createElement(CardContent, null,
-                    React.createElement(Skeleton, { animation: "wave", height: 10, width: "80%", className: classes.primaryContent }),
-                    React.createElement(Skeleton, { animation: "wave", height: 10, width: "40%" })))) })));
+    return (_jsx(Root, Object.assign({ className: classes.root, disableTypography: true }, rest, { image: _jsx(Skeleton, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium, className: classes.avatar }), secondary: _jsx(_Fragment, { children: _jsx(Widget, Object.assign({}, WidgetProps, { children: _jsxs(CardContent, { children: [_jsx(Skeleton, { animation: "wave", height: 10, width: "80%", className: classes.primaryContent }), _jsx(Skeleton, { animation: "wave", height: 10, width: "40%" })] }) })) }) })));
 }

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Widget from '../Widget';
 import { FormattedMessage } from 'react-intl';
@@ -115,15 +116,5 @@ export default function CommentObjectReply(inProps) {
         return _html === '' || _html === '<p class="SCEditor-paragraph"></p>' || _html === '<p class="SCEditor-paragraph"><br></p>';
     }, [html]);
     // RENDER
-    return (React.createElement(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: classNames(classes.root, className), image: !scUserContext.user ? (React.createElement(Avatar, { variant: "circular", className: classes.avatar })) : (React.createElement(UserAvatar, { hide: !scUserContext.user.community_badge },
-            React.createElement(Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }))), secondary: React.createElement(Widget, Object.assign({ className: classNames(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps),
-            React.createElement(Editor, { ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true }),
-            !isEditorEmpty && (React.createElement(Stack, { direction: "row", spacing: 2, className: classes.actions },
-                onReply && (React.createElement(LoadingButton, { variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply },
-                    React.createElement(FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }))),
-                onSave && (React.createElement(React.Fragment, null,
-                    onCancel && (React.createElement(LoadingButton, { variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel },
-                        React.createElement(FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }))),
-                    React.createElement(LoadingButton, { variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave },
-                        React.createElement(FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }))))))) })));
+    return (_jsx(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: classNames(classes.root, className), image: !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: [_jsx(Editor, { ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true }), !isEditorEmpty && (_jsxs(Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && (_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" }) }))] }))] })))] })) })));
 }

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

@@ -1,5 +1,6 @@
 import { __rest } from "tslib";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { FormattedMessage } from 'react-intl';
 import CommentObject from '../CommentObject';
@@ -89,8 +90,7 @@ export default function CommentsFeedObject(inProps) {
      */
     const renderTitle = useMemo(() => () => {
         if (showTitle) {
-            return (React.createElement(Typography, { variant: "h6", gutterBottom: true, color: 'inherit' },
-                React.createElement(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]);
@@ -98,15 +98,13 @@ export default function CommentsFeedObject(inProps) {
      * Render no comments
      */
     function renderNoCommentsFound() {
-        return (React.createElement(React.Fragment, null, renderNoComments ? (renderNoComments()) : (React.createElement(Box, { className: classes.noComments },
-            React.createElement(FormattedMessage, { id: "ui.commentsObject.noComments", defaultMessage: "ui.commentsObject.noComments" })))));
+        return (_jsx(_Fragment, { children: renderNoComments ? (renderNoComments()) : (_jsx(Box, Object.assign({ className: classes.noComments }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.noComments", defaultMessage: "ui.commentsObject.noComments" }) }))) }));
     }
     /**
      * Render comment not found
      */
     function renderCommentNotFoundError() {
-        return (React.createElement(React.Fragment, null, renderCommentNotFound ? (renderCommentNotFound()) : (React.createElement(Box, { className: classes.commentNotFound },
-            React.createElement(FormattedMessage, { id: "ui.commentsObject.commentNotFound", defaultMessage: "ui.commentsObject.commentNotFound" })))));
+        return (_jsx(_Fragment, { children: renderCommentNotFound ? (renderCommentNotFound()) : (_jsx(Box, Object.assign({ className: classes.commentNotFound }, { children: _jsx(FormattedMessage, { id: "ui.commentsObject.commentNotFound", defaultMessage: "ui.commentsObject.commentNotFound" }) }))) }));
     }
     /**
      * Get a single comment
@@ -197,7 +195,7 @@ export default function CommentsFeedObject(inProps) {
     /**
      * Render comments
      */
-    let commentsRendered = React.createElement(React.Fragment, null);
+    let commentsRendered = _jsx(_Fragment, {});
     if (commentsObject.componentLoaded && !total && !commentsObject.isLoadingNext && !isLoading) {
         /**
          * If comments were not found and loading is finished
@@ -215,14 +213,10 @@ export default function CommentsFeedObject(inProps) {
          *  the component will switch to 'load more pagination' mode automatically
          *  in case it needs to display a single comment
          */
-        commentsRendered = (React.createElement(React.Fragment, null,
-            Boolean((commentError || errorCommentObj) && !isLoading && !total) && renderCommentNotFoundError(),
-            React.createElement(CommentsObject, { feedObject: commentsObject.feedObject, comments: commentsObject.comments, endComments: [...(comment ? [comment] : []), ...(commentsOrderBy === SCCommentsOrderBy.ADDED_AT_ASC ? comments : [])], startComments: [...(commentsOrderBy === SCCommentsOrderBy.ADDED_AT_ASC ? [] : comments)], previous: commentsObject.previous, handlePrevious: commentsObject.getPreviousPage, isLoadingPrevious: commentsObject.isLoadingPrevious, next: commentsObject.next, isLoadingNext: commentsObject.isLoadingNext, handleNext: commentsObject.getNextPage, page: commentsObject.page, previousPage: commentsObject.previousPage, nextPage: commentsObject.nextPage, infiniteScrolling: infiniteScrolling && commentsObject.total > 0 && !comment && !comments.length, CommentComponent: CommentComponent, CommentComponentProps: CommentComponentProps, CommentObjectSkeletonProps: CommentObjectSkeletonProps })));
+        commentsRendered = (_jsxs(_Fragment, { children: [Boolean((commentError || errorCommentObj) && !isLoading && !total) && renderCommentNotFoundError(), _jsx(CommentsObject, { feedObject: commentsObject.feedObject, comments: commentsObject.comments, endComments: [...(comment ? [comment] : []), ...(commentsOrderBy === SCCommentsOrderBy.ADDED_AT_ASC ? comments : [])], startComments: [...(commentsOrderBy === SCCommentsOrderBy.ADDED_AT_ASC ? [] : comments)], previous: commentsObject.previous, handlePrevious: commentsObject.getPreviousPage, isLoadingPrevious: commentsObject.isLoadingPrevious, next: commentsObject.next, isLoadingNext: commentsObject.isLoadingNext, handleNext: commentsObject.getNextPage, page: commentsObject.page, previousPage: commentsObject.previousPage, nextPage: commentsObject.nextPage, infiniteScrolling: infiniteScrolling && commentsObject.total > 0 && !comment && !comments.length, CommentComponent: CommentComponent, CommentComponentProps: CommentComponentProps, CommentObjectSkeletonProps: CommentObjectSkeletonProps })] }));
     }
     /**
      * Renders root object
      */
-    return (React.createElement(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { ref: commentsContainerRef }),
-        renderTitle(),
-        commentsRendered));
+    return (_jsxs(Root, Object.assign({ id: id, className: classNames(classes.root, className) }, rest, { ref: commentsContainerRef }, { children: [renderTitle(), commentsRendered] })));
 }