@reltio/components 1.4.701 → 1.4.705

package/components/CollaborationItem/Comment/Comment.js

@@ -0,0 +1,78 @@
+"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.Comment = void 0;
+var react_1 = __importStar(require("react"));
+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 DropDownMenuButton_1 = __importDefault(require("../../DropDownMenuButton/DropDownMenuButton"));
+var SmallIconButton_1 = require("../../SmallIconButton");
+var CommentTarget_1 = require("../CommentTarget/CommentTarget");
+var CommentContent_1 = require("../CommentContent/CommentContent");
+var Avatar_1 = require("../Avatar/Avatar");
+var contexts_1 = require("../../../contexts");
+var utils_1 = require("../utils");
+var styles_1 = require("./styles");
+var Comment = function (_a) {
+    var onReply = _a.onReply, className = _a.className, uri = _a.uri, comment = _a.comment;
+    var styles = styles_1.useStyles();
+    var _b = react_1.useContext(contexts_1.CollaborationContext), resolveThread = _b.resolveThread, reOpenThread = _b.reOpenThread, sending = _b.sending;
+    var menuItems = react_1.useMemo(function () { return [
+        {
+            text: ui_i18n_1.default.text('Edit'),
+            onClick: function () { }
+        },
+        {
+            text: ui_i18n_1.default.text('Delete'),
+            onClick: function () { }
+        }
+    ]; }, []);
+    var handleResolve = function () {
+        resolveThread({ commentId: comment.commentId, uri: uri });
+    };
+    var handleReOpen = function () {
+        reOpenThread({ commentId: comment.commentId, uri: uri });
+    };
+    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(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(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 }),
+            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'))),
+                comment.status === 'resolved' && (react_1.default.createElement(Link_1.default, { disabled: sending, className: styles.button, onClick: handleReOpen, component: "button" }, ui_i18n_1.default.text('Re-open')))))));
+};
+exports.Comment = Comment;

package/components/CollaborationItem/Comment/styles.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    header: {
+        display: 'flex'
+    },
+    avatar: {
+        marginRight: '8px'
+    },
+    username: {
+        marginBottom: '1px',
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        fontWeight: 500,
+        lineHeight: '15px'
+    },
+    createdAt: {
+        marginTop: '3px',
+        marginRight: '4px',
+        color: theme.palette.text.secondary,
+        fontSize: '11px',
+        lineHeight: '13px',
+        whiteSpace: 'nowrap'
+    },
+    body: {
+        marginLeft: '40px'
+    },
+    commentTarget: {
+        marginTop: '-15px'
+    },
+    message: {
+        marginTop: '12px'
+    },
+    dropdownMenu: {
+        zIndex: '3000 !important'
+    },
+    buttons: {
+        marginTop: '15px',
+        marginBottom: '12px',
+        display: 'flex',
+        '& $button + $button': {
+            marginLeft: '10px'
+        }
+    },
+    button: {
+        fontSize: '13px',
+        lineHeight: '15px'
+    }
+}); });

package/components/CollaborationItem/CommentContent/CommentContent.js

@@ -0,0 +1,42 @@
+"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.CommentContent = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Link_1 = __importDefault(require("@material-ui/core/Link"));
+var contexts_1 = require("../../../contexts");
+var utils_1 = require("../utils");
+var styles_1 = require("./styles");
+var CommentContent = function (_a) {
+    var comment = _a.comment, className = _a.className;
+    var styles = styles_1.useStyles();
+    var users = react_1.useContext(contexts_1.UsersContext);
+    return (react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.root, className) }, utils_1.processMentions(comment.content, comment.namedUsers, function (mention) {
+        var user = users.find(function (user) { return user.username === mention.slice(1); });
+        return user ? react_1.default.createElement(Link_1.default, { href: "mailto:" + user.email }, mention) : mention;
+    }).map(function (el, idx) { return (react_1.default.createElement(react_1.Fragment, { key: idx }, el)); })));
+};
+exports.CommentContent = CommentContent;

package/components/CollaborationItem/CommentContent/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    root: {
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        lineHeight: '15px',
+        wordBreak: 'break-word'
+    }
+}); });

package/components/CollaborationItem/CommentTarget/CommentTarget.js

