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

package/lib/cjs/components/ChangeCover/ChangeCover.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
@@ -168,60 +169,36 @@ function ChangeCover(inProps) {
      * Renders change cover menu items
      */
     function renderMenuItems() {
-        return (react_1.default.createElement(material_1.Box, null, loading ? (react_1.default.createElement(material_1.MenuItem, { sx: { justifyContent: 'center' } },
-            react_1.default.createElement(CircularProgress_1.default, { size: 15 }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
-            react_1.default.createElement(material_1.MenuItem, { disabled: loading, onClick: () => fileInput.current.click(), className: classes.addMenuItem },
-                react_1.default.createElement(material_1.ListItemIcon, null,
-                    react_1.default.createElement(Icon_1.default, null, "add_circle_outline")),
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.upload", defaultMessage: "ui.changeCover.button.upload" })),
-            hasCover && (react_1.default.createElement(material_1.MenuItem, { className: classes.delMenuItem, onClick: () => setOpenDeleteCoverDialog(true) },
-                react_1.default.createElement(material_1.ListItemIcon, null,
-                    react_1.default.createElement(Icon_1.default, null, "delete")),
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.delete", defaultMessage: "ui.changeCover.button.delete" })))))));
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { children: loading ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ sx: { justifyContent: 'center' } }, { children: (0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15 }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ disabled: loading, onClick: () => fileInput.current.click(), className: classes.addMenuItem }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "add_circle_outline" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.upload", defaultMessage: "ui.changeCover.button.upload" })] })), hasCover && ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, Object.assign({ className: classes.delMenuItem, onClick: () => setOpenDeleteCoverDialog(true) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) }), (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.delete", defaultMessage: "ui.changeCover.button.delete" })] })))] })) }));
     }
     /**
      * Renders change cover menu
      */
-    const cc = (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest),
-            react_1.default.createElement(Icon_1.default, null, "photo_camera")),
-        react_1.default.createElement(react_1.default.Fragment, null, isMobile ? (react_1.default.createElement(material_1.SwipeableDrawer, { open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, renderMenuItems())) : (react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: open, onClose: handleClose }, renderMenuItems()))),
-        !isMobile && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.Button, { className: classes.helpPopover, variant: "contained", onClick: handleClickHelpButton },
-                react_1.default.createElement(Icon_1.default, null, "help_outline")),
-            isOpen && (react_1.default.createElement(material_1.Popover, { open: isOpen, anchorEl: anchorElPopover, onClose: handleCloseHelpPopover, anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'right'
-                } },
-                react_1.default.createElement(material_1.Box, { sx: { p: '10px' } },
-                    react_1.default.createElement(material_1.Typography, { component: "h3" },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.uploadA", defaultMessage: "ui.changeCover.button.uploadA" })),
-                    react_1.default.createElement(material_1.Divider, null),
-                    react_1.default.createElement(material_1.Typography, { component: "span" },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changeCover.info", defaultMessage: "ui.changeCover.info", values: {
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                li: (chunks) => react_1.default.createElement("li", null, chunks),
-                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                                // @ts-ignore
-                                ul: (chunks) => react_1.default.createElement("ul", null, chunks)
-                            } }))))))),
-        openDeleteCoverDialog && (react_1.default.createElement(ConfirmDialog_1.default, { open: openDeleteCoverDialog, title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changeCover.dialog.msg", defaultMessage: "ui.changeCover.dialog.msg" }), onConfirm: deleteCover, isUpdating: isDeletingCover, onClose: () => {
-                setOpenDeleteCoverDialog(false);
-                setAnchorEl(null);
-            } }))));
+    const cc = ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" }) })), (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isMobile ? ((0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ open: open, onClose: handleClose, onOpen: handleOpen, anchor: "bottom", disableSwipeToOpen: true }, { children: renderMenuItems() }))) : ((0, jsx_runtime_1.jsx)(material_1.Menu, Object.assign({ anchorEl: anchorEl, open: open, onClose: handleClose }, { children: renderMenuItems() }))) }), !isMobile && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.helpPopover, variant: "contained", onClick: handleClickHelpButton }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "help_outline" }) })), isOpen && ((0, jsx_runtime_1.jsx)(material_1.Popover, Object.assign({ open: isOpen, anchorEl: anchorElPopover, onClose: handleCloseHelpPopover, anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'right'
+                        } }, { children: (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ sx: { p: '10px' } }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "h3" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.button.uploadA", defaultMessage: "ui.changeCover.button.uploadA" }) })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changeCover.info", defaultMessage: "ui.changeCover.info", values: {
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                            // @ts-ignore
+                                            li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }),
+                                            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                            // @ts-ignore
+                                            ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks })
+                                        } }) }))] })) })))] })), openDeleteCoverDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteCoverDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.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_1.default.createElement(material_1.Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+        return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
     /**
      * Renders root object (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return (react_1.default.createElement(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }), cc));
+        return ((0, jsx_runtime_1.jsx)(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }, { children: cc })));
     }
     return null;
 }

package/lib/cjs/components/ChangeGroupCover/ChangeGroupCover.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const react_core_1 = require("@selfcommunity/react-core");
@@ -124,16 +125,13 @@ function ChangeGroupCover(inProps) {
      * If there is an error
      */
     if (alert) {
-        return (react_1.default.createElement(material_1.Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+        return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
     /**
      * Renders root object (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
-            react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
-                react_1.default.createElement(Icon_1.default, null, "image"))));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "medium", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "image" }) }))] }));
     }
     return null;
 }

package/lib/cjs/components/ChangeGroupPicture/ChangeGroupPicture.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
@@ -122,16 +123,13 @@ function ChangeGroupPicture(inProps) {
      * If there is an error
      */
     if (alert) {
-        return (react_1.default.createElement(material_1.Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+        return ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(null) }, { children: alert })));
     }
     /**
      * Renders the component (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
-            react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "small", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest),
-                react_1.default.createElement(Icon_1.default, null, "photo_camera"))));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "small", variant: "contained", disabled: loading, onClick: () => fileInput.current.click(), loading: loading }, rest, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" }) }))] }));
     }
     return null;
 }

package/lib/cjs/components/ChangePicture/ChangePicture.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const ChangePictureDialog_1 = tslib_1.__importDefault(require("./ChangePictureDialog/ChangePictureDialog"));
@@ -64,9 +65,7 @@ function ChangePicture(inProps) {
      * Renders the component (if not hidden by autoHide prop)
      */
     if (!autoHide) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "small", variant: "contained", onClick: () => setOpenChangePictureDialog(true) }, rest), iconButton ? (react_1.default.createElement(Icon_1.default, null, "photo_camera")) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.change", defaultMessage: "ui.changePicture.button.change" }))),
