@reltio/components 1.4.1163 → 1.4.1167

package/cjs/components/CollaborationItem/CollaborationItem.js

@@ -33,22 +33,15 @@ exports.CollaborationItem = react_1.memo(function (_a) {
     var uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, classes = _a.classes, popperRef = _a.popperRef, messagesRef = _a.messagesRef, comment = _a.comment;
     var inputRef = react_1.useRef();
     var styles = styles_1.useStyles({ classes: classes });
-    var _b = react_1.useState(false), isEditingComment = _b[0], setIsEditingComment = _b[1];
     var handleReply = function () {
-        if (isEditingComment) {
-            setIsEditingComment(false);
-        }
         inputRef.current.focus();
     };
-    var handleSetEdit = function () {
-        setIsEditingComment(true);
-    };
-    var sendMessageArea = (react_1.default.createElement(SendMessageArea_1.SendMessageArea, { className: styles.sendMessageArea, inputRef: inputRef, popperRef: popperRef, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, comment: comment, onCancel: function () { return setIsEditingComment(false); }, isEditingComment: isEditingComment }));
+    var sendMessageArea = (react_1.default.createElement(SendMessageArea_1.SendMessageArea, { className: styles.sendMessageArea, inputRef: inputRef, popperRef: popperRef, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, comment: comment }));
     return (react_1.default.createElement(Box_1.default, { className: styles.root },
         comment && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: styles.messages, ref: messagesRef },
-                react_1.default.createElement(Comment_1.Comment, { comment: comment, uri: uri, onReply: handleReply, onStartEditing: handleSetEdit, className: styles.comment }),
-                react_1.default.createElement(Box_1.default, { className: styles.replies }, comment.replies.map(function (reply) { return (react_1.default.createElement(RepliedComment_1.RepliedComment, { key: reply.replyId, className: styles.repliedComment, reply: reply })); }))),
+                react_1.default.createElement(Comment_1.Comment, { comment: comment, uri: uri, onReply: handleReply, className: styles.comment, relatedObjectUris: relatedObjectUris, objectType: objectType }),
+                react_1.default.createElement(Box_1.default, { className: styles.replies }, comment.replies.map(function (reply) { return (react_1.default.createElement(RepliedComment_1.RepliedComment, { key: reply.replyId, className: styles.repliedComment, reply: reply, uri: uri, comment: comment })); }))),
             sendMessageArea)),
         !comment && sendMessageArea));
 });

package/cjs/components/CollaborationItem/Comment/Comment.d.ts

@@ -5,7 +5,8 @@ declare type Props = {
     onReply: () => void;
     className?: string;
     comment: CommentType;
-    onStartEditing: () => void;
+    relatedObjectUris: CommentType['relatedObjectUris'];
+    objectType: CommentType['objectType'];
 };
-export declare const Comment: ({ onReply, className, uri, comment, onStartEditing }: Props) => JSX.Element;
+export declare const Comment: ({ onReply, className, uri, comment, relatedObjectUris, objectType }: Props) => JSX.Element;
 export {};

package/cjs/components/CollaborationItem/Comment/Comment.js

@@ -24,11 +24,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Comment = void 0;
 var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var Link_1 = __importDefault(require("@material-ui/core/Link"));
 var Box_1 = __importDefault(require("@material-ui/core/Box"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var DropDownMenuButton_1 = __importDefault(require("../../DropDownMenuButton/DropDownMenuButton"));
 var SmallIconButton_1 = require("../../SmallIconButton");
 var CommentTarget_1 = require("../CommentTarget/CommentTarget");
@@ -36,44 +38,52 @@ var CommentContent_1 = require("../CommentContent/CommentContent");
 var Avatar_1 = require("../Avatar/Avatar");
 var contexts_1 = require("../../../contexts");
 var utils_1 = require("../utils");
+var SendMessageArea_1 = require("../SendMessageArea/SendMessageArea");
 var styles_1 = require("./styles");
-var react_redux_1 = require("react-redux");
-var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var Comment = function (_a) {
-    var onReply = _a.onReply, className = _a.className, uri = _a.uri, comment = _a.comment, onStartEditing = _a.onStartEditing;
+    var onReply = _a.onReply, className = _a.className, uri = _a.uri, comment = _a.comment, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType;
     var styles = styles_1.useStyles();
+    var inputRef = react_1.useRef();
+    var _b = react_1.useState(false), isEditingComment = _b[0], setIsEditingComment = _b[1];
     var username = react_redux_1.useSelector(mdm_module_1.default.selectors.getUserName);
-    var canChangeComment = comment.createdBy === username;
-    var _b = react_1.useContext(contexts_1.CollaborationContext), resolveThread = _b.resolveThread, reOpenThread = _b.reOpenThread, sending = _b.sending, deleteComment = _b.deleteComment;
+    var commentId = comment.commentId, createdBy = comment.createdBy, createdTime = comment.createdTime;
+    var canChangeComment = createdBy === username;
+    var _c = react_1.useContext(contexts_1.CollaborationContext), resolveThread = _c.resolveThread, reOpenThread = _c.reOpenThread, sending = _c.sending, deleteComment = _c.deleteComment;
+    react_1.useEffect(function () {
+        if (isEditingComment) {
+            inputRef.current.focus();
+        }
+    }, [isEditingComment]);
     var menuItems = react_1.useMemo(function () { return [
         {
             text: ui_i18n_1.default.text('Edit'),
-            onClick: onStartEditing
+            onClick: function () { return setIsEditingComment(true); }
         },
         {
             text: ui_i18n_1.default.text('Delete'),
-            onClick: function () { return deleteComment({ uri: uri, commentId: comment.commentId }); }
+            onClick: function () { return deleteComment({ uri: uri, commentId: commentId }); }
         }
-    ]; }, [onStartEditing, deleteComment, uri, comment]);
+    ]; }, [deleteComment, uri, commentId]);
     var handleResolve = function () {
-        resolveThread({ commentId: comment.commentId, uri: uri });
+        resolveThread({ commentId: commentId, uri: uri });
     };
     var handleReOpen = function () {
-        reOpenThread({ commentId: comment.commentId, uri: uri });
+        reOpenThread({ commentId: commentId, uri: uri });
     };
