@selfcommunity/react-ui 0.7.0-alpha.34 → 0.7.0-alpha.340

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

@@ -1,26 +1,17 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { useContext, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
-import { Menu, MenuItem, ListItemIcon, Typography, Button, Popover, Divider, IconButton, Box, useTheme, useMediaQuery } from '@mui/material';
-import { http, Endpoints } from '@selfcommunity/api-services';
+import { Alert, Box, Button, Divider, IconButton, ListItemIcon, Menu, MenuItem, Popover, SwipeableDrawer, Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Endpoints, http } from '@selfcommunity/api-services';
 import { SCUserContext } from '@selfcommunity/react-core';
 import Icon from '@mui/material/Icon';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import ConfirmDialog from '../../shared/ConfirmDialog/ConfirmDialog';
 import classNames from 'classnames';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useThemeProps } from '@mui/system';
-import BaseDrawer from '../../shared/BaseDrawer';
+import { SCOPE_SC_UI } from '../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
 const PREFIX = 'SCChangeCoverButton';
 const classes = {
     root: `${PREFIX}-root`,
@@ -44,9 +35,23 @@ const Root = styled(Box, {
         }
     }
 }));
+const messages = defineMessages({
+    imageMaxSize: {
+        id: 'ui.changeCover.button.change.alertMaxSize',
+        defaultMessage: 'ui.changeCover.button.change.alertMaxSize'
+    },
+    errorLoadImage: {
+        id: 'ui.changeCover.button.change.alertErrorImage',
+        defaultMessage: 'ui.changeCover.button.change.alertErrorImage'
+    }
+});
 /**
- *> API documentation for the Community-JS Change Cover component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Change Cover component. Learn about the available props and the CSS API.
+ *
  *
+ * This component renders a button that allows users to edit their profile cover and a popover that specifies format and sizes allowed.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/ChangeCover)
+
  #### Import
  ```jsx
  import {ChangeCover} from '@selfcommunity/react-ui';
@@ -85,8 +90,11 @@ export default function ChangeCover(inProps) {
     const [openDeleteCoverDialog, setOpenDeleteCoverDialog] = useState(false);
     const [isDeletingCover, setIsDeletingCover] = useState(false);
     const [loading, setLoading] = useState(false);
+    const [alert, setAlert] = useState(null);
+    // INTL
+    const intl = useIntl();
     // HANDLERS
-    const handleClick = (event) => {
+    const handleOpen = (event) => {
         setAnchorEl(event.currentTarget);
     };
     const handleClose = () => {
@@ -108,13 +116,20 @@ export default function ChangeCover(inProps) {
      * Handles file upload
      * @param event
      */
-    function handleUpload(event) {
-        fileInput = event.target.files[0];
-        handleSave();
-    }
+    const handleUpload = (event) => {
+        var _a;
+        const maxSize = 5 * 1024 * 1024;
+        if (((_a = event.target.files[0]) === null || _a === void 0 ? void 0 : _a.size) <= maxSize) {
+            fileInput = event.target.files[0];
+            handleSave();
+        }
+        else {
+            setAlert(intl.formatMessage(messages.imageMaxSize));
+            setAnchorEl(null);
+        }
+    };
     /**
      * Handles deletion of a specific cover
-     * @param id
      */
     function deleteCover() {
         setIsDeletingCover(true);
@@ -154,8 +169,9 @@ export default function ChangeCover(inProps) {
             }
         })
             .catch((error) => {
+            Logger.error(SCOPE_SC_UI, error);
             setLoading(false);
-            console.log(error);
+            setAlert(intl.formatMessage(messages.errorLoadImage));
         });
     }
     /**
@@ -164,7 +180,7 @@ export default function ChangeCover(inProps) {
     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(event), ref: fileInput, hidden: true }),
+            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, { fontSize: "small" }, "add_circle_outline")),
@@ -178,8 +194,8 @@ export default function ChangeCover(inProps) {
      * Renders change cover menu
      */
     const cc = (React.createElement(React.Fragment, null,
-        React.createElement(Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleClick }, rest), isMobile ? React.createElement(Icon, null, "photo_camera") : React.createElement(FormattedMessage, { id: "ui.changeCover.button.change", defaultMessage: "ui.changeCover.button.change" })),
-        React.createElement(React.Fragment, null, isMobile ? (React.createElement(BaseDrawer, { open: open, onClose: handleClose, width: '100%' }, renderMenuItems())) : (React.createElement(Menu, { anchorEl: anchorEl, open: open, onClose: handleClose }, renderMenuItems()))),
+        React.createElement(Button, Object.assign({ size: "small", variant: "contained", disabled: loading, onClick: handleOpen }, rest), isMobile ? React.createElement(Icon, null, "photo_camera") : React.createElement(FormattedMessage, { id: "ui.changeCover.button.change", defaultMessage: "ui.changeCover.button.change" })),
+        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(IconButton, { className: classes.helpPopover, color: "primary", "aria-label": "upload picture", component: "span", onClick: handleClickHelpButton },
                 React.createElement(Icon, { fontSize: "small" }, "help_outline")),