-            openChangePictureDialog && (react_1.default.createElement(ChangePictureDialog_1.default, { className: classes.dialog, open: openChangePictureDialog, onChange: (avatar) => onChange && onChange(avatar), onClose: () => setOpenChangePictureDialog(false) }))));
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), size: "small", variant: "contained", onClick: () => setOpenChangePictureDialog(true) }, rest, { children: iconButton ? ((0, jsx_runtime_1.jsx)(Icon_1.default, { children: "photo_camera" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.change", defaultMessage: "ui.changePicture.button.change" })) })), openChangePictureDialog && ((0, jsx_runtime_1.jsx)(ChangePictureDialog_1.default, { className: classes.dialog, open: openChangePictureDialog, onChange: (avatar) => onChange && onChange(avatar), onClose: () => setOpenChangePictureDialog(false) }))] }));
     }
     return null;
 }

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const Button_1 = tslib_1.__importDefault(require("@mui/material/Button"));
 const Typography_1 = tslib_1.__importDefault(require("@mui/material/Typography"));
@@ -180,26 +181,13 @@ function ChangePictureDialog(props) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.dialogRoot, className), title: react_1.default.createElement(react_intl_1.FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest),
-        react_1.default.createElement(material_1.Box, { className: classes.upload },
-            alert ? (react_1.default.createElement(material_1.Alert, { color: "error", onClose: () => setAlert(false) },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.alert", defaultMessage: "ui.changePicture.button.upload.alert" }))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }),
-                react_1.default.createElement(Button_1.default, { disabled: loading || isDeletingAvatar, variant: "outlined", onClick: () => fileInput.current.click(), color: error ? 'error' : 'primary', startIcon: loading ? null : react_1.default.createElement(Icon_1.default, null, "folder_open") }, loading ? (react_1.default.createElement(CircularProgress_1.default, { size: 15 })) : (react_1.default.createElement(react_1.default.Fragment, null, error ? (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.error", defaultMessage: "ui.changePicture.button.upload.error" })) : (react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload", defaultMessage: "ui.changePicture.button.upload" }))))))),
-            react_1.default.createElement(Typography_1.default, { component: "span", fontSize: "small", color: "text.secondary", gutterBottom: true },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changePicture.info", defaultMessage: "ui.changePicture.info", values: {
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        li: (chunks) => react_1.default.createElement("li", null, chunks),
-                        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-                        // @ts-ignore
-                        ul: (chunks) => react_1.default.createElement("ul", null, chunks)
-                    } }))),
-        react_1.default.createElement(material_1.ImageList, { cols: 3, rowHeight: 'auto', id: "avatarsList", classes: { root: classes.imagesList } }, avatars.map((avatar) => (react_1.default.createElement(material_1.Box, { className: classes.imageItem, key: avatar.id },
-            react_1.default.createElement(material_1.ImageListItem, { className: primary === avatar.id ? classes.primary : '', key: avatar.id, onClick: () => selectPrimaryAvatar(avatar) },
-                react_1.default.createElement("img", { src: avatar.avatar, loading: "lazy", alt: 'img' }),
-                react_1.default.createElement(material_1.ImageListItemBar, { position: "top", actionIcon: react_1.default.createElement(material_1.IconButton, { onClick: () => handleOpen(avatar.id), size: "small" },
-                        react_1.default.createElement(Icon_1.default, null, "delete")) })))))),
-        openDeleteAvatarDialog && (react_1.default.createElement(ConfirmDialog_1.default, { open: openDeleteAvatarDialog, title: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.dialogRoot, className), title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.upload }, { children: [alert ? ((0, jsx_runtime_1.jsx)(material_1.Alert, Object.assign({ color: "error", onClose: () => setAlert(false) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.alert", defaultMessage: "ui.changePicture.button.upload.alert" }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "file", onChange: handleUpload, ref: fileInput, hidden: true, accept: ".gif,.png,.jpg,.jpeg" }), (0, jsx_runtime_1.jsx)(Button_1.default, Object.assign({ disabled: loading || isDeletingAvatar, variant: "outlined", onClick: () => fileInput.current.click(), color: error ? 'error' : 'primary', startIcon: loading ? null : (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "folder_open" }) }, { children: loading ? ((0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 15 })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: error ? ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload.error", defaultMessage: "ui.changePicture.button.upload.error" })) : ((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.button.upload", defaultMessage: "ui.changePicture.button.upload" })) })) }))] })), (0, jsx_runtime_1.jsx)(Typography_1.default, Object.assign({ component: "span", fontSize: "small", color: "text.secondary", gutterBottom: true }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.info", defaultMessage: "ui.changePicture.info", values: {
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                li: (chunks) => (0, jsx_runtime_1.jsx)("li", { children: chunks }),
+                                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                                // @ts-ignore
+                                ul: (chunks) => (0, jsx_runtime_1.jsx)("ul", { children: chunks })
+                            } }) }))] })), (0, jsx_runtime_1.jsx)(material_1.ImageList, Object.assign({ cols: 3, rowHeight: 'auto', id: "avatarsList", classes: { root: classes.imagesList } }, { children: avatars.map((avatar) => ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.imageItem }, { children: (0, jsx_runtime_1.jsxs)(material_1.ImageListItem, Object.assign({ className: primary === avatar.id ? classes.primary : '', onClick: () => selectPrimaryAvatar(avatar) }, { children: [(0, jsx_runtime_1.jsx)("img", { src: avatar.avatar, loading: "lazy", alt: 'img' }), (0, jsx_runtime_1.jsx)(material_1.ImageListItemBar, { position: "top", actionIcon: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ onClick: () => handleOpen(avatar.id), size: "small" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "delete" }) })) })] }), avatar.id) }), avatar.id))) })), openDeleteAvatarDialog && ((0, jsx_runtime_1.jsx)(ConfirmDialog_1.default, { open: openDeleteAvatarDialog, title: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.dialog.msg", defaultMessage: "ui.changePicture.dialog.msg" }), btnConfirm: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.changePicture.dialog.confirm", defaultMessage: "ui.changePicture.dialog.confirm" }), onConfirm: deleteAvatar, isUpdating: isDeletingAvatar, onClose: () => setOpenDeleteAvatarDialog(false) }))] })));
 }
 exports.default = ChangePictureDialog;