+    var sendMessageArea = (react_1.default.createElement(SendMessageArea_1.SendMessageArea, { inputRef: inputRef, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, onCancel: function () { return setIsEditingComment(false); }, isEditingComment: isEditingComment, comment: comment }));
     return (react_1.default.createElement(Box_1.default, { className: className },
         react_1.default.createElement(Box_1.default, { className: styles.header },
-            react_1.default.createElement(Avatar_1.Avatar, { classes: { root: styles.avatar } }, comment.createdBy),
+            react_1.default.createElement(Avatar_1.Avatar, { classes: { root: styles.avatar } }, createdBy),
             react_1.default.createElement(Box_1.default, { width: "100%" },
-                react_1.default.createElement(Typography_1.default, { className: styles.username }, comment.createdBy)),
-            react_1.default.createElement(Typography_1.default, { className: styles.createdAt }, utils_1.formatDate(comment.createdTime)),
+                react_1.default.createElement(Typography_1.default, { className: styles.username }, createdBy)),
+            react_1.default.createElement(Typography_1.default, { className: styles.createdAt }, utils_1.formatDate(createdTime)),
             canChangeComment && (react_1.default.createElement(DropDownMenuButton_1.default, { buttonComponent: SmallIconButton_1.SmallIconButtonWithTooltip, buttonProps: {
                     icon: MoreVert_1.default,
                     tooltipTitle: ui_i18n_1.default.text('Open menu')
                 }, popoverProps: { PopoverClasses: { root: styles.dropdownMenu } }, menuItems: menuItems, menuId: "collaboration-comment-menu" }))),
         react_1.default.createElement(Box_1.default, { className: styles.body },
             react_1.default.createElement(CommentTarget_1.CommentTarget, { comment: comment, className: styles.commentTarget }),
-            react_1.default.createElement(CommentContent_1.CommentContent, { comment: comment, className: styles.message }),
+            isEditingComment ? sendMessageArea : react_1.default.createElement(CommentContent_1.CommentContent, { comment: comment, className: styles.message }),
             react_1.default.createElement(Box_1.default, { className: styles.buttons },
                 react_1.default.createElement(Link_1.default, { className: styles.button, onClick: onReply, component: "button" }, ui_i18n_1.default.text('Reply')),
                 comment.status === 'open' && (react_1.default.createElement(Link_1.default, { disabled: sending, className: styles.button, onClick: handleResolve, component: "button" }, ui_i18n_1.default.text('Resolve'))),

package/cjs/components/CollaborationItem/Comment/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"body" | "message" | "button" | "header" | "avatar" | "username" | "createdAt" | "commentTarget" | "dropdownMenu" | "buttons">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"body" | "message" | "button" | "header" | "avatar" | "username" | "buttons" | "createdAt" | "commentTarget" | "dropdownMenu">;

package/cjs/components/CollaborationItem/RepliedComment/RepliedComment.d.ts

@@ -1,8 +1,11 @@
-/// <reference types="react" />
-import { Reply } from '@reltio/mdm-sdk';
+import React from 'react';
+import { Reply, Comment as CommentType } from '@reltio/mdm-sdk';
 declare type Props = {
     className?: string;
-    reply: Pick<Reply, 'createdTime' | 'content' | 'createdBy' | 'action' | 'namedUsers'>;
+    reply: Pick<Reply, 'createdTime' | 'content' | 'createdBy' | 'action' | 'namedUsers' | 'replyId'>;
+    comment?: CommentType;
+    uri: string;
+    popperRef?: React.RefObject<any>;
 };
-export declare const RepliedComment: ({ className, reply }: Props) => JSX.Element;
+export declare const RepliedComment: ({ className, reply, uri, comment, popperRef }: Props) => JSX.Element;
 export {};

package/cjs/components/CollaborationItem/RepliedComment/RepliedComment.js

@@ -1,30 +1,82 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RepliedComment = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var classnames_1 = __importDefault(require("classnames"));
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var MoreVert_1 = __importDefault(require("@material-ui/icons/MoreVert"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var Avatar_1 = require("../Avatar/Avatar");
 var CommentContent_1 = require("../CommentContent/CommentContent");
 var utils_1 = require("../utils");
 var styles_1 = require("./styles");
+var contexts_1 = require("../../../contexts");
+var DropDownMenuButton_1 = __importDefault(require("../../DropDownMenuButton/DropDownMenuButton"));
+var SmallIconButton_1 = require("../../SmallIconButton");
+var SendMessageArea_1 = require("../SendMessageArea/SendMessageArea");
 var RepliedComment = function (_a) {
-    var className = _a.className, reply = _a.reply;
+    var className = _a.className, reply = _a.reply, uri = _a.uri, comment = _a.comment, popperRef = _a.popperRef;
+    var inputRef = react_1.useRef();
+    var _b = react_1.useState(false), isEditingReply = _b[0], setIsEditingReply = _b[1];
     var createdBy = reply.createdBy, action = reply.action, createdTime = reply.createdTime;
+    var username = react_redux_1.useSelector(mdm_module_1.default.selectors.getUserName);
+    var canChangeReply = createdBy === username;
+    var deleteReply = react_1.useContext(contexts_1.CollaborationContext).deleteReply;
+    react_1.useEffect(function () {
+        if (isEditingReply) {
+            inputRef.current.focus();
+        }
+    }, [isEditingReply]);
     var styles = styles_1.useStyles();
+    var menuItems = react_1.useMemo(function () { return [
+        {
+            text: ui_i18n_1.default.text('Edit'),
+            onClick: function () { return setIsEditingReply(true); }
+        },
+        {
+            text: ui_i18n_1.default.text('Delete'),
+            onClick: function () { return deleteReply({ uri: uri, commentId: comment.commentId, reply: reply }); }
+        }
+    ]; }, [deleteReply, uri, comment.commentId, reply]);
+    var sendMessageArea = (react_1.default.createElement(SendMessageArea_1.SendMessageArea, { inputRef: inputRef, popperRef: popperRef, uri: uri, onCancel: function () { return setIsEditingReply(false); }, isEditingReply: isEditingReply, reply: reply, comment: comment }));
     return (react_1.default.createElement(Box_1.default, { className: classnames_1.default(styles.root, className) },
         react_1.default.createElement(Avatar_1.Avatar, { classes: { root: styles.avatar } }, createdBy),
-        react_1.default.createElement(Box_1.default, null,
+        react_1.default.createElement(Box_1.default, { flexGrow: 1 },
             react_1.default.createElement(Box_1.default, { className: styles.header },
                 react_1.default.createElement(Typography_1.default, { className: styles.username }, createdBy),
                 action === 'resolve' && (react_1.default.createElement(Typography_1.default, { className: styles.marked }, ui_i18n_1.default.text('Marked as resolved'))),
                 action === 'reopen' && react_1.default.createElement(Typography_1.default, { className: styles.marked }, ui_i18n_1.default.text('Re-opened'))),
-            action !== 'resolve' && react_1.default.createElement(CommentContent_1.CommentContent, { className: styles.message, comment: reply }),
-            react_1.default.createElement(Typography_1.default, { className: styles.createdAt }, utils_1.formatDate(createdTime)))));
+            action !== 'resolve' &&
+                (isEditingReply ? sendMessageArea : react_1.default.createElement(CommentContent_1.CommentContent, { className: styles.message, comment: reply })),
+            react_1.default.createElement(Typography_1.default, { className: styles.createdAt }, utils_1.formatDate(createdTime))),
+        canChangeReply && (react_1.default.createElement(DropDownMenuButton_1.default, { buttonComponent: SmallIconButton_1.SmallIconButtonWithTooltip, buttonProps: {
+                icon: MoreVert_1.default,
+                tooltipTitle: ui_i18n_1.default.text('Open menu')
+            }, menuItems: menuItems, menuId: "collaboration-comment-menu" }))));
 };
 exports.RepliedComment = RepliedComment;

package/cjs/components/CollaborationItem/SendMessageArea/SendMessageArea.d.ts

@@ -1,15 +1,17 @@
 import React from 'react';
-import { Comment } from '@reltio/mdm-sdk';
+import { Comment, Reply } from '@reltio/mdm-sdk';
 declare type Props = {
     inputRef: React.RefObject<HTMLInputElement>;
     className?: string;
     uri: string;
-    objectType: Comment['objectType'];
-    relatedObjectUris: Comment['relatedObjectUris'];
+    objectType?: Comment['objectType'];
+    relatedObjectUris?: Comment['relatedObjectUris'];
     popperRef?: React.RefObject<any>;
     comment?: Comment;
+    reply?: Pick<Reply, 'content' | 'replyId'>;
     isEditingComment?: boolean;
+    isEditingReply?: boolean;
     onCancel?: () => void;
 };
-export declare const SendMessageArea: ({ inputRef, className, uri, relatedObjectUris, objectType, popperRef, comment, isEditingComment, onCancel }: Props) => JSX.Element;
+export declare const SendMessageArea: ({ inputRef, className, uri, relatedObjectUris, objectType, popperRef, comment, reply, isEditingComment, isEditingReply, onCancel }: Props) => JSX.Element;
 export {};

package/cjs/components/CollaborationItem/SendMessageArea/SendMessageArea.js

@@ -27,6 +27,7 @@ var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_redux_1 = require("react-redux");
+var ramda_1 = require("ramda");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var Box_1 = __importDefault(require("@material-ui/core/Box"));
 var Button_1 = __importDefault(require("@material-ui/core/Button"));
@@ -34,7 +35,6 @@ var TextFieldWithMentions_1 = require("../TextFieldWithMentions/TextFieldWithMen
 var Avatar_1 = require("../Avatar/Avatar");
 var contexts_1 = require("../../../contexts");
 var styles_1 = require("./styles");
-var ramda_1 = require("ramda");
 var hooks_1 = require("../../../hooks");
 var getPlaceholder = function (status) {
     switch (status) {
@@ -46,8 +46,8 @@ var getPlaceholder = function (status) {
             return '';
     }
 };
-var getButtonText = function (status, isEditingComment) {
-    if (isEditingComment) {
+var getButtonText = function (status, isEditingComment, isEditingReply) {
+    if (isEditingComment || isEditingReply) {
         return ui_i18n_1.default.text('Edit');
     }
     if (status === 'open' || status === 'resolved') {
@@ -56,10 +56,11 @@ var getButtonText = function (status, isEditingComment) {
     return ui_i18n_1.default.text('Comment');
 };
 var SendMessageArea = function (_a) {
-    var inputRef = _a.inputRef, className = _a.className, uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, popperRef = _a.popperRef, comment = _a.comment, isEditingComment = _a.isEditingComment, onCancel = _a.onCancel;
-    var styles = styles_1.useStyles();
+    var inputRef = _a.inputRef, className = _a.className, uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, popperRef = _a.popperRef, comment = _a.comment, reply = _a.reply, isEditingComment = _a.isEditingComment, isEditingReply = _a.isEditingReply, onCancel = _a.onCancel;
+    var isEditing = isEditingComment || isEditingReply;
+    var styles = styles_1.useStyles({ isEditing: isEditing });
     var username = react_redux_1.useSelector(mdm_module_1.default.selectors.getUserName);
-    var _b = react_1.useContext(contexts_1.CollaborationContext), createReply = _b.createReply, createComment = _b.createComment, sending = _b.sending, editComment = _b.editComment;
+    var _b = react_1.useContext(contexts_1.CollaborationContext), createReply = _b.createReply, createComment = _b.createComment, sending = _b.sending, editComment = _b.editComment, editReply = _b.editReply;
     var _c = react_1.useState(''), value = _c[0], setValue = _c[1];
     var _d = react_1.useState(''), plainTextValue = _d[0], setPlainTextValue = _d[1];
     var _e = react_1.useState([]), mentions = _e[0], setMentions = _e[1];
@@ -112,6 +113,17 @@ var SendMessageArea = function (_a) {
                     });
                 }
             ],
+            [
+                ramda_1.always(isEditingReply),
+                function () {
+                    return editReply({
+                        content: plainTextValue,
+                        namedUsers: mentions,
+                        commentId: comment.commentId,
+                        replyId: reply.replyId
+                    });
+                }
+            ],
             [
                 ramda_1.T,
                 function () {
@@ -133,20 +145,26 @@ var SendMessageArea = function (_a) {
         }
     }, [popperRef, shouldShowButtons]);
     react_1.useEffect(function () {
-        if (isEditingComment) {
-            setValue(comment.content);
+        if (isEditingComment || isEditingReply) {
+            if (isEditingComment) {
+                setValue(comment.content);
+            }
+            else {
+                setValue(reply.content);
+            }
         }
         else {
             clearValue();
         }
-    }, [isEditingComment]);
+    }, [isEditingComment, isEditingReply]);
+    var buttonSize = isEditing ? 'small' : 'medium';
     return (react_1.default.createElement(Box_1.default, { className: classnames_1.default(styles.root, className) },
         react_1.default.createElement("form", { onSubmit: handleSubmit, className: styles.form },
             react_1.default.createElement(Box_1.default, { className: styles.main },
-                react_1.default.createElement(Avatar_1.Avatar, { classes: { root: styles.avatar } }, username),
+                !isEditing && react_1.default.createElement(Avatar_1.Avatar, { classes: { root: styles.avatar } }, username),
                 react_1.default.createElement(TextFieldWithMentions_1.TextFieldWithMentions, { className: styles.textField, disabled: sending, onChange: handleChange, inputRef: inputRef, value: value, onFocus: handleFocus, onBlur: handleBlur, placeholder: getPlaceholder(status) })),
             shouldShowButtons && (react_1.default.createElement(Box_1.default, { className: styles.buttons },
-                react_1.default.createElement(Button_1.default, { className: styles.button, variant: "contained", color: "primary", disabled: !hasValue || sending, type: "submit" }, getButtonText(status, isEditingComment)),
-                react_1.default.createElement(Button_1.default, { disabled: sending, onClick: handleCancel, className: styles.button, variant: "outlined", color: "primary" }, ui_i18n_1.default.text('Cancel')))))));
+                react_1.default.createElement(Button_1.default, { className: styles.button, variant: "contained", color: "primary", disabled: !hasValue || sending, type: "submit", size: buttonSize }, getButtonText(status, isEditingComment, isEditingReply)),
+                react_1.default.createElement(Button_1.default, { disabled: sending, onClick: handleCancel, className: styles.button, variant: "outlined", color: "primary", size: buttonSize }, ui_i18n_1.default.text('Cancel')))))));
 };
 exports.SendMessageArea = SendMessageArea;