@@ -192,17 +208,24 @@ export default function ChangeCover(inProps) {
                         React.createElement(FormattedMessage, { id: "ui.changeCover.button.uploadA", defaultMessage: "ui.changeCover.button.uploadA" })),
                     React.createElement(Divider, null),
                     React.createElement(Typography, { component: "span" },
-                        React.createElement("ul", { className: "list" },
-                            React.createElement("li", null,
-                                React.createElement(FormattedMessage, { id: "ui.changeCover.listF", defaultMessage: "ui.changeCover.listF" })),
-                            React.createElement("li", null,
-                                React.createElement(FormattedMessage, { id: "ui.changeCover.listD", defaultMessage: "ui.changeCover.listF" })),
-                            React.createElement("li", null,
-                                React.createElement(FormattedMessage, { id: "ui.changeCover.listW", defaultMessage: "ui.changeCover.listF" }))))))))),
+                        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);
             } }))));
+    /**
+     * If there is an error
+     */
+    if (alert) {
+        return (React.createElement(Alert, { color: "error", onClose: () => setAlert(null) }, alert));
+    }
     /**
      * Renders root object (if not hidden by autoHide prop)
      */
@@ -211,4 +234,3 @@ export default function ChangeCover(inProps) {
     }
     return null;
 }
-//# sourceMappingURL=ChangeCover.js.map

package/lib/esm/components/ChangeCover/index.d.ts

@@ -1,4 +1,3 @@
 import ChangeCover, { ChangeCoverProps } from './ChangeCover';
 export default ChangeCover;
 export { ChangeCoverProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import ChangeCover from './ChangeCover';
 export default ChangeCover;
-//# sourceMappingURL=index.js.map

package/lib/esm/components/ChangePicture/ChangePicture.d.ts

@@ -26,6 +26,10 @@ export interface ChangePictureProps {
 }
 /**
  * > API documentation for the Community-JS Change Picture component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows users to manage their profile pictures.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/ChangePicture)
 
  #### Import
 
@@ -46,4 +50,3 @@ export interface ChangePictureProps {
  * @param inProps
  */
 export default function ChangePicture(inProps: ChangePictureProps): JSX.Element;
-//# sourceMappingURL=ChangePicture.d.ts.map

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

@@ -1,14 +1,4 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __rest } from "tslib";
 import React, { useContext, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import { Button } from '@mui/material';
@@ -22,13 +12,17 @@ const PREFIX = 'SCChangePictureButton';
 const classes = {
     root: `${PREFIX}-root`
 };
-const CPButton = styled(Button, {
+const Root = styled(Button, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
 })(({ theme }) => ({}));
 /**
  * > API documentation for the Community-JS Change Picture component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a button that allows users to manage their profile pictures.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/ChangePicture)
 
  #### Import
 
@@ -68,9 +62,8 @@ export default function ChangePicture(inProps) {
      */
     if (!autoHide) {
         return (React.createElement(React.Fragment, null,
-            React.createElement(CPButton, Object.assign({ className: classNames(classes.root, className), size: "small", variant: "contained", onClick: () => setOpenChangePictureDialog(true), style: iconButton ? { padding: 6, borderRadius: 50, minWidth: 'auto' } : {} }, rest), iconButton ? (React.createElement(Icon, null, "photo_camera")) : (React.createElement(FormattedMessage, { id: "ui.changePicture.button.change", defaultMessage: "ui.changePicture.button.change" }))),
+            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, { open: openChangePictureDialog, onChange: (avatar) => onChange && onChange(avatar), onClose: () => setOpenChangePictureDialog(false) }))));
     }
     return null;
 }
-//# sourceMappingURL=ChangePicture.js.map

package/lib/esm/components/ChangePicture/ChangePictureDialog/ChangePictureDialog.d.ts

@@ -7,4 +7,3 @@ export interface CPDialogProps extends BaseDialogProps {
     onChange?: (avatar: any) => void;
 }
 export default function ChangePictureDialog(inProps: CPDialogProps): JSX.Element;
-//# sourceMappingURL=ChangePictureDialog.d.ts.map

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