package/lib/cjs/components/CommentObject/CommentObject.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
@@ -135,16 +136,14 @@ function CommentObject(inProps) {
      * @param comment
      */
     function renderTimeAgo(comment) {
-        return (react_1.default.createElement(react_1.default.Fragment, null, linkableCommentDateTime ? (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.activityAt },
-            react_1.default.createElement(DateTimeAgo_1.default, { date: comment.added_at }))) : (react_1.default.createElement(DateTimeAgo_1.default, { date: comment.added_at }))));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: linkableCommentDateTime ? ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.activityAt }, { children: (0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: comment.added_at }) }))) : ((0, jsx_runtime_1.jsx)(DateTimeAgo_1.default, { date: comment.added_at })) }));
     }
     /**
      * Render CommentObjectReply action
      * @param comment
      */
     function renderActionReply(comment) {
-        return (react_1.default.createElement(material_1.Button, { className: classes.reply, variant: "text", onClick: () => reply(comment) },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentObject.reply", defaultMessage: "ui.commentObject.reply" })));
+        return ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.reply, variant: "text", onClick: () => reply(comment) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.reply", defaultMessage: "ui.commentObject.reply" }) })));
     }
     /**
      * Handle reply: open Editor
@@ -182,7 +181,7 @@ function CommentObject(inProps) {
      */
     function handleReply(comment) {
         if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
-            enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -200,7 +199,7 @@ function CommentObject(inProps) {
             })
                 .catch((error) => {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-                enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
                     variant: 'error',
                     autoHideDuration: 3000
                 });
@@ -260,7 +259,7 @@ function CommentObject(inProps) {
      */
     function handleSave(comment) {
         if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
-            enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
+            enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
                 variant: 'warning',
                 autoHideDuration: 3000
             });
@@ -281,7 +280,7 @@ function CommentObject(inProps) {
             })
                 .catch((error) => {
                 utils_1.Logger.error(Errors_1.SCOPE_SC_UI, error);
-                enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
+                enqueueSnackbar((0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.common.error.action", defaultMessage: "ui.common.error.action" }), {
                     variant: 'error',
                     autoHideDuration: 3000
                 });
@@ -302,37 +301,14 @@ 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 = (0, contribution_1.getContributionHtml)(commentHtml, scRoutingContext.url);
-        return (react_1.default.createElement(react_1.default.Fragment, { key: comment.id },
-            editComment && editComment.id === comment.id ? (react_1.default.createElement(material_1.Box, { className: classes.comment },
-                react_1.default.createElement(CommentObjectReply_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)))) : (react_1.default.createElement(BaseItem_1.default, { elevation: 0, className: classes.comment, image: react_1.default.createElement(react_core_1.Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }),
-                    react_1.default.createElement(UserAvatar_1.default, { hide: !obj.author.community_badge },
-                        react_1.default.createElement(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }))), disableTypography: true, primary: react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest),
-                        react_1.default.createElement(material_1.CardContent, { className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) },
-                            react_1.default.createElement(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }),
-                                react_1.default.createElement(material_1.Typography, { component: "span" }, comment.author.username)),
-                            react_1.default.createElement(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }),
-                            summaryHtmlTruncated && truncateContent && (react_1.default.createElement(react_core_1.Link, { to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.showMoreContent },
-                                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" })))),
-                        scUserContext.user && (react_1.default.createElement(material_1.Box, { className: classes.commentActionsMenu },
-                            react_1.default.createElement(ContributionActionsMenu_1.default, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit })))),
-                    react_1.default.createElement(material_1.Box, { component: "span", className: classes.contentSubSection },
-                        renderTimeAgo(comment),
-                        react_1.default.createElement(Bullet_1.default, null),
-                        react_1.default.createElement(VoteButton_1.default, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }),
-                        react_1.default.createElement(Bullet_1.default, null),
-                        renderActionReply(comment),
-                        react_1.default.createElement(VoteAudienceButton_1.default, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment }))) })),
-            comment.comment_count > 0 && react_1.default.createElement(material_1.Box, { className: classes.nestedComments }, renderLatestComment(comment)),
-            scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && (react_1.default.createElement(material_1.Box, { className: classes.nestedComments },
-                react_1.default.createElement(CommentObjectReply_1.default, Object.assign({ text: `@${replyComment.author.username}, `, autoFocus: true, key: `reply-${replyComment.id}`, id: `reply-${replyComment.id}`, onReply: handleReply, editable: !isReplying }, CommentObjectReplyProps))))));
+        return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [editComment && editComment.id === comment.id ? ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.comment }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, Object.assign({ text: comment.html, autoFocus: true, id: `edit-${comment.id}`, onSave: handleSave, onCancel: handleCancel, editable: !isReplying || !isSavingComment }, CommentObjectReplyProps)) }))) : ((0, jsx_runtime_1.jsx)(BaseItem_1.default, { elevation: 0, className: classes.comment, image: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({}, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !obj.author.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: obj.author.username, variant: "circular", src: comment.author.avatar, className: classes.avatar }) })) })), disableTypography: true, primary: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: classes.content, elevation: elevation }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.CardContent, Object.assign({ className: (0, classnames_1.default)({ [classes.deleted]: obj && obj.deleted }) }, { children: [(0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ className: classes.author }, (!comment.author.deleted && { to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, comment.author) }), { onClick: comment.author.deleted ? () => setOpenAlert(true) : null }, { children: (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ component: "span" }, { children: comment.author.username })) })), (0, jsx_runtime_1.jsx)(material_1.Typography, { className: classes.textContent, variant: "body2", gutterBottom: true, dangerouslySetInnerHTML: { __html: summaryHtml } }), summaryHtmlTruncated && truncateContent && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.COMMENT_ROUTE_NAME, (0, contribution_1.getRouteData)(comment)), className: classes.showMoreContent }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.showMore", defaultMessage: "ui.commentObject.showMore" }) })))] })), scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentActionsMenu }, { children: (0, jsx_runtime_1.jsx)(ContributionActionsMenu_1.default, { commentObject: comment, onRestoreContribution: handleRestore, onHideContribution: handleHide, onDeleteContribution: handleDelete, onEditContribution: handleEdit }) })))] })), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ component: "span", className: classes.contentSubSection }, { children: [renderTimeAgo(comment), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), (0, jsx_runtime_1.jsx)(VoteButton_1.default, { size: "small", className: classes.vote, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment, onVote: handleVoteSuccess }), (0, jsx_runtime_1.jsx)(Bullet_1.default, {}), renderActionReply(comment), (0, jsx_runtime_1.jsx)(VoteAudienceButton_1.default, { size: "small", className: classes.voteAudience, contributionId: comment.id, contributionType: types_1.SCContributionType.COMMENT, contribution: comment })] }))] }) })), comment.comment_count > 0 && (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: renderLatestComment(comment) })), scUserContext.user && replyComment && (replyComment.id === comment.id || replyComment.parent === comment.id) && !comment.parent && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.nestedComments }, { children: (0, jsx_runtime_1.jsx)(CommentObjectReply_1.default, 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_1.default.createElement(CommentsObject_1.default, 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 ((0, jsx_runtime_1.jsx)(CommentsObject_1.default, 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 })));
     }
     /**
@@ -343,13 +319,11 @@ function CommentObject(inProps) {
         comment = renderComment(obj);
     }
     else {
-        comment = react_1.default.createElement(Skeleton_1.default, Object.assign({}, CommentObjectSkeletonProps));
+        comment = (0, jsx_runtime_1.jsx)(Skeleton_1.default, Object.assign({}, CommentObjectSkeletonProps));
     }
     /**
      * Render object
      */
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Root, { id: id, className: (0, classnames_1.default)(classes.root, className) }, comment),
-        openAlert && react_1.default.createElement(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, { children: comment })), openAlert && (0, jsx_runtime_1.jsx)(UserDeletedSnackBar_1.default, { open: openAlert, handleClose: () => setOpenAlert(false) })] }));
 }
 exports.default = CommentObject;

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

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
@@ -40,10 +40,6 @@ const Root = (0, styles_1.styled)(BaseItem_1.default, {
 function CommentObjectSkeleton(props) {
     const { WidgetProps } = props, rest = tslib_1.__rest(props, ["WidgetProps"]);
     const theme = (0, material_1.useTheme)();
-    return (react_1.default.createElement(Root, Object.assign({ className: classes.root, disableTypography: true }, rest, { image: react_1.default.createElement(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium, className: classes.avatar }), secondary: react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(Widget_1.default, Object.assign({}, WidgetProps),
-                react_1.default.createElement(material_1.CardContent, null,
-                    react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", className: classes.primaryContent }),
-                    react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" })))) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root, disableTypography: true }, rest, { image: (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium, className: classes.avatar }), secondary: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(Widget_1.default, Object.assign({}, WidgetProps, { children: (0, jsx_runtime_1.jsxs)(material_1.CardContent, { children: [(0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "80%", className: classes.primaryContent }), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" })] }) })) }) })));
 }
 exports.default = CommentObjectSkeleton;