@@ -0,0 +1,98 @@
+"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.CommentTarget = void 0;
+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 mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mdm_sdk_2 = require("@reltio/mdm-sdk");
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+var contexts_1 = require("../../../contexts");
+var EntityUriLink_1 = __importDefault(require("../../EntityUriLink/EntityUriLink"));
+var utils_1 = require("../utils");
+var styles_1 = require("./styles");
+var CommentTarget = function (_a) {
+    var comment = _a.comment, className = _a.className;
+    var styles = styles_1.useStyles();
+    var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity);
+    var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
+    var entitiesMap = react_1.useContext(contexts_1.EntitiesMapContext);
+    var getContent = function () {
+        var _a, _b;
+        switch (comment.objectType) {
+            case mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE: {
+                var attributeTypeUri = mdm_sdk_2.getAttributeTypeUriByValueUri(comment.objectId, entity.type);
+                var attributeType = mdm_sdk_2.findAttributeTypeByUri(metadata, attributeTypeUri);
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Selected attribute:')),
+                    react_1.default.createElement(Typography_1.default, { className: styles.label }, attributeType === null || attributeType === void 0 ? void 0 : attributeType.label)));
+            }
+            case mdm_sdk_1.CollaborationObjectTypes.ENTITY: {
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Selected profile:')),
+                    react_1.default.createElement(EntityUriLink_1.default, { className: classnames_1.default(styles.label, styles.link), value: mdm_sdk_2.getEntityUriForLink(entity) }, mdm_sdk_2.getLabel(entity.label))));
+            }
+            case mdm_sdk_1.CollaborationObjectTypes.RELATION: {
+                var relatedEntityUri = utils_1.getRelatedEntityUri(comment, entity.uri);
+                var relatedEntity = {
+                    uri: relatedEntityUri,
+                    label: (_a = entitiesMap[relatedEntityUri]) === null || _a === void 0 ? void 0 : _a.label
+                };
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Selected relation type:')),
+                    react_1.default.createElement(Typography_1.default, { className: styles.label },
+                        mdm_sdk_2.getRelationType(metadata, comment.relatedObjectUris[2]).label, " " + ui_i18n_1.default.text('from') + " ",
+                        react_1.default.createElement(EntityUriLink_1.default, { className: styles.link, value: mdm_sdk_2.getEntityUriForLink(entity) }, mdm_sdk_2.getLabel(entity.label)),
+                        relatedEntityUri && (react_1.default.createElement(react_1.default.Fragment, null, " " + ui_i18n_1.default.text('to') + " ",
+                            react_1.default.createElement(EntityUriLink_1.default, { className: styles.link, value: mdm_sdk_2.getEntityUriForLink(relatedEntity) }, relatedEntity.label
+                                ? mdm_sdk_2.getLabel(relatedEntity.label)
+                                : mdm_sdk_2.getEntityId(relatedEntity)))))));
+            }
+            case mdm_sdk_1.CollaborationObjectTypes.POTENTIAL_MATCH: {
+                var relatedEntityUri = utils_1.getRelatedEntityUri(comment, entity.uri);
+                var relatedEntity = {
+                    uri: relatedEntityUri,
+                    label: (_b = entitiesMap[relatedEntityUri]) === null || _b === void 0 ? void 0 : _b.label
+                };
+                return (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(Typography_1.default, { className: styles.title }, ui_i18n_1.default.text('Selected potential match:')),
+                    react_1.default.createElement(Typography_1.default, { className: styles.label },
+                        react_1.default.createElement(EntityUriLink_1.default, { className: styles.link, value: mdm_sdk_2.getEntityUriForLink(entity) }, mdm_sdk_2.getLabel(entity.label)),
+                        relatedEntityUri && (react_1.default.createElement(react_1.default.Fragment, null, " " + ui_i18n_1.default.text('and') + " ",
+                            react_1.default.createElement(EntityUriLink_1.default, { className: styles.link, value: mdm_sdk_2.getEntityUriForLink(relatedEntity) }, relatedEntity.label
+                                ? mdm_sdk_2.getLabel(relatedEntity.label)
+                                : mdm_sdk_2.getEntityId(relatedEntity)))))));
+            }
+            default: {
+                return null;
+            }
+        }
+    };
+    return react_1.default.createElement(Box_1.default, { className: className }, getContent());
+};
+exports.CommentTarget = CommentTarget;