package/cjs/components/CollaborationItem/SendMessageArea/styles.d.ts

@@ -1 +1,5 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "form" | "main" | "root" | "avatar" | "buttons" | "textField">;
+declare type StylesProps = {
+    isEditing?: boolean;
+};
+export declare const useStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "form" | "main" | "root" | "avatar" | "textField" | "buttons">;
+export {};

package/cjs/components/CollaborationItem/SendMessageArea/styles.js

@@ -3,13 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = styles_1.makeStyles({
-    root: {
-        padding: '6px 6px 6px 8px',
-        borderRadius: '4px',
-        backgroundColor: 'rgba(0,114,206,0.06)'
+    root: function (_a) {
+        var isEditing = _a.isEditing;
+        return ({
+            padding: isEditing ? '6px 6px 6px 0' : ' 6px 6px 6px 8px',
+            borderRadius: '4px',
+            backgroundColor: isEditing ? 'transparent' : 'rgba(0,114,206,0.06)'
+        });
     },
-    textField: {
-        maxWidth: 'calc(100% - 40px)'
+    textField: function (_a) {
+        var isEditing = _a.isEditing;
+        return ({
+            maxWidth: isEditing ? '100%' : 'calc(100% - 40px)'
+        });
     },
     form: {
         marginBottom: 0
@@ -21,9 +27,9 @@ exports.useStyles = styles_1.makeStyles({
     avatar: {
         marginRight: '8px'
     },
-    buttons: {
-        marginLeft: '40px',
-        marginTop: '8px'
+    buttons: function (_a) {
+        var isEditing = _a.isEditing;
+        return ({ marginLeft: isEditing ? '0' : '40px', marginTop: '8px' });
     },
     button: {
         '& + $button': {

package/cjs/components/CollaborationItem/TextFieldWithMentions/styles.js

@@ -12,15 +12,13 @@ exports.useStyles = styles_1.makeStyles(function (theme) { return ({
         },
         '&__highlighter': {
             padding: '10px 22px',
-            border: '1px solid transparent !important',
-            maxHeight: '70px'
+            border: '1px solid transparent !important'
         },
         '&__input': {
             borderRadius: '2px',
             border: '1px solid rgba(0,0,0,0.12)',
             padding: '10px 22px',
             outline: 0,
-            maxHeight: '70px',
             overflow: 'auto !important'
         },
         '&__suggestions': {

package/cjs/components/attributes/inline/SimpleAttribute/styles.js

@@ -16,7 +16,7 @@ var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = styles_1.makeStyles(function () { return ({
     root: function (_a) {
         var fullyColored = _a.fullyColored, opaque = _a.opaque, color = _a.color, variant = _a.variant;
-        return (__assign(__assign(__assign({ height: '28px' }, (variant === 'filled' && {
+        return (__assign(__assign(__assign({ minHeight: '28px', wordBreak: 'break-word' }, (variant === 'filled' && {
             borderRadius: '4px',
             background: fullyColored ? color : "linear-gradient(to right, " + color + " 8px, rgba(0,0,0,0.05) 8px)"
         })), (variant === 'outlined' && {
@@ -39,14 +39,13 @@ exports.useStyles = styles_1.makeStyles(function () { return ({
                 height: '100%',
                 pointerEvents: 'none'
             }
-        })), { display: 'flex', alignItems: 'center', maxWidth: '230px', opacity: opaque ? 1 : 0.38, transition: 'opacity 0.3s', position: 'relative' }));
+        })), { display: 'flex', alignItems: 'center', opacity: opaque ? 1 : 0.38, transition: 'opacity 0.3s', position: 'relative' }));
     },
     attributeValue: {
         marginLeft: '16px',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        flex: 1
+        padding: '6px 0',
+        lineHeight: '14px',
+        width: 'calc(100% - 71px)'
     },
     actions: {
         display: 'flex',

package/cjs/contexts/CollaborationContext/index.d.ts

@@ -14,9 +14,17 @@ export declare const CollaborationContext: React.Context<{
     editComment: (params: Pick<Comment, 'content' | 'namedUsers' | 'objectType' | 'relatedObjectUris' | 'commentId' | 'replies'> & {
         uri: string;
     }) => Promise<void>;
+    editReply: (params: Pick<Reply, 'content' | 'namedUsers' | 'replyId'> & {
+        commentId: string;
+    }) => Promise<void>;
     deleteComment: (params: Pick<Comment, 'commentId'> & {
         uri: string;
     }) => void;
+    deleteReply: (params: {
+        uri: string;
+        commentId: string;
+        reply: Pick<Reply, 'action' | 'replyId'>;
+    }) => void;
     createReply: (params: Pick<Reply, 'content' | 'namedUsers' | 'action'> & {
         uri: string;
         commentId: string;

package/cjs/contexts/CollaborationContext/index.js

@@ -22,6 +22,8 @@ exports.CollaborationContext = react_1.default.createContext({
     deleteComment: noop,
     sending: false,
     loading: false,
-    pageToken: null
+    pageToken: null,
+    deleteReply: noop,
+    editReply: function () { return new Promise(noop); }
 });
 exports.CollaborationContext.displayName = 'CollaborationContext';

package/cjs/hooks/useCollaboration.d.ts

@@ -22,5 +22,7 @@ export declare const useCollaboration: ({ objectIds, objectTypes, enabled }: Pro
     reOpenThread: ({ commentId, uri }: any) => void;
     resolveThread: ({ commentId, uri }: any) => void;
     sending: boolean;
+    deleteReply: ({ uri, commentId, reply }: any) => void;
+    editReply: ({ content, namedUsers, commentId, replyId }: any) => Promise<void>;
 };
 export {};

package/cjs/hooks/useCollaboration.js

@@ -25,6 +25,16 @@ var react_redux_1 = require("react-redux");
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var filterReplies = function (replyId, replies) { return replies.filter(function (reply) { return reply.replyId !== replyId; }); };
+var getUpdatedReplies = function (comment, reply) {
+    var changedReplyIndex = comment.replies.findIndex(function (_a) {
+        var replyId = _a.replyId;
+        return replyId === reply.replyId;
+    });
+    var newReplies = __spreadArray([], comment.replies);
+    newReplies[changedReplyIndex] = reply;
+    return newReplies;
+};
 var defaultObjectIds = [];
 var catchErrorInRequest = function (e) { return console.error('Collaboration error', e); };
 var useCollaboration = function (_a) {
@@ -150,8 +160,9 @@ var useCollaboration = function (_a) {
             .catch(catchErrorInRequest)
             .finally(function () { return setSending(false); });
     }, [collaborationPath, tenant]);
-    var updateReplyInState = react_1.useCallback(function (reply, uri, commentId) {
+    var updateReplyInState = react_1.useCallback(function (reply, uri, commentId, isDeleteReply) {
         var newStatus = reply.action === 'resolve' ? 'resolved' : 'open';
+        var replyId = reply.replyId;
         if (newStatus === 'resolved') {
             setCurrentComment(function (prevCurrentComment) {
                 if (prevCurrentComment) {
@@ -162,7 +173,9 @@ var useCollaboration = function (_a) {
         else {
             setCurrentComment(function (prevCurrentComment) {
                 if (prevCurrentComment) {
-                    return __assign(__assign({}, prevCurrentComment), { replies: __spreadArray(__spreadArray([], prevCurrentComment.replies), [reply]) });
+                    return __assign(__assign({}, prevCurrentComment), { replies: isDeleteReply
+                            ? filterReplies(replyId, prevCurrentComment.replies)
+                            : __spreadArray(__spreadArray([], prevCurrentComment.replies), [reply]) });
                 }
             });
         }
@@ -170,7 +183,7 @@ var useCollaboration = function (_a) {
             var _a;
             return (__assign(__assign({}, prevCommentsMap), (_a = {}, _a[uri] = (prevCommentsMap[uri] || []).map(function (comment) {
                 if (comment.commentId === commentId) {
-                    return __assign(__assign({}, comment), { status: newStatus, replies: comment.replies + 1 });
+                    return __assign(__assign({}, comment), { status: newStatus, replies: isDeleteReply ? comment.replies - 1 : comment.replies + 1 });
                 }
                 return comment;
             }), _a)));
@@ -178,12 +191,49 @@ var useCollaboration = function (_a) {
         setComments(function (prevComments) {
             return prevComments.map(function (comment) {
                 if (comment.commentId === commentId) {
-                    return __assign(__assign({}, comment), { status: newStatus, replies: __spreadArray(__spreadArray([], comment.replies), [reply]) });
+                    return __assign(__assign({}, comment), { status: newStatus, replies: isDeleteReply
+                            ? filterReplies(reply.replyId, comment.replies)
+                            : __spreadArray(__spreadArray([], comment.replies), [reply]) });
+                }
+                return comment;
+            });
+        });
+    }, []);
+    var deleteReply = react_1.useCallback(function (_a) {
+        var uri = _a.uri, commentId = _a.commentId, reply = _a.reply;
+        setSending(true);
+        mdm_sdk_1.deleteReply({ collaborationPath: collaborationPath, tenant: tenant, commentId: commentId, replyId: reply.replyId })
+            .then(function () { return updateReplyInState(reply, uri, commentId, true); })
+            .catch(catchErrorInRequest)
+            .finally(function () { return setSending(false); });
+    }, [collaborationPath, updateReplyInState, tenant]);
+    var editReplyInState = react_1.useCallback(function (reply, commentId) {
+        setCurrentComment(function (prevCurrentComment) {
+            if (prevCurrentComment) {
+                return __assign(__assign({}, prevCurrentComment), { replies: getUpdatedReplies(prevCurrentComment, reply) });
+            }
+        });
+        setComments(function (prevComments) {
+            return prevComments.map(function (comment) {
+                if (comment.commentId === commentId) {
+                    return __assign(__assign({}, comment), { replies: getUpdatedReplies(comment, reply) });
                 }
                 return comment;
             });
         });
     }, []);
+    var editReply = react_1.useCallback(function (_a) {
+        var content = _a.content, namedUsers = _a.namedUsers, commentId = _a.commentId, replyId = _a.replyId;
+        setSending(true);
+        var data = {
+            content: content,
+            namedUsers: namedUsers
+        };
+        return mdm_sdk_1.updateReply({ collaborationPath: collaborationPath, tenant: tenant, commentId: commentId, replyId: replyId, data: data })
+            .then(function (reply) { return editReplyInState(reply, commentId); })
+            .catch(catchErrorInRequest)
+            .finally(function () { return setSending(false); });
+    }, [collaborationPath, tenant, editReplyInState]);
     var createReply = react_1.useCallback(function (_a) {
         var content = _a.content, namedUsers = _a.namedUsers, commentId = _a.commentId, action = _a.action, uri = _a.uri;
         setSending(true);
@@ -228,7 +278,9 @@ var useCollaboration = function (_a) {
         pageToken: pageToken,
         reOpenThread: reOpenThread,
         resolveThread: resolveThread,
-        sending: sending
+        sending: sending,
+        deleteReply: deleteReply,
+        editReply: editReply
     };
 };
 exports.useCollaboration = useCollaboration;

package/esm/components/CollaborationItem/CollaborationItem.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, memo } from 'react';
+import React, { useRef, memo } from 'react';
 import Box from '@material-ui/core/Box';
 import { Comment } from './Comment/Comment';
 import { RepliedComment } from './RepliedComment/RepliedComment';
@@ -8,22 +8,15 @@ export var CollaborationItem = memo(function (_a) {
     var uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, classes = _a.classes, popperRef = _a.popperRef, messagesRef = _a.messagesRef, comment = _a.comment;
     var inputRef = useRef();
     var styles = useStyles({ classes: classes });
-    var _b = useState(false), isEditingComment = _b[0], setIsEditingComment = _b[1];
     var handleReply = function () {
-        if (isEditingComment) {
-            setIsEditingComment(false);
-        }
         inputRef.current.focus();
     };
-    var handleSetEdit = function () {
-        setIsEditingComment(true);
-    };
-    var sendMessageArea = (React.createElement(SendMessageArea, { className: styles.sendMessageArea, inputRef: inputRef, popperRef: popperRef, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, comment: comment, onCancel: function () { return setIsEditingComment(false); }, isEditingComment: isEditingComment }));
+    var sendMessageArea = (React.createElement(SendMessageArea, { className: styles.sendMessageArea, inputRef: inputRef, popperRef: popperRef, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, comment: comment }));
     return (React.createElement(Box, { className: styles.root },
         comment && (React.createElement(React.Fragment, null,
             React.createElement("div", { className: styles.messages, ref: messagesRef },
-                React.createElement(Comment, { comment: comment, uri: uri, onReply: handleReply, onStartEditing: handleSetEdit, className: styles.comment }),
-                React.createElement(Box, { className: styles.replies }, comment.replies.map(function (reply) { return (React.createElement(RepliedComment, { key: reply.replyId, className: styles.repliedComment, reply: reply })); }))),
+                React.createElement(Comment, { comment: comment, uri: uri, onReply: handleReply, className: styles.comment, relatedObjectUris: relatedObjectUris, objectType: objectType }),
+                React.createElement(Box, { className: styles.replies }, comment.replies.map(function (reply) { return (React.createElement(RepliedComment, { key: reply.replyId, className: styles.repliedComment, reply: reply, uri: uri, comment: comment })); }))),
             sendMessageArea)),
         !comment && sendMessageArea));
 });

package/esm/components/CollaborationItem/Comment/Comment.d.ts

@@ -5,7 +5,8 @@ declare type Props = {
     onReply: () => void;
     className?: string;
     comment: CommentType;
-    onStartEditing: () => void;
+    relatedObjectUris: CommentType['relatedObjectUris'];
+    objectType: CommentType['objectType'];
 };
-export declare const Comment: ({ onReply, className, uri, comment, onStartEditing }: Props) => JSX.Element;
+export declare const Comment: ({ onReply, className, uri, comment, relatedObjectUris, objectType }: Props) => JSX.Element;
 export {};

package/esm/components/CollaborationItem/Comment/Comment.js

@@ -1,9 +1,11 @@
-import React, { useMemo, useContext } from 'react';
+import React, { useMemo, useContext, useState, useRef, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
 import Link from '@material-ui/core/Link';
 import Box from '@material-ui/core/Box';
 import Typography from '@material-ui/core/Typography';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
+import mdm from '@reltio/mdm-module';
 import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
 import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
 import { CommentTarget } from '../CommentTarget/CommentTarget';
@@ -11,44 +13,52 @@ import { CommentContent } from '../CommentContent/CommentContent';
 import { Avatar } from '../Avatar/Avatar';
 import { CollaborationContext } from '../../../contexts';
 import { formatDate } from '../utils';
+import { SendMessageArea } from '../SendMessageArea/SendMessageArea';
 import { useStyles } from './styles';
-import { useSelector } from 'react-redux';
-import mdm from '@reltio/mdm-module';
 export var Comment = function (_a) {
-    var onReply = _a.onReply, className = _a.className, uri = _a.uri, comment = _a.comment, onStartEditing = _a.onStartEditing;
+    var onReply = _a.onReply, className = _a.className, uri = _a.uri, comment = _a.comment, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType;
     var styles = useStyles();
+    var inputRef = useRef();
+    var _b = useState(false), isEditingComment = _b[0], setIsEditingComment = _b[1];
     var username = useSelector(mdm.selectors.getUserName);
-    var canChangeComment = comment.createdBy === username;
-    var _b = useContext(CollaborationContext), resolveThread = _b.resolveThread, reOpenThread = _b.reOpenThread, sending = _b.sending, deleteComment = _b.deleteComment;
+    var commentId = comment.commentId, createdBy = comment.createdBy, createdTime = comment.createdTime;
+    var canChangeComment = createdBy === username;
+    var _c = useContext(CollaborationContext), resolveThread = _c.resolveThread, reOpenThread = _c.reOpenThread, sending = _c.sending, deleteComment = _c.deleteComment;
+    useEffect(function () {
+        if (isEditingComment) {
+            inputRef.current.focus();
+        }
+    }, [isEditingComment]);
     var menuItems = useMemo(function () { return [
         {
             text: i18n.text('Edit'),
-            onClick: onStartEditing
+            onClick: function () { return setIsEditingComment(true); }
         },
         {
             text: i18n.text('Delete'),
-            onClick: function () { return deleteComment({ uri: uri, commentId: comment.commentId }); }
+            onClick: function () { return deleteComment({ uri: uri, commentId: commentId }); }
         }
-    ]; }, [onStartEditing, deleteComment, uri, comment]);
+    ]; }, [deleteComment, uri, commentId]);
     var handleResolve = function () {
-        resolveThread({ commentId: comment.commentId, uri: uri });
+        resolveThread({ commentId: commentId, uri: uri });
     };
     var handleReOpen = function () {
-        reOpenThread({ commentId: comment.commentId, uri: uri });
+        reOpenThread({ commentId: commentId, uri: uri });
     };
+    var sendMessageArea = (React.createElement(SendMessageArea, { inputRef: inputRef, uri: uri, relatedObjectUris: relatedObjectUris, objectType: objectType, onCancel: function () { return setIsEditingComment(false); }, isEditingComment: isEditingComment, comment: comment }));
     return (React.createElement(Box, { className: className },
         React.createElement(Box, { className: styles.header },
-            React.createElement(Avatar, { classes: { root: styles.avatar } }, comment.createdBy),
+            React.createElement(Avatar, { classes: { root: styles.avatar } }, createdBy),
             React.createElement(Box, { width: "100%" },
-                React.createElement(Typography, { className: styles.username }, comment.createdBy)),
-            React.createElement(Typography, { className: styles.createdAt }, formatDate(comment.createdTime)),
+                React.createElement(Typography, { className: styles.username }, createdBy)),
+            React.createElement(Typography, { className: styles.createdAt }, formatDate(createdTime)),
             canChangeComment && (React.createElement(DropDownMenuButton, { buttonComponent: SmallIconButtonWithTooltip, buttonProps: {
                     icon: MoreVertIcon,
                     tooltipTitle: i18n.text('Open menu')
                 }, popoverProps: { PopoverClasses: { root: styles.dropdownMenu } }, menuItems: menuItems, menuId: "collaboration-comment-menu" }))),
         React.createElement(Box, { className: styles.body },
             React.createElement(CommentTarget, { comment: comment, className: styles.commentTarget }),
-            React.createElement(CommentContent, { comment: comment, className: styles.message }),
+            isEditingComment ? sendMessageArea : React.createElement(CommentContent, { comment: comment, className: styles.message }),
             React.createElement(Box, { className: styles.buttons },
                 React.createElement(Link, { className: styles.button, onClick: onReply, component: "button" }, i18n.text('Reply')),
                 comment.status === 'open' && (React.createElement(Link, { disabled: sending, className: styles.button, onClick: handleResolve, component: "button" }, i18n.text('Resolve'))),

package/esm/components/CollaborationItem/Comment/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"body" | "message" | "button" | "header" | "avatar" | "username" | "createdAt" | "commentTarget" | "dropdownMenu" | "buttons">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"body" | "message" | "button" | "header" | "avatar" | "username" | "buttons" | "createdAt" | "commentTarget" | "dropdownMenu">;

package/esm/components/CollaborationItem/RepliedComment/RepliedComment.d.ts

@@ -1,8 +1,11 @@
-/// <reference types="react" />
-import { Reply } from '@reltio/mdm-sdk';
+import React from 'react';
+import { Reply, Comment as CommentType } from '@reltio/mdm-sdk';
 declare type Props = {
     className?: string;
-    reply: Pick<Reply, 'createdTime' | 'content' | 'createdBy' | 'action' | 'namedUsers'>;
+    reply: Pick<Reply, 'createdTime' | 'content' | 'createdBy' | 'action' | 'namedUsers' | 'replyId'>;
+    comment?: CommentType;
+    uri: string;
+    popperRef?: React.RefObject<any>;
 };
-export declare const RepliedComment: ({ className, reply }: Props) => JSX.Element;
+export declare const RepliedComment: ({ className, reply, uri, comment, popperRef }: Props) => JSX.Element;
 export {};

package/esm/components/CollaborationItem/RepliedComment/RepliedComment.js

@@ -1,23 +1,56 @@
-import React from 'react';
+import React, { useRef, useContext, useMemo, useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
+import mdm from '@reltio/mdm-module';
 import Box from '@material-ui/core/Box';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
 import Typography from '@material-ui/core/Typography';
 import { Avatar } from '../Avatar/Avatar';
 import { CommentContent } from '../CommentContent/CommentContent';
 import { formatDate } from '../utils';
 import { useStyles } from './styles';
+import { CollaborationContext } from '../../../contexts';
+import DropDownMenuButton from '../../DropDownMenuButton/DropDownMenuButton';
+import { SmallIconButtonWithTooltip } from '../../SmallIconButton';
+import { SendMessageArea } from '../SendMessageArea/SendMessageArea';
 export var RepliedComment = function (_a) {
-    var className = _a.className, reply = _a.reply;
+    var className = _a.className, reply = _a.reply, uri = _a.uri, comment = _a.comment, popperRef = _a.popperRef;
+    var inputRef = useRef();
+    var _b = useState(false), isEditingReply = _b[0], setIsEditingReply = _b[1];
     var createdBy = reply.createdBy, action = reply.action, createdTime = reply.createdTime;
+    var username = useSelector(mdm.selectors.getUserName);
+    var canChangeReply = createdBy === username;
+    var deleteReply = useContext(CollaborationContext).deleteReply;
+    useEffect(function () {
+        if (isEditingReply) {
+            inputRef.current.focus();
+        }
+    }, [isEditingReply]);
     var styles = useStyles();
+    var menuItems = useMemo(function () { return [
+        {
+            text: i18n.text('Edit'),
+            onClick: function () { return setIsEditingReply(true); }
+        },
+        {
+            text: i18n.text('Delete'),
+            onClick: function () { return deleteReply({ uri: uri, commentId: comment.commentId, reply: reply }); }
+        }
+    ]; }, [deleteReply, uri, comment.commentId, reply]);
+    var sendMessageArea = (React.createElement(SendMessageArea, { inputRef: inputRef, popperRef: popperRef, uri: uri, onCancel: function () { return setIsEditingReply(false); }, isEditingReply: isEditingReply, reply: reply, comment: comment }));
     return (React.createElement(Box, { className: classnames(styles.root, className) },
         React.createElement(Avatar, { classes: { root: styles.avatar } }, createdBy),
-        React.createElement(Box, null,
+        React.createElement(Box, { flexGrow: 1 },
             React.createElement(Box, { className: styles.header },
                 React.createElement(Typography, { className: styles.username }, createdBy),
                 action === 'resolve' && (React.createElement(Typography, { className: styles.marked }, i18n.text('Marked as resolved'))),
                 action === 'reopen' && React.createElement(Typography, { className: styles.marked }, i18n.text('Re-opened'))),
-            action !== 'resolve' && React.createElement(CommentContent, { className: styles.message, comment: reply }),
-            React.createElement(Typography, { className: styles.createdAt }, formatDate(createdTime)))));
+            action !== 'resolve' &&
+                (isEditingReply ? sendMessageArea : React.createElement(CommentContent, { className: styles.message, comment: reply })),
+            React.createElement(Typography, { className: styles.createdAt }, formatDate(createdTime))),
+        canChangeReply && (React.createElement(DropDownMenuButton, { buttonComponent: SmallIconButtonWithTooltip, buttonProps: {
+                icon: MoreVertIcon,
+                tooltipTitle: i18n.text('Open menu')
+            }, menuItems: menuItems, menuId: "collaboration-comment-menu" }))));
 };

package/esm/components/CollaborationItem/SendMessageArea/SendMessageArea.d.ts

@@ -1,15 +1,17 @@
 import React from 'react';
-import { Comment } from '@reltio/mdm-sdk';
+import { Comment, Reply } from '@reltio/mdm-sdk';
 declare type Props = {
     inputRef: React.RefObject<HTMLInputElement>;
     className?: string;
     uri: string;
-    objectType: Comment['objectType'];
-    relatedObjectUris: Comment['relatedObjectUris'];
+    objectType?: Comment['objectType'];
+    relatedObjectUris?: Comment['relatedObjectUris'];
     popperRef?: React.RefObject<any>;
     comment?: Comment;
+    reply?: Pick<Reply, 'content' | 'replyId'>;
     isEditingComment?: boolean;
+    isEditingReply?: boolean;
     onCancel?: () => void;
 };
-export declare const SendMessageArea: ({ inputRef, className, uri, relatedObjectUris, objectType, popperRef, comment, isEditingComment, onCancel }: Props) => JSX.Element;
+export declare const SendMessageArea: ({ inputRef, className, uri, relatedObjectUris, objectType, popperRef, comment, reply, isEditingComment, isEditingReply, onCancel }: Props) => JSX.Element;
 export {};

package/esm/components/CollaborationItem/SendMessageArea/SendMessageArea.js

@@ -2,6 +2,7 @@ import React, { useState, useContext, useEffect } from 'react';
 import i18n from 'ui-i18n';
 import classnames from 'classnames';
 import { useSelector } from 'react-redux';
+import { always, cond, T } from 'ramda';
 import mdm from '@reltio/mdm-module';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
@@ -9,7 +10,6 @@ import { TextFieldWithMentions } from '../TextFieldWithMentions/TextFieldWithMen
 import { Avatar } from '../Avatar/Avatar';
 import { CollaborationContext } from '../../../contexts';
 import { useStyles } from './styles';
-import { always, cond, T } from 'ramda';
 import { useSafePromise } from '../../../hooks';
 var getPlaceholder = function (status) {
     switch (status) {
@@ -21,8 +21,8 @@ var getPlaceholder = function (status) {
             return '';
     }
 };
-var getButtonText = function (status, isEditingComment) {
-    if (isEditingComment) {
+var getButtonText = function (status, isEditingComment, isEditingReply) {
+    if (isEditingComment || isEditingReply) {
         return i18n.text('Edit');
     }
     if (status === 'open' || status === 'resolved') {
@@ -31,10 +31,11 @@ var getButtonText = function (status, isEditingComment) {
     return i18n.text('Comment');
 };
 export var SendMessageArea = function (_a) {
-    var inputRef = _a.inputRef, className = _a.className, uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, popperRef = _a.popperRef, comment = _a.comment, isEditingComment = _a.isEditingComment, onCancel = _a.onCancel;
-    var styles = useStyles();
+    var inputRef = _a.inputRef, className = _a.className, uri = _a.uri, relatedObjectUris = _a.relatedObjectUris, objectType = _a.objectType, popperRef = _a.popperRef, comment = _a.comment, reply = _a.reply, isEditingComment = _a.isEditingComment, isEditingReply = _a.isEditingReply, onCancel = _a.onCancel;
+    var isEditing = isEditingComment || isEditingReply;
+    var styles = useStyles({ isEditing: isEditing });
     var username = useSelector(mdm.selectors.getUserName);
-    var _b = useContext(CollaborationContext), createReply = _b.createReply, createComment = _b.createComment, sending = _b.sending, editComment = _b.editComment;
+    var _b = useContext(CollaborationContext), createReply = _b.createReply, createComment = _b.createComment, sending = _b.sending, editComment = _b.editComment, editReply = _b.editReply;
     var _c = useState(''), value = _c[0], setValue = _c[1];
     var _d = useState(''), plainTextValue = _d[0], setPlainTextValue = _d[1];
     var _e = useState([]), mentions = _e[0], setMentions = _e[1];
@@ -87,6 +88,17 @@ export var SendMessageArea = function (_a) {
                     });
                 }
             ],
+            [
+                always(isEditingReply),
+                function () {
+                    return editReply({
+                        content: plainTextValue,
+                        namedUsers: mentions,
+                        commentId: comment.commentId,
+                        replyId: reply.replyId
+                    });
+                }
+            ],
             [
                 T,
                 function () {
@@ -108,19 +120,25 @@ export var SendMessageArea = function (_a) {
         }
     }, [popperRef, shouldShowButtons]);
     useEffect(function () {
-        if (isEditingComment) {
-            setValue(comment.content);
+        if (isEditingComment || isEditingReply) {
+            if (isEditingComment) {
+                setValue(comment.content);
+            }
+            else {
+                setValue(reply.content);
+            }
         }
         else {
             clearValue();
         }
-    }, [isEditingComment]);
+    }, [isEditingComment, isEditingReply]);
+    var buttonSize = isEditing ? 'small' : 'medium';
     return (React.createElement(Box, { className: classnames(styles.root, className) },
         React.createElement("form", { onSubmit: handleSubmit, className: styles.form },
             React.createElement(Box, { className: styles.main },
-                React.createElement(Avatar, { classes: { root: styles.avatar } }, username),
+                !isEditing && React.createElement(Avatar, { classes: { root: styles.avatar } }, username),
                 React.createElement(TextFieldWithMentions, { className: styles.textField, disabled: sending, onChange: handleChange, inputRef: inputRef, value: value, onFocus: handleFocus, onBlur: handleBlur, placeholder: getPlaceholder(status) })),
             shouldShowButtons && (React.createElement(Box, { className: styles.buttons },
-                React.createElement(Button, { className: styles.button, variant: "contained", color: "primary", disabled: !hasValue || sending, type: "submit" }, getButtonText(status, isEditingComment)),
-                React.createElement(Button, { disabled: sending, onClick: handleCancel, className: styles.button, variant: "outlined", color: "primary" }, i18n.text('Cancel')))))));
+                React.createElement(Button, { className: styles.button, variant: "contained", color: "primary", disabled: !hasValue || sending, type: "submit", size: buttonSize }, getButtonText(status, isEditingComment, isEditingReply)),
+                React.createElement(Button, { disabled: sending, onClick: handleCancel, className: styles.button, variant: "outlined", color: "primary", size: buttonSize }, i18n.text('Cancel')))))));
 };

package/esm/components/CollaborationItem/SendMessageArea/styles.d.ts

@@ -1 +1,5 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "form" | "main" | "root" | "avatar" | "buttons" | "textField">;
+declare type StylesProps = {
+    isEditing?: boolean;
+};
+export declare const useStyles: (props: StylesProps) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "form" | "main" | "root" | "avatar" | "textField" | "buttons">;
+export {};

package/esm/components/CollaborationItem/SendMessageArea/styles.js

@@ -1,12 +1,18 @@
 import { makeStyles } from '@material-ui/core/styles';
 export var useStyles = makeStyles({
-    root: {
-        padding: '6px 6px 6px 8px',
-        borderRadius: '4px',
-        backgroundColor: 'rgba(0,114,206,0.06)'
+    root: function (_a) {
+        var isEditing = _a.isEditing;
+        return ({
+            padding: isEditing ? '6px 6px 6px 0' : ' 6px 6px 6px 8px',
+            borderRadius: '4px',
+            backgroundColor: isEditing ? 'transparent' : 'rgba(0,114,206,0.06)'
+        });
     },
-    textField: {
-        maxWidth: 'calc(100% - 40px)'
+    textField: function (_a) {
+        var isEditing = _a.isEditing;
+        return ({
+            maxWidth: isEditing ? '100%' : 'calc(100% - 40px)'
+        });
     },
     form: {
         marginBottom: 0
@@ -18,9 +24,9 @@ export var useStyles = makeStyles({
     avatar: {
         marginRight: '8px'
     },
-    buttons: {
-        marginLeft: '40px',
-        marginTop: '8px'
+    buttons: function (_a) {
+        var isEditing = _a.isEditing;
+        return ({ marginLeft: isEditing ? '0' : '40px', marginTop: '8px' });
     },
     button: {
         '& + $button': {

package/esm/components/CollaborationItem/TextFieldWithMentions/styles.js

@@ -9,15 +9,13 @@ export var useStyles = makeStyles(function (theme) { return ({
         },
         '&__highlighter': {
             padding: '10px 22px',
-            border: '1px solid transparent !important',
-            maxHeight: '70px'
+            border: '1px solid transparent !important'
         },
         '&__input': {
             borderRadius: '2px',
             border: '1px solid rgba(0,0,0,0.12)',
             padding: '10px 22px',
             outline: 0,
-            maxHeight: '70px',
             overflow: 'auto !important'
         },
         '&__suggestions': {

package/esm/components/attributes/inline/SimpleAttribute/styles.js

@@ -13,7 +13,7 @@ import { makeStyles } from '@material-ui/core/styles';
 export var useStyles = makeStyles(function () { return ({
     root: function (_a) {
         var fullyColored = _a.fullyColored, opaque = _a.opaque, color = _a.color, variant = _a.variant;
-        return (__assign(__assign(__assign({ height: '28px' }, (variant === 'filled' && {
+        return (__assign(__assign(__assign({ minHeight: '28px', wordBreak: 'break-word' }, (variant === 'filled' && {
             borderRadius: '4px',
             background: fullyColored ? color : "linear-gradient(to right, " + color + " 8px, rgba(0,0,0,0.05) 8px)"
         })), (variant === 'outlined' && {
@@ -36,14 +36,13 @@ export var useStyles = makeStyles(function () { return ({
                 height: '100%',
                 pointerEvents: 'none'
             }
-        })), { display: 'flex', alignItems: 'center', maxWidth: '230px', opacity: opaque ? 1 : 0.38, transition: 'opacity 0.3s', position: 'relative' }));
+        })), { display: 'flex', alignItems: 'center', opacity: opaque ? 1 : 0.38, transition: 'opacity 0.3s', position: 'relative' }));
     },
     attributeValue: {
         marginLeft: '16px',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        flex: 1
+        padding: '6px 0',
+        lineHeight: '14px',
+        width: 'calc(100% - 71px)'
     },
     actions: {
         display: 'flex',

package/esm/contexts/CollaborationContext/index.d.ts

@@ -14,9 +14,17 @@ export declare const CollaborationContext: React.Context<{
     editComment: (params: Pick<Comment, 'content' | 'namedUsers' | 'objectType' | 'relatedObjectUris' | 'commentId' | 'replies'> & {
         uri: string;
     }) => Promise<void>;
+    editReply: (params: Pick<Reply, 'content' | 'namedUsers' | 'replyId'> & {
+        commentId: string;
+    }) => Promise<void>;
     deleteComment: (params: Pick<Comment, 'commentId'> & {
         uri: string;
     }) => void;
+    deleteReply: (params: {
+        uri: string;
+        commentId: string;
+        reply: Pick<Reply, 'action' | 'replyId'>;
+    }) => void;
     createReply: (params: Pick<Reply, 'content' | 'namedUsers' | 'action'> & {
         uri: string;
         commentId: string;

package/esm/contexts/CollaborationContext/index.js

@@ -16,6 +16,8 @@ export var CollaborationContext = React.createContext({
     deleteComment: noop,
     sending: false,
     loading: false,
-    pageToken: null
+    pageToken: null,
+    deleteReply: noop,
+    editReply: function () { return new Promise(noop); }
 });
 CollaborationContext.displayName = 'CollaborationContext';

package/esm/hooks/useCollaboration.d.ts

@@ -22,5 +22,7 @@ export declare const useCollaboration: ({ objectIds, objectTypes, enabled }: Pro
     reOpenThread: ({ commentId, uri }: any) => void;
     resolveThread: ({ commentId, uri }: any) => void;
     sending: boolean;
+    deleteReply: ({ uri, commentId, reply }: any) => void;
+    editReply: ({ content, namedUsers, commentId, replyId }: any) => Promise<void>;
 };
 export {};

package/esm/hooks/useCollaboration.js

@@ -17,8 +17,18 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
 import { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { andThen, fromPairs, map, otherwise, pipe, props, uniqBy, prop, propEq, when, always } from 'ramda';
-import { createComment as createCommentRequest, createReply as createReplyRequest, getComment as getCommentRequest, getCommentsCount as getCommentsCountRequest, updateComment as updateCommentRequest, deleteComment as deleteCommentRequest, getComments as getCommentsRequest, isTempUri } from '@reltio/mdm-sdk';
+import { createComment as createCommentRequest, createReply as createReplyRequest, getComment as getCommentRequest, getCommentsCount as getCommentsCountRequest, updateComment as updateCommentRequest, updateReply as updateReplyRequest, deleteComment as deleteCommentRequest, deleteReply as deleteReplyRequest, getComments as getCommentsRequest, isTempUri } from '@reltio/mdm-sdk';
 import mdm from '@reltio/mdm-module';
+var filterReplies = function (replyId, replies) { return replies.filter(function (reply) { return reply.replyId !== replyId; }); };
+var getUpdatedReplies = function (comment, reply) {
+    var changedReplyIndex = comment.replies.findIndex(function (_a) {
+        var replyId = _a.replyId;
+        return replyId === reply.replyId;
+    });
+    var newReplies = __spreadArray([], comment.replies);
+    newReplies[changedReplyIndex] = reply;
+    return newReplies;
+};
 var defaultObjectIds = [];
 var catchErrorInRequest = function (e) { return console.error('Collaboration error', e); };
 export var useCollaboration = function (_a) {
@@ -144,8 +154,9 @@ export var useCollaboration = function (_a) {
             .catch(catchErrorInRequest)
             .finally(function () { return setSending(false); });
     }, [collaborationPath, tenant]);
-    var updateReplyInState = useCallback(function (reply, uri, commentId) {
+    var updateReplyInState = useCallback(function (reply, uri, commentId, isDeleteReply) {
         var newStatus = reply.action === 'resolve' ? 'resolved' : 'open';
+        var replyId = reply.replyId;
         if (newStatus === 'resolved') {
             setCurrentComment(function (prevCurrentComment) {
                 if (prevCurrentComment) {
@@ -156,7 +167,9 @@ export var useCollaboration = function (_a) {
         else {
             setCurrentComment(function (prevCurrentComment) {
                 if (prevCurrentComment) {
-                    return __assign(__assign({}, prevCurrentComment), { replies: __spreadArray(__spreadArray([], prevCurrentComment.replies), [reply]) });
+                    return __assign(__assign({}, prevCurrentComment), { replies: isDeleteReply
+                            ? filterReplies(replyId, prevCurrentComment.replies)
+                            : __spreadArray(__spreadArray([], prevCurrentComment.replies), [reply]) });
                 }
             });
         }
@@ -164,7 +177,7 @@ export var useCollaboration = function (_a) {
             var _a;
             return (__assign(__assign({}, prevCommentsMap), (_a = {}, _a[uri] = (prevCommentsMap[uri] || []).map(function (comment) {
                 if (comment.commentId === commentId) {
-                    return __assign(__assign({}, comment), { status: newStatus, replies: comment.replies + 1 });
+                    return __assign(__assign({}, comment), { status: newStatus, replies: isDeleteReply ? comment.replies - 1 : comment.replies + 1 });
                 }
                 return comment;
             }), _a)));
@@ -172,12 +185,49 @@ export var useCollaboration = function (_a) {
         setComments(function (prevComments) {
             return prevComments.map(function (comment) {
                 if (comment.commentId === commentId) {
-                    return __assign(__assign({}, comment), { status: newStatus, replies: __spreadArray(__spreadArray([], comment.replies), [reply]) });
+                    return __assign(__assign({}, comment), { status: newStatus, replies: isDeleteReply
+                            ? filterReplies(reply.replyId, comment.replies)
+                            : __spreadArray(__spreadArray([], comment.replies), [reply]) });
+                }
+                return comment;
+            });
+        });
+    }, []);
+    var deleteReply = useCallback(function (_a) {
+        var uri = _a.uri, commentId = _a.commentId, reply = _a.reply;
+        setSending(true);
+        deleteReplyRequest({ collaborationPath: collaborationPath, tenant: tenant, commentId: commentId, replyId: reply.replyId })
+            .then(function () { return updateReplyInState(reply, uri, commentId, true); })
+            .catch(catchErrorInRequest)
+            .finally(function () { return setSending(false); });
+    }, [collaborationPath, updateReplyInState, tenant]);
+    var editReplyInState = useCallback(function (reply, commentId) {
+        setCurrentComment(function (prevCurrentComment) {
+            if (prevCurrentComment) {
+                return __assign(__assign({}, prevCurrentComment), { replies: getUpdatedReplies(prevCurrentComment, reply) });
+            }
+        });
+        setComments(function (prevComments) {
+            return prevComments.map(function (comment) {
+                if (comment.commentId === commentId) {
+                    return __assign(__assign({}, comment), { replies: getUpdatedReplies(comment, reply) });
                 }
                 return comment;
             });
         });
     }, []);
+    var editReply = useCallback(function (_a) {
+        var content = _a.content, namedUsers = _a.namedUsers, commentId = _a.commentId, replyId = _a.replyId;
+        setSending(true);
+        var data = {
+            content: content,
+            namedUsers: namedUsers
+        };
+        return updateReplyRequest({ collaborationPath: collaborationPath, tenant: tenant, commentId: commentId, replyId: replyId, data: data })
+            .then(function (reply) { return editReplyInState(reply, commentId); })
+            .catch(catchErrorInRequest)
+            .finally(function () { return setSending(false); });
+    }, [collaborationPath, tenant, editReplyInState]);
     var createReply = useCallback(function (_a) {
         var content = _a.content, namedUsers = _a.namedUsers, commentId = _a.commentId, action = _a.action, uri = _a.uri;
         setSending(true);
@@ -222,6 +272,8 @@ export var useCollaboration = function (_a) {
         pageToken: pageToken,
         reOpenThread: reOpenThread,
         resolveThread: resolveThread,
-        sending: sending
+        sending: sending,
+        deleteReply: deleteReply,
+        editReply: editReply
     };
 };

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1163",
+  "version": "1.4.1167",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1163",
-    "@reltio/mdm-sdk": "^1.4.1163",
+    "@reltio/mdm-module": "^1.4.1167",
+    "@reltio/mdm-sdk": "^1.4.1167",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",