@selfcommunity/react-ui 0.7.0-alpha.99 → 0.7.0

package/lib/cjs/components/CommentObject/Skeleton.d.ts

@@ -9,14 +9,13 @@
 
  #### Component Name
 
- The name `SCCommentObjectSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCommentObject-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCommentObjectSkeleton-root|Styles applied to the root element.|
+ |root|.SCCommentObject-skeleton-root|Styles applied to the root element.|
  *
  */
 export default function CommentObjectSkeleton(props: any): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -1,50 +1,22 @@
 "use strict";
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const Widget_1 = __importDefault(require("../Widget"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
 const styles_1 = require("@mui/material/styles");
-const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
+const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
-const BaseItem_1 = __importDefault(require("../../shared/BaseItem"));
-const PREFIX = 'SCCommentObjectSkeleton';
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    avatar: `${PREFIX}-avatar`,
-    primaryContent: `${PREFIX}-primary-content`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    primaryContent: `${constants_1.PREFIX}-primary-content`
 };
 const Root = (0, styles_1.styled)(BaseItem_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`&.${classes.root}`]: {
-        paddingBottom: theme.spacing(),
-        overflow: 'visible',
-        '& > div': {
-            alignItems: 'flex-start'
-        }
-    },
-    [`& .${classes.avatar}`]: {
-        top: theme.spacing()
-    },
-    [`& .${classes.primaryContent}`]: {
-        marginBottom: theme.spacing()
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Comment Object Skeleton component. Learn about the available props and the CSS API.
 
@@ -56,17 +28,17 @@ const Root = (0, styles_1.styled)(BaseItem_1.default, {
 
  #### Component Name
 
- The name `SCCommentObjectSkeleton` can be used when providing style overrides in the theme.
+ The name `SCCommentObject-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCommentObjectSkeleton-root|Styles applied to the root element.|
+ |root|.SCCommentObject-skeleton-root|Styles applied to the root element.|
  *
  */
 function CommentObjectSkeleton(props) {
-    const { WidgetProps } = props, rest = __rest(props, ["WidgetProps"]);
+    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),
@@ -75,4 +47,3 @@ function CommentObjectSkeleton(props) {
                     react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" })))) })));
 }
 exports.default = CommentObjectSkeleton;
-//# sourceMappingURL=Skeleton.js.map

package/lib/cjs/components/CommentObject/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCommentObject";

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCommentObject';

package/lib/cjs/components/CommentObject/index.d.ts

@@ -2,4 +2,3 @@ import CommentObject, { CommentObjectProps } from './CommentObject';
 import CommentObjectSkeleton from './Skeleton';
 export default CommentObject;
 export { CommentObjectProps, CommentObjectSkeleton };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommentObjectSkeleton = void 0;