package/components/CollaborationItem/CommentTarget/styles.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    title: {
+        marginBottom: '10px',
+        color: theme.palette.divider,
+        fontSize: '12px',
+        lineHeight: '14px'
+    },
+    label: {
+        paddingLeft: '9px',
+        borderLeft: '1px solid #D8D8D8',
+        fontSize: '13px',
+        color: theme.palette.text.primary,
+        lineHeight: '15px'
+    },
+    link: {
+        color: theme.palette.primary.main,
+        textDecoration: 'none'
+    }
+}); });

package/components/CollaborationItem/RepliedComment/RepliedComment.js

@@ -0,0 +1,30 @@
+"use strict";
+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 ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var Box_1 = __importDefault(require("@material-ui/core/Box"));
+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 RepliedComment = function (_a) {
+    var className = _a.className, reply = _a.reply;
+    var createdBy = reply.createdBy, action = reply.action, createdTime = reply.createdTime;
+    var styles = styles_1.useStyles();
+    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, { 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)))));
+};
+exports.RepliedComment = RepliedComment;

package/components/CollaborationItem/RepliedComment/styles.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    root: {
+        display: 'flex',
+        padding: '8px',
+        borderRadius: '4px',
+        backgroundColor: 'rgba(0,114,206,0.06)'
+    },
+    avatar: {
+        marginRight: '8px'
+    },
+    header: {
+        display: 'flex',
+        marginBottom: '8px'
+    },
+    username: {
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        fontWeight: 500,
+        lineHeight: '15px'
+    },
+    message: {
+        marginBottom: '8px',
+        color: theme.palette.text.primary,
+        fontSize: '13px',
+        lineHeight: '15px'
+    },
+    createdAt: {
+        color: theme.palette.text.secondary,
+        fontSize: '11px',
+        lineHeight: '13px',
+        whiteSpace: 'nowrap'
+    },
+    marked: {
+        marginLeft: '8px',
+        color: theme.palette.text.secondary,
+        fontSize: '13px',
+        fontStyle: 'italic',
+        lineHeight: '15px'
+    }
+}); });

package/components/CollaborationItem/SendMessageArea/SendMessageArea.js

@@ -0,0 +1,113 @@
+"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.SendMessageArea = void 0;
+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 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"));
+var TextFieldWithMentions_1 = require("../TextFieldWithMentions/TextFieldWithMentions");
+var Avatar_1 = require("../Avatar/Avatar");
+var contexts_1 = require("../../../contexts");
+var styles_1 = require("./styles");
+var getPlaceholder = function (status) {
+    switch (status) {
+        case 'open':
+            return ui_i18n_1.default.text('Reply...');
+        case 'resolved':
+            return ui_i18n_1.default.text('Adding a comment will re-open this');
+        default:
+            return '';
+    }
+};
+var getButtonText = function (status) {
+    if (status === 'open' || status === 'resolved') {
+        return ui_i18n_1.default.text('Reply');
+    }
+    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;
+    var styles = styles_1.useStyles();
+    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;
+    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];
+    var _f = react_1.useState(false), focused = _f[0], setFocused = _f[1];
+    var hasValue = value.trim() !== '';
+    var shouldShowButtons = focused || hasValue || sending;
+    var status = comment === null || comment === void 0 ? void 0 : comment.status;
+    var updateValue = function (value, plainTextValue, mentions) {
+        setMentions(mentions);
+        setValue(value);
+        setPlainTextValue(plainTextValue);
+    };
+    var clearValue = function () { return updateValue('', '', []); };
+    var handleChange = function (newValue, newPlainTextValue, mentions) {
+        updateValue(newValue, newPlainTextValue, mentions);
+    };
+    var handleCancel = function () { return clearValue(); };
+    var handleFocus = function () { return setFocused(true); };
+    var handleBlur = function () { return setFocused(false); };
+    var handleSubmit = function (e) {
+        e.preventDefault();
+        if (comment) {
+            createReply({
+                content: plainTextValue,
+                namedUsers: mentions,
+                commentId: comment.commentId,
+                action: comment.status === 'open' ? 'none' : 'reopen',
+                uri: uri
+            });
+        }
+        else {
+            createComment({
+                content: plainTextValue,
+                namedUsers: mentions,
+                objectType: objectType,
+                uri: uri,
+                relatedObjectUris: relatedObjectUris
+            });
+        }
+        clearValue();
+    };
+    react_1.useEffect(function () {
+        if (popperRef) {
+            popperRef.current.update();
+        }
+    }, [popperRef, shouldShowButtons]);
+    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),
+                react_1.default.createElement(TextFieldWithMentions_1.TextFieldWithMentions, { className: styles.textField, value: value, disabled: sending, onChange: handleChange, inputRef: inputRef, 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)),
+                react_1.default.createElement(Button_1.default, { disabled: sending, onClick: handleCancel, className: styles.button, variant: "outlined", color: "primary" }, ui_i18n_1.default.text('Cancel')))))));
+};
+exports.SendMessageArea = SendMessageArea;