@@ -1,47 +1,28 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+import { __awaiter, __rest } from "tslib";
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
-import { Box, IconButton, ImageListItemBar } from '@mui/material';
+import { Alert, Box, IconButton, ImageList, ImageListItem, ImageListItemBar } from '@mui/material';
 import Icon from '@mui/material/Icon';
 import { Endpoints, UserService } from '@selfcommunity/api-services';
 import { SCContext, SCUserContext } from '@selfcommunity/react-core';
 import { FormattedMessage } from 'react-intl';
-import ImageList from '@mui/material/ImageList';
-import ImageListItem from '@mui/material/ImageListItem';
 import BaseDialog from '../../../shared/BaseDialog';
 import ConfirmDialog from '../../../shared/ConfirmDialog/ConfirmDialog';
 import classNames from 'classnames';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useThemeProps } from '@mui/system';
 import { scroll } from 'seamless-scroll-polyfill';
+import { SCOPE_SC_UI } from '../../../constants/Errors';
+import { Logger } from '@selfcommunity/utils';
 const PREFIX = 'SCChangePictureDialog';
 const classes = {
     root: `${PREFIX}-root`,
-    actions: `${PREFIX}-actions`,
     upload: `${PREFIX}-upload`,
     imagesList: `${PREFIX}-images-list`,
-    imageItem: `${PREFIX}-image-item`
+    imageItem: `${PREFIX}-image-item`,
+    primary: `${PREFIX}-primary`
 };
 const Root = styled(BaseDialog, {
     name: PREFIX,
@@ -53,10 +34,6 @@ const Root = styled(BaseDialog, {
     },
     [`& .${classes.imagesList}`]: {
         maxHeight: 500
-    },
-    [`& .${classes.actions}`]: {
-        display: 'flex',
-        justifyContent: 'flex-end'
     }
 }));
 export default function ChangePictureDialog(inProps) {
@@ -72,6 +49,7 @@ export default function ChangePictureDialog(inProps) {
     //STATE
     const [file, setFile] = useState(scUserContext.user['avatar']);
     const [error, setError] = useState(false);
+    const [alert, setAlert] = useState(false);
     const [primary, setPrimary] = useState(null);
     const [avatars, setAvatars] = useState([]);
     const [deleteAvatarId, setDeleteAvatarId] = useState(null);
@@ -92,9 +70,16 @@ export default function ChangePictureDialog(inProps) {
      * @param event
      */
     function handleUpload(event) {
-        fileInput = event.target.files[0];
-        setFile(URL.createObjectURL(fileInput));
-        handleSave();
+        var _a;
+        const maxSize = 3 * 1024 * 1024;
+        if (event && ((_a = event.target.files[0]) === null || _a === void 0 ? void 0 : _a.size) <= maxSize) {
+            fileInput = event.target.files[0];
+            setFile(URL.createObjectURL(fileInput));
+            handleSave();
+        }
+        else {
+            setAlert(true);
+        }
     }
     /**
      * Performs save avatar after upload
@@ -114,7 +99,7 @@ export default function ChangePictureDialog(inProps) {
             .catch((error) => {
             setError(true);
             setLoading(false);
-            console.log(error);
+            Logger.error(SCOPE_SC_UI, error);
         });
     }
     /**
@@ -156,7 +141,7 @@ export default function ChangePictureDialog(inProps) {
                 onChange && onChange(avatar);
             })
                 .catch((error) => {
-                console.log(error);
+                Logger.error(SCOPE_SC_UI, error);
             });
         }
     }
@@ -183,7 +168,7 @@ export default function ChangePictureDialog(inProps) {
         })
             .catch((error) => {
             setOpenDeleteAvatarDialog(false);
-            console.log(error);
+            Logger.error(SCOPE_SC_UI, error);
         });
     }
     /**
@@ -200,23 +185,31 @@ export default function ChangePictureDialog(inProps) {
             }
         })
             .catch((error) => {
-            console.log(error);
+            Logger.error(SCOPE_SC_UI, error);
         });
     }, []);
+    /**
+     * Renders root object
+     */
     return (React.createElement(Root, Object.assign({ className: classNames(classes.root, className), title: React.createElement(FormattedMessage, { defaultMessage: "ui.changePicture.title", id: "ui.changePicture.title" }), onClose: onClose, open: open }, rest),
         React.createElement(Box, { className: classes.upload },
-            React.createElement("input", { type: "file", onChange: () => handleUpload(event), ref: fileInput, hidden: true }),
-            React.createElement(Button, { disabled: loading || isDeletingAvatar, variant: "outlined", onClick: () => fileInput.current.click(), color: error ? 'error' : 'primary', startIcon: loading ? null : React.createElement(Icon, { fontSize: "small" }, "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, { sx: { fontSize: 10 }, color: "text.secondary", gutterBottom: true },
-                React.createElement(FormattedMessage, { id: "ui.changePicture.listF", defaultMessage: "ui.changePicture.listF" }),
-                " ",
-                React.createElement("br", null),
-                React.createElement(FormattedMessage, { id: "ui.changePicture.listS", defaultMessage: "ui.changePicture.listS" }))),
+            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, { fontSize: "small" }, "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, { key: avatar.id, onClick: () => selectPrimaryAvatar(avatar), sx: { border: primary === avatar.id ? 'solid' : null } },
+            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", sx: { color: 'rgba(255, 255, 255, 0.54)' } },
+                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) }))));
 }