package/lib/cjs/components/CommentObjectReply/CommentObjectReply.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const react_intl_1 = require("react-intl");
@@ -117,16 +118,6 @@ function CommentObjectReply(inProps) {
         return _html === '' || _html === '<p class="SCEditor-paragraph"></p>' || _html === '<p class="SCEditor-paragraph"><br></p>';
     }, [html]);
     // RENDER
-    return (react_1.default.createElement(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: (0, classnames_1.default)(classes.root, className), image: !scUserContext.user ? (react_1.default.createElement(material_1.Avatar, { variant: "circular", className: classes.avatar })) : (react_1.default.createElement(UserAvatar_1.default, { hide: !scUserContext.user.community_badge },
-            react_1.default.createElement(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }))), secondary: react_1.default.createElement(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps),
-            react_1.default.createElement(Editor_1.default, { ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true }),
-            !isEditorEmpty && (react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 2, className: classes.actions },
-                onReply && (react_1.default.createElement(lab_1.LoadingButton, { variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }))),
-                onSave && (react_1.default.createElement(react_1.default.Fragment, null,
-                    onCancel && (react_1.default.createElement(lab_1.LoadingButton, { variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }))),
-                    react_1.default.createElement(lab_1.LoadingButton, { variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }))))))) })));
+    return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id }, rest, { disableTypography: true, onClick: handleEditorFocus, elevation: elevation, className: (0, classnames_1.default)(classes.root, className), image: !scUserContext.user ? ((0, jsx_runtime_1.jsx)(material_1.Avatar, { variant: "circular", className: classes.avatar })) : ((0, jsx_runtime_1.jsx)(UserAvatar_1.default, Object.assign({ hide: !scUserContext.user.community_badge }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, variant: "circular", src: scUserContext.user.avatar, classes: { root: classes.avatar } }) }))), secondary: (0, jsx_runtime_1.jsxs)(Widget_1.default, Object.assign({ className: (0, classnames_1.default)(classes.comment, { [classes.hasValue]: !isEditorEmpty }) }, WidgetProps, { children: [(0, jsx_runtime_1.jsx)(Editor_1.default, { ref: editor, onChange: handleChangeText, defaultValue: html, editable: editable, uploadImage: true }), !isEditorEmpty && ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ direction: "row", spacing: 2, className: classes.actions }, { children: [onReply && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleReply, loading: !editable, className: classes.buttonReply }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.reply", defaultMessage: "ui.commentObject.replyComment.reply" }) }))), onSave && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [onCancel && ((0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: 'text', size: "small", onClick: handleCancel, disabled: !editable, color: "inherit", className: classes.buttonCancel }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.cancel", defaultMessage: "ui.commentObject.replyComment.cancel" }) }))), (0, jsx_runtime_1.jsx)(lab_1.LoadingButton, Object.assign({ variant: "outlined", size: "small", onClick: handleSave, loading: !editable, className: classes.buttonSave }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentObject.replyComment.save", defaultMessage: "ui.commentObject.replyComment.save" }) }))] }))] })))] })) })));
 }
 exports.default = CommentObjectReply;

package/lib/cjs/components/CommentsFeedObject/CommentsFeedObject.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("@mui/material/styles");
 const react_intl_1 = require("react-intl");
 const CommentObject_1 = tslib_1.__importDefault(require("../CommentObject"));
@@ -91,8 +92,7 @@ function CommentsFeedObject(inProps) {
      */
     const renderTitle = (0, react_1.useMemo)(() => () => {
         if (showTitle) {
-            return (react_1.default.createElement(Typography_1.default, { variant: "h6", gutterBottom: true, color: 'inherit' },
-                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentsObject.title", defaultMessage: "ui.commentsObject.title", values: { total: total } })));
+            return ((0, jsx_runtime_1.jsx)(Typography_1.default, Object.assign({ variant: "h6", gutterBottom: true, color: 'inherit' }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentsObject.title", defaultMessage: "ui.commentsObject.title", values: { total: total } }) })));
         }
         return null;
     }, [total, isLoading]);
@@ -100,15 +100,13 @@ function CommentsFeedObject(inProps) {
      * Render no comments
      */
     function renderNoCommentsFound() {
-        return (react_1.default.createElement(react_1.default.Fragment, null, renderNoComments ? (renderNoComments()) : (react_1.default.createElement(material_1.Box, { className: classes.noComments },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentsObject.noComments", defaultMessage: "ui.commentsObject.noComments" })))));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderNoComments ? (renderNoComments()) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.noComments }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentsObject.noComments", defaultMessage: "ui.commentsObject.noComments" }) }))) }));
     }
     /**
      * Render comment not found
      */
     function renderCommentNotFoundError() {
-        return (react_1.default.createElement(react_1.default.Fragment, null, renderCommentNotFound ? (renderCommentNotFound()) : (react_1.default.createElement(material_1.Box, { className: classes.commentNotFound },
-            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.commentsObject.commentNotFound", defaultMessage: "ui.commentsObject.commentNotFound" })))));
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderCommentNotFound ? (renderCommentNotFound()) : ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.commentNotFound }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.commentsObject.commentNotFound", defaultMessage: "ui.commentsObject.commentNotFound" }) }))) }));
     }
     /**
      * Get a single comment
@@ -199,7 +197,7 @@ function CommentsFeedObject(inProps) {
     /**
      * Render comments
      */
-    let commentsRendered = react_1.default.createElement(react_1.default.Fragment, null);
+    let commentsRendered = (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
     if (commentsObject.componentLoaded && !total && !commentsObject.isLoadingNext && !isLoading) {
         /**
          * If comments were not found and loading is finished
@@ -217,15 +215,11 @@ function CommentsFeedObject(inProps) {
          *  the component will switch to 'load more pagination' mode automatically
          *  in case it needs to display a single comment
          */
-        commentsRendered = (react_1.default.createElement(react_1.default.Fragment, null,
-            Boolean((commentError || errorCommentObj) && !isLoading && !total) && renderCommentNotFoundError(),
-            react_1.default.createElement(CommentsObject_1.default, { feedObject: commentsObject.feedObject, comments: commentsObject.comments, endComments: [...(comment ? [comment] : []), ...(commentsOrderBy === comments_1.SCCommentsOrderBy.ADDED_AT_ASC ? comments : [])], startComments: [...(commentsOrderBy === comments_1.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 = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Boolean((commentError || errorCommentObj) && !isLoading && !total) && renderCommentNotFoundError(), (0, jsx_runtime_1.jsx)(CommentsObject_1.default, { feedObject: commentsObject.feedObject, comments: commentsObject.comments, endComments: [...(comment ? [comment] : []), ...(commentsOrderBy === comments_1.SCCommentsOrderBy.ADDED_AT_ASC ? comments : [])], startComments: [...(commentsOrderBy === comments_1.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_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { ref: commentsContainerRef }),
-        renderTitle(),
-        commentsRendered));
+    return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { ref: commentsContainerRef }, { children: [renderTitle(), commentsRendered] })));
 }
 exports.default = CommentsFeedObject;

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

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
 const CommentsObject_1 = require("../CommentsObject");
 const constants_1 = require("./constants");
 const styles_1 = require("@mui/material/styles");
@@ -13,6 +12,6 @@ const Root = (0, styles_1.styled)(CommentsObject_1.CommentsObjectSkeleton, {
     slot: 'SkeletonRoot'
 })(() => ({}));
 function CommentsFeedObjectSkeleton(props) {
-    return react_1.default.createElement(Root, Object.assign({ className: classes.root }, props));
+    return (0, jsx_runtime_1.jsx)(Root, Object.assign({ className: classes.root }, props));
 }
 exports.default = CommentsFeedObjectSkeleton;