package/components/CollaborationItem/SendMessageArea/styles.js

@@ -0,0 +1,33 @@
+"use strict";
+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)'
+    },
+    textField: {
+        maxWidth: 'calc(100% - 40px)'
+    },
+    form: {
+        marginBottom: 0
+    },
+    main: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    avatar: {
+        marginRight: '8px'
+    },
+    buttons: {
+        marginLeft: '40px',
+        marginTop: '8px'
+    },
+    button: {
+        '& + $button': {
+            marginLeft: '8px'
+        }
+    }
+});

package/components/CollaborationItem/TextFieldWithMentions/TextFieldWithMentions.js

@@ -0,0 +1,70 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __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 });
+exports.TextFieldWithMentions = void 0;
+var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var react_mentions_1 = require("react-mentions");
+var contexts_1 = require("../../../contexts");
+var styles_1 = require("./styles");
+var TextFieldWithMentions = function (_a) {
+    var onChange = _a.onChange, className = _a.className, props = __rest(_a, ["onChange", "className"]);
+    var styles = styles_1.useStyles();
+    var users = react_1.useContext(contexts_1.UsersContext);
+    var handleChange = function (_, value, plainTextValue, mentions) {
+        onChange(value, plainTextValue, ramda_1.uniq(mentions.map(function (_a) {
+            var display = _a.display;
+            return display.slice(1);
+        })));
+    };
+    return (react_1.default.createElement(react_mentions_1.MentionsInput, __assign({}, props, { onChange: handleChange, className: classnames_1.default(styles.root, className) }),
+        react_1.default.createElement(react_mentions_1.Mention, { trigger: "+", data: users.map(function (_a) {
+                var username = _a.username;
+                return ({ id: username, display: username });
+            }), displayTransform: function (_, username) { return "+" + username; }, appendSpaceOnAdd: true, className: styles.mention })));
+};
+exports.TextFieldWithMentions = TextFieldWithMentions;

package/components/CollaborationItem/TextFieldWithMentions/styles.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    root: {
+        width: '100%',
+        backgroundColor: '#fff',
+        fontFamily: 'Roboto',
+        '&__control': {
+            fontSize: '13px'
+        },
+        '&__highlighter': {
+            padding: '10px 22px',
+            border: '1px solid transparent !important',
+            maxHeight: '70px'
+        },
+        '&__input': {
+            borderRadius: '2px',
+            border: '1px solid rgba(0,0,0,0.12)',
+            padding: '10px 22px',
+            outline: 0,
+            maxHeight: '70px',
+            overflow: 'auto !important'
+        },
+        '&__suggestions': {
+            padding: '8px 0',
+            borderRadius: '4px',
+            backgroundColor: '#fafafa !important',
+            boxShadow: '0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2)',
+            transform: 'translateY(-144px)'
+        },
+        '&__suggestions__list': {
+            maxHeight: '200px',
+            overflowY: 'scroll'
+        },
+        '&__suggestions__item': {
+            padding: '6px 12px',
+            color: theme.palette.text.primary,
+            fontSize: '13px',
+            transition: theme.transitions.create(['background-color']),
+            '&:hover, &--focused': {
+                backgroundColor: 'rgba(0,0,0,0.04)'
+            }
+        }
+    },
+    mention: {
+        position: 'relative',
+        zIndex: 1,
+        color: theme.palette.primary.main,
+        textShadow: '1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white, -1px -1px 1px white',
+        pointerEvents: 'none'
+    }
+}); });