-//# sourceMappingURL=ChangePictureDialog.js.map

package/lib/esm/components/ChangePicture/ChangePictureDialog/index.d.ts

@@ -1,4 +1,3 @@
 import ChangePictureDialog, { CPDialogProps } from './ChangePictureDialog';
 export default ChangePictureDialog;
 export { CPDialogProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import ChangePictureDialog from './ChangePictureDialog';
 export default ChangePictureDialog;
-//# sourceMappingURL=index.js.map

package/lib/esm/components/ChangePicture/index.d.ts

@@ -1,4 +1,3 @@
 import ChangePicture, { ChangePictureProps } from './ChangePicture';
 export default ChangePicture;
 export { ChangePictureProps };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,3 +1,2 @@
 import ChangePicture from './ChangePicture';
 export default ChangePicture;
-//# sourceMappingURL=index.js.map

package/lib/esm/components/CommentObject/CommentObject.d.ts

@@ -1,6 +1,7 @@
 import { CardProps } from '@mui/material';
 import { SCCommentsOrderBy } from '../../types/comments';
-import { SCCommentType, SCFeedObjectType, SCFeedObjectTypologyType } from '@selfcommunity/types';
+import { CommentsObjectProps } from '../CommentsObject';
+import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
 import { CacheStrategies } from '@selfcommunity/utils';
 export interface CommentObjectProps {
     /**
@@ -30,9 +31,9 @@ export interface CommentObjectProps {
     feedObject?: SCFeedObjectType;
     /**
      * Type of feed object
-     * @default SCFeedObjectTypologyType.POST
+     * @default SCContributionType.POST
      */
-    feedObjectType?: SCFeedObjectTypologyType;
+    feedObjectType?: Exclude<SCContributionType, SCContributionType.COMMENT>;
     /**
      * comments per page (latest_comments)
      * @default null
@@ -64,16 +65,26 @@ export interface CommentObjectProps {
      * @default null
      */
     onDelete?: (comment: SCCommentType) => void;
+    /**
+     * Show all summary initially (otherwise it will be truncated)
+     * @default false
+     */
+    truncateContent?: boolean;
     /**
      * Props to spread to single comment object skeleton
      * @default {elevation: 0}
      */
     CommentObjectSkeletonProps?: CardProps;
     /**
-     * Props to spread to single comment object ReplyCommentObject
+     * Props to spread to single comment object CommentObjectReply
      * @default {elevation: 0}
      */
-    ReplyCommentObjectProps?: CardProps;
+    CommentObjectReplyProps?: CardProps;
+    /**
+     * Props to spread to sub comments object
+     * @default {elevation: 0, WidgetProps: {variant: 'outlined'} as WidgetProps}
+     */
+    CommentsObjectComponentProps?: CommentsObjectProps;
     /**
      * If datetime is linkable or not
      * @default true
@@ -90,7 +101,11 @@ export interface CommentObjectProps {
     [p: string]: any;
 }
 /**
- *> API documentation for the Community-JS Comment Object component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Comment Object component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a comment item.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CommentObject)
 
  #### Import
 
@@ -114,8 +129,8 @@ export interface CommentObjectProps {
  |author|.SCCommentObject-author|Styles applied to the author section.|
  |content|.SCCommentObject-content|Styles applied to content section.|
  |textContent|.SCCommentObject-text-content|Styles applied to text content section.|
- |btnVotes|.SCCommentObject-btn-votes|Styles applied to the vote button element.|
- |votes|.SCCommentObject-votes|Styles applied to the votes section.|
+ |vote|.SCCommentObject-vote|Styles applied to the votes section.|
+ |btnVotes|.SCCommentObject-vote-audience|Styles applied to the votes audience section.|
  |commentActionsMenu|.SCCommentObject-comment-actions-menu|Styles applied to comment action menu element.|
  |deleted|.SCCommentObject-deleted|Styles applied to tdeleted element.|
  |activityAt|.SCCommentObject-activity-at|Styles applied to activity at section.|
@@ -125,4 +140,3 @@ export interface CommentObjectProps {
  * @param inProps
  */
 export default function CommentObject(inProps: CommentObjectProps): JSX.Element;
-//# sourceMappingURL=CommentObject.d.ts.map