-const CommentObject_1 = __importDefault(require("./CommentObject"));
-const Skeleton_1 = __importDefault(require("./Skeleton"));
+const tslib_1 = require("tslib");
+const CommentObject_1 = tslib_1.__importDefault(require("./CommentObject"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 exports.CommentObjectSkeleton = Skeleton_1.default;
 exports.default = CommentObject_1.default;
-//# sourceMappingURL=index.js.map

package/lib/cjs/components/CommentObjectReply/CommentObjectReply.d.ts

@@ -0,0 +1,72 @@
+import { WidgetProps } from '../Widget';
+export interface CommentObjectReplyProps extends WidgetProps {
+    /**
+     * Bind focus on mount
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * Callback invoked after reply
+     * @param comment
+     */
+    onReply?: (comment: any) => void;
+    /**
+     * Callback invoked after save/edit
+     * @param comment
+     */
+    onSave?: (comment: any) => void;
+    /**
+     * Callback invoked after disccard save/edit
+     * @param comment
+     */
+    onCancel?: () => void;
+    /**
+     * Disable component
+     * @default true
+     */
+    editable?: boolean;
+    /**
+     * Initial content
+     * @default ''
+     */
+    text?: string;
+    /**
+     * Initial content
+     * @default {variant: 'outlined'}
+     */
+    WidgetProps?: WidgetProps;
+    /**
+     * Other props
+     */
+    [p: string]: any;
+}
+/**
+ *> API documentation for the Community-JS Comment Object Reply component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CommentObjectReply} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `CommentObjectReply` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.CommentObjectReply-root|Styles applied to the root element.|
+ |comment|.SCCommentObjectReply-comment|Styles applied to comment element.|
+ |hasValue|.SCCommentObjectReply-has-value|Styles applied to the comment element when editor is not empty.|
+ |avatar|.SCCommentObjectReply-avatar|Styles applied to the avatar element.|
+ |actions|.SCCommentObjectReply-actions|Styles applied to the actions section.|
+ |buttonReply|.SCCommentObjectReply-button-reply|Styles applied to reply button element.|
+ |buttonSave|.SCCommentObjectReply-button-save|Styles applied to save button element.|
+ |buttonCancel|.SCCommentObjectReply-button-cancel|Styles applied to the cancel button element.|
+
+ * @param inProps
+ */
+export default function CommentObjectReply(inProps: CommentObjectReplyProps): JSX.Element;

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

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const Widget_1 = tslib_1.__importDefault(require("../Widget"));
+const react_intl_1 = require("react-intl");
+const material_1 = require("@mui/material");
+const react_core_1 = require("@selfcommunity/react-core");
+const Editor_1 = tslib_1.__importDefault(require("../Editor"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const lab_1 = require("@mui/lab");
+const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
+const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
+const system_1 = require("@mui/system");
+const PREFIX = 'SCCommentObjectReply';
+const classes = {
+    root: `${PREFIX}-root`,
+    comment: `${PREFIX}-comment`,
+    hasValue: `${PREFIX}-has-value`,
+    avatar: `${PREFIX}-avatar`,
+    actions: `${PREFIX}-actions`,
+    buttonReply: `${PREFIX}-button-reply`,
+    buttonSave: `${PREFIX}-button-save`,
+    buttonCancel: `${PREFIX}-button-cancel`
+};
+const Root = (0, styles_1.styled)(BaseItem_1.default, {
+    name: PREFIX,
+    slot: 'Root'
+})(() => ({}));
+/**
+ *> API documentation for the Community-JS Comment Object Reply component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {CommentObjectReply} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `CommentObjectReply` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.CommentObjectReply-root|Styles applied to the root element.|
+ |comment|.SCCommentObjectReply-comment|Styles applied to comment element.|
+ |hasValue|.SCCommentObjectReply-has-value|Styles applied to the comment element when editor is not empty.|
+ |avatar|.SCCommentObjectReply-avatar|Styles applied to the avatar element.|
+ |actions|.SCCommentObjectReply-actions|Styles applied to the actions section.|
+ |buttonReply|.SCCommentObjectReply-button-reply|Styles applied to reply button element.|
+ |buttonSave|.SCCommentObjectReply-button-save|Styles applied to save button element.|
+ |buttonCancel|.SCCommentObjectReply-button-cancel|Styles applied to the cancel button element.|
+
+ * @param inProps
+ */
+function CommentObjectReply(inProps) {
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { id = 'CommentObjectReply', className, elevation = 0, autoFocus = false, onReply, onSave, onCancel, editable = true, text = '', WidgetProps = { variant: 'outlined' } } = props, rest = tslib_1.__rest(props, ["id", "className", "elevation", "autoFocus", "onReply", "onSave", "onCancel", "editable", "text", "WidgetProps"]);
+    // CONTEXT
+    const scUserContext = (0, react_core_1.useSCUser)();
+    // RETRIEVE OBJECTS
+    const [html, setHtml] = (0, react_1.useState)(text);
+    // REFS
+    let editor = (0, react_1.useRef)();
+    /**
+     * When CommentObjectReply is mount
+     * if autoFocus === true focus on editor
+     */
+    (0, react_1.useEffect)(() => {
+        autoFocus && handleEditorFocus();
+    }, [autoFocus]);
+    /**
+     * Focus on editor
+     */
+    const handleEditorFocus = () => {
+        if (editor.current) {
+            editor.current.focus();
+        }
+    };
+    /**
+     * Handle Replay
+     */
+    const handleReply = () => {
+        onReply && onReply(html);
+    };
+    /**
+     * Handle Save
+     */
+    const handleSave = () => {
+        onSave && onSave(html);
+    };
+    /**
+     * Handle cancel save
+     */
+    const handleCancel = () => {
+        onCancel && onCancel();
+    };
+    /**
+     * Handle Editor change
+     */
+    const handleChangeText = (value) => {
+        setHtml(value);
+    };
+    /**
+     * Check if editor is empty
+     */
+    const isEditorEmpty = (0, react_1.useMemo)(() => {
+        const _html = html.trim();
+        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" }))))))) })));
+}
+exports.default = CommentObjectReply;

package/lib/cjs/components/CommentObjectReply/index.d.ts

@@ -0,0 +1,3 @@
+import CommentObjectReply, { CommentObjectReplyProps } from './CommentObjectReply';
+export default CommentObjectReply;
+export { CommentObjectReplyProps };

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const CommentObjectReply_1 = tslib_1.__importDefault(require("./CommentObjectReply"));
+exports.default = CommentObjectReply_1.default;

package/lib/cjs/components/CommentsFeedObject/CommentsFeedObject.d.ts

@@ -1,7 +1,7 @@
 import { CommentObjectProps } from '../CommentObject';
 import { SCCommentsOrderBy } from '../../types/comments';
 import { CacheStrategies } from '@selfcommunity/utils';
-import { SCCommentType, SCFeedObjectType, SCFeedObjectTypologyType } from '@selfcommunity/types';
+import { SCCommentType, SCContributionType, SCFeedObjectType } from '@selfcommunity/types';
 export interface CommentsFeedObjectProps {
     /**
      * Id of the CommentsObject
@@ -25,9 +25,9 @@ export interface CommentsFeedObjectProps {
     feedObject?: SCFeedObjectType;
     /**
      * Type of feed object
-     * @default SCFeedObjectTypologyType.POST
+     * @default SCContributionType.POST
      */
-    feedObjectType?: SCFeedObjectTypologyType;
+    feedObjectType?: Exclude<SCContributionType, SCContributionType.COMMENT>;
     /**
      * Id of the comment object
      * @default null
@@ -112,27 +112,30 @@ export interface CommentsFeedObjectProps {
     [p: string]: any;
 }
 /**
- *> API documentation for the Community-JS Comments Object component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Comments Feed Object component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a list of comment items.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CommentsFeedObject)
 
  #### Import
 
  ```jsx
- import {CommentsObject} from '@selfcommunity/react-ui';
+ import {CommentsFeedObject} from '@selfcommunity/react-ui';
  ```
 
  #### Component Name
 
- The name `SCCommentsObject` can be used when providing style overrides in the theme.
+ The name `SCCommentsFeedObject` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCommentsObject-root|Styles applied to the root element.|
- |commentNotFound|.SCCommentsObject-comment-not-found|Styles applied to the label 'Comment not found'.|
- |noComments|.SCCommentsObject-no-comments|Styles applied to the 'no comments' section.|
+ |root|.SCCommentsFeedObject-root|Styles applied to the root element.|
+ |noComments|.SCCommentsFeedObject-no-comments|Styles applied to the 'no comments' section.|
+ |commentNotFound|.SCCommentsFeedObject-comment-not-found|Styles applied to the label 'Comment not found'.|
 
  * @param inProps
  */
 export default function CommentsFeedObject(inProps: CommentsFeedObjectProps): JSX.Element;
-//# sourceMappingURL=CommentsFeedObject.d.ts.map

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

@@ -1,109 +1,67 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-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;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
 const styles_1 = require("@mui/material/styles");
 const react_intl_1 = require("react-intl");
-const CommentObject_1 = __importDefault(require("../CommentObject"));
+const CommentObject_1 = tslib_1.__importDefault(require("../CommentObject"));
 const material_1 = require("@mui/material");
 const comments_1 = require("../../types/comments");
-const classnames_1 = __importDefault(require("classnames"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
-const CommentsObject_1 = __importDefault(require("../CommentsObject"));
+const CommentsObject_1 = tslib_1.__importDefault(require("../CommentsObject"));
 const Errors_1 = require("../../constants/Errors");
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const Typography_1 = tslib_1.__importDefault(require("@mui/material/Typography"));
 const contribution_1 = require("../../utils/contribution");
 const api_services_1 = require("@selfcommunity/api-services");
 const utils_1 = require("@selfcommunity/utils");
 const react_core_1 = require("@selfcommunity/react-core");
 const types_1 = require("@selfcommunity/types");
 const Pagination_1 = require("../../constants/Pagination");
-const PREFIX = 'SCCommentsFeedObject';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    noComments: `${PREFIX}-no-comments`,
-    commentNotFound: `${PREFIX}-comment-not-found`
+    root: `${constants_1.PREFIX}-root`,
+    noComments: `${constants_1.PREFIX}-no-comments`,
+    commentNotFound: `${constants_1.PREFIX}-comment-not-found`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%',
-    [`& .${classes.noComments}`]: {
-        padding: theme.spacing(),
-        paddingLeft: 0
-    },
-    [`& .${classes.commentNotFound}`]: {
-        padding: theme.spacing()
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
- *> API documentation for the Community-JS Comments Object component. Learn about the available props and the CSS API.
+ * > API documentation for the Community-JS Comments Feed Object component. Learn about the available props and the CSS API.
+ *
+ *
+ * This component renders a list of comment items.
+ * Take a look at our <strong>demo</strong> component [here](/docs/sdk/community-js/react-ui/Components/CommentsFeedObject)
 
  #### Import
 
  ```jsx
- import {CommentsObject} from '@selfcommunity/react-ui';
+ import {CommentsFeedObject} from '@selfcommunity/react-ui';
  ```
 
  #### Component Name
 
- The name `SCCommentsObject` can be used when providing style overrides in the theme.
+ The name `SCCommentsFeedObject` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCCommentsObject-root|Styles applied to the root element.|
- |commentNotFound|.SCCommentsObject-comment-not-found|Styles applied to the label 'Comment not found'.|
- |noComments|.SCCommentsObject-no-comments|Styles applied to the 'no comments' section.|
+ |root|.SCCommentsFeedObject-root|Styles applied to the root element.|
+ |noComments|.SCCommentsFeedObject-no-comments|Styles applied to the 'no comments' section.|
+ |commentNotFound|.SCCommentsFeedObject-comment-not-found|Styles applied to the label 'Comment not found'.|
 
  * @param inProps
  */
 function CommentsFeedObject(inProps) {
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     // PROPS
-    const { id = `comments_object_${props.feedObjectType ? props.feedObjectType : props.feedObject ? props.feedObject.type : ''}_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = types_1.SCFeedObjectTypologyType.POST, commentObjectId, commentObject, CommentComponent = CommentObject_1.default, CommentComponentProps = { variant: 'outlined', linkableCommentDateTime: false }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, renderNoComments, renderCommentNotFound, page = 1, commentsPageCount = Pagination_1.DEFAULT_PAGINATION_LIMIT, commentsOrderBy = comments_1.SCCommentsOrderBy.ADDED_AT_ASC, showTitle = false, infiniteScrolling = true, onChangePage, comments = [], cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY } = props, rest = __rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "CommentComponent", "CommentComponentProps", "CommentObjectSkeletonProps", "renderNoComments", "renderCommentNotFound", "page", "commentsPageCount", "commentsOrderBy", "showTitle", "infiniteScrolling", "onChangePage", "comments", "cacheStrategy"]);
+    const { id = `comments_object_${props.feedObjectType ? props.feedObjectType : props.feedObject ? props.feedObject.type : ''}_${props.feedObjectId ? props.feedObjectId : props.feedObject ? props.feedObject.id : ''}`, className, feedObjectId, feedObject, feedObjectType = types_1.SCContributionType.POST, commentObjectId, commentObject, CommentComponent = CommentObject_1.default, CommentComponentProps = { variant: 'outlined', linkableCommentDateTime: false }, CommentObjectSkeletonProps = { elevation: 0, WidgetProps: { variant: 'outlined' } }, renderNoComments, renderCommentNotFound, page = 1, commentsPageCount = Pagination_1.DEFAULT_PAGINATION_LIMIT, commentsOrderBy = comments_1.SCCommentsOrderBy.ADDED_AT_ASC, showTitle = false, infiniteScrolling = true, onChangePage, comments = [], cacheStrategy = utils_1.CacheStrategies.NETWORK_ONLY } = props, rest = tslib_1.__rest(props, ["id", "className", "feedObjectId", "feedObject", "feedObjectType", "commentObjectId", "commentObject", "CommentComponent", "CommentComponentProps", "CommentObjectSkeletonProps", "renderNoComments", "renderCommentNotFound", "page", "commentsPageCount", "commentsOrderBy", "showTitle", "infiniteScrolling", "onChangePage", "comments", "cacheStrategy"]);
     // STATE
     const commentsObject = (0, react_core_1.useSCFetchCommentObjects)({
         id: feedObjectId,
@@ -122,6 +80,8 @@ function CommentsFeedObject(inProps) {
     // CONST
     const objId = commentsObject.feedObject ? commentsObject.feedObject.id : null;
     const commentObjId = commentObj ? commentObj.id : null;
+    // REFS
+    const commentsContainerRef = (0, react_1.useRef)();
     /**
      * Total number of comments
      */
@@ -174,10 +134,10 @@ function CommentsFeedObject(inProps) {
         // Add (window.innerHeight / 2) to scroll
         // (usually >= (topBar + offset) and in center of the screen)
         setTimeout(() => {
-            const el = document.querySelector(`#comment_object_${comment.id}`);
+            // Get the comment inside commentsContainer
+            const el = commentsContainerRef.current ? commentsContainerRef.current.querySelector(`#comment_object_${comment.id}`) : null;
             if (el) {
-                const y = el.getBoundingClientRect().top + window.pageYOffset - window.innerHeight / 2;
-                window.scrollTo({ top: y, behavior: 'smooth' });
+                el.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'center' });
             }
         }, 300);
     }
@@ -264,9 +224,8 @@ function CommentsFeedObject(inProps) {
     /**
      * Renders root object
      */
-    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest),
+    return (react_1.default.createElement(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className) }, rest, { ref: commentsContainerRef }),
         renderTitle(),
         commentsRendered));
 }
 exports.default = CommentsFeedObject;
-//# sourceMappingURL=CommentsFeedObject.js.map

package/lib/cjs/components/CommentsFeedObject/Skeleton.d.ts

@@ -1,2 +1 @@
 export default function CommentsFeedObjectSkeleton(props: any): JSX.Element;
-//# sourceMappingURL=Skeleton.d.ts.map

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

@@ -1,12 +1,18 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
 const CommentsObject_1 = require("../CommentsObject");
+const constants_1 = require("./constants");
+const styles_1 = require("@mui/material/styles");
+const classes = {
+    root: `${constants_1.PREFIX}-skeleton-root`
+};
+const Root = (0, styles_1.styled)(CommentsObject_1.CommentsObjectSkeleton, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 function CommentsFeedObjectSkeleton(props) {
-    return react_1.default.createElement(CommentsObject_1.CommentsObjectSkeleton, Object.assign({}, props));
+    return react_1.default.createElement(Root, Object.assign({ className: classes.root }, props));
 }
 exports.default = CommentsFeedObjectSkeleton;
-//# sourceMappingURL=Skeleton.js.map

package/lib/cjs/components/CommentsFeedObject/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCCommentsFeedObject";

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCCommentsFeedObject';

package/lib/cjs/components/CommentsFeedObject/index.d.ts

@@ -2,4 +2,3 @@ import CommentsFeedObject, { CommentsFeedObjectProps } from './CommentsFeedObjec
 import CommentsFeedObjectSkeleton from './Skeleton';
 export default CommentsFeedObject;
 export { CommentsFeedObjectProps, CommentsFeedObjectSkeleton };
-//# sourceMappingURL=index.d.ts.map

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

@@ -1,11 +1,8 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CommentsFeedObjectSkeleton = void 0;
-const CommentsFeedObject_1 = __importDefault(require("./CommentsFeedObject"));
-const Skeleton_1 = __importDefault(require("./Skeleton"));
+const tslib_1 = require("tslib");
+const CommentsFeedObject_1 = tslib_1.__importDefault(require("./CommentsFeedObject"));
+const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
 exports.CommentsFeedObjectSkeleton = Skeleton_1.default;
 exports.default = CommentsFeedObject_1.default;
-//# sourceMappingURL=index.js.map