@reltio/components 1.4.1164 → 1.4.1168

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/editMode/AttributesList/AttributesList.d.ts

@@ -1,5 +1,6 @@
 declare var _default: React.MemoExoticComponent<{
-    ({ attrTypes, entity, parentUri, showEmptyEditors, mode, crosswalks, drawLines, children, className, alwaysVisibleTypeUris, onAddAttributes, onChangeAttribute, onDeleteAttribute, additionalControlsRenderer, showNonOv }: {
+    ({ parentAttributeType, attrTypes, entity, parentUri, showEmptyEditors, mode, crosswalks, drawLines, children, className, alwaysVisibleTypeUris, onAddAttributes, onChangeAttribute, onDeleteAttribute, additionalControlsRenderer, showNonOv }: {
+        parentAttributeType: any;
         attrTypes: any;
         entity: any;
         parentUri: any;
@@ -17,6 +18,7 @@ declare var _default: React.MemoExoticComponent<{
         showNonOv: any;
     }): JSX.Element;
     propTypes: {
+        parentAttributeType: PropTypes.Requireable<object>;
         attrTypes: PropTypes.Requireable<any[]>;
         entity: PropTypes.Requireable<object>;
         parentUri: PropTypes.Requireable<string>;

package/cjs/components/attributes/editMode/AttributesList/AttributesList.js

@@ -47,7 +47,7 @@ var helpers_1 = require("./helpers");
 var PinnedAttributesContext_1 = require("../contexts/PinnedAttributesContext");
 var HasDeletionsContext_1 = require("../contexts/HasDeletionsContext");
 var AttributesList = function (_a) {
-    var attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.alwaysVisibleTypeUris, alwaysVisibleTypeUris = _b === void 0 ? constants_1.ALWAYS_VISIBLE_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv;
+    var parentAttributeType = _a.parentAttributeType, attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.alwaysVisibleTypeUris, alwaysVisibleTypeUris = _b === void 0 ? constants_1.ALWAYS_VISIBLE_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv;
     var _c = entity.attributes, attributes = _c === void 0 ? {} : _c;
     var _d = react_1.useState({}), hasDeletionsMap = _d[0], setHasDeletionsMap = _d[1];
     var setHasDeletions = react_1.useCallback(function (attrTypeUri, value) {
@@ -59,14 +59,18 @@ var AttributesList = function (_a) {
     react_1.useEffect(function () {
         setHasDeletionsMap({});
     }, [parentUri]);
+    var canCreateParentAttrType = react_1.useMemo(function () { return parentAttributeType && mdm_sdk_1.checkCanCreateAttribute({ attributeType: parentAttributeType, mode: mode }); }, [parentAttributeType, mode]);
     var creatableAttrTypes = react_1.useMemo(function () { return mdm_sdk_1.getCreatableAttributeTypes(mode, attrTypes); }, [attrTypes, mode]);
     var moreAttrTypes = helpers_1.getMoreAttrTypes(creatableAttrTypes, entity, showEmptyEditors, hasDeletionsMap);
     var pinnedAttributes = react_1.useContext(PinnedAttributesContext_1.PinnedAttributesContext);
     var pagersData = react_1.useMemo(function () { return mdm_sdk_1.getAttributesListForEditMode(attrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes); }, [attrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes]);
     var _e = react_1.useMemo(function () { return attributesView_1.splitPagersData(alwaysVisibleTypeUris, pagersData); }, [pagersData, alwaysVisibleTypeUris]), alwaysVisiblePagersData = _e[0], regularPagersData = _e[1];
     var onAddMoreAttributes = react_1.useCallback(function (attributeTypes) {
-        onAddAttributes(attributeTypes.map(function (attributeType) { return ({ attributeType: attributeType, parentUri: parentUri }); }));
-    }, [onAddAttributes, parentUri]);
+        onAddAttributes(attributeTypes.map(function (attributeType) { return ({
+            attributeType: attributeType,
+            parentUri: attributeType === parentAttributeType ? mdm_sdk_1.getParentUri(parentUri) : parentUri
+        }); }));
+    }, [onAddAttributes, parentUri, parentAttributeType]);
     var decoratorProps = {
         enabled: drawLines
     };
@@ -76,13 +80,14 @@ var AttributesList = function (_a) {
     }); }, [hasDeletionsMap, setHasDeletions]);
     return (react_1.default.createElement("div", { className: className },
         children && react_1.default.createElement(BranchDecorator_1.default, __assign({}, decoratorProps), children),
-        react_1.default.createElement(BranchDecorator_1.default, __assign({}, decoratorProps, { plain: true }), moreAttrTypes.length > 0 && (react_1.default.createElement(MoreAttributesButton_1.default, { label: ui_i18n_1.default.text('More attributes'), onApply: onAddMoreAttributes, dense: drawLines, data: moreAttrTypes }))),
+        react_1.default.createElement(BranchDecorator_1.default, __assign({}, decoratorProps, { plain: true }), moreAttrTypes.length > 0 && (react_1.default.createElement(MoreAttributesButton_1.default, { label: ui_i18n_1.default.text('More attributes'), onApply: onAddMoreAttributes, dense: drawLines, data: moreAttrTypes, parent: canCreateParentAttrType && parentAttributeType }))),
         react_1.default.createElement(HasDeletionsContext_1.HasDeletionsContext.Provider, { value: hasDeletionsContextValue }, regularPagersData.concat(alwaysVisiblePagersData).map(function (_a) {
             var attrType = _a.attrType, values = _a.values;
             return (react_1.default.createElement(AttributesPager_1.default, { key: attrType.uri, attributeType: attrType, drawLines: drawLines, values: values, paging: ramda_1.path(['paging', attrType.uri], attributes), parentUri: parentUri, showEmptyEditors: showEmptyEditors, mode: mode, crosswalks: crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute, additionalControlsRenderer: additionalControlsRenderer, showNonOv: showNonOv }));
         }))));
 };
 AttributesList.propTypes = {
+    parentAttributeType: prop_types_1.default.object,
     attrTypes: prop_types_1.default.array,
     entity: prop_types_1.default.object,
     parentUri: prop_types_1.default.string,

package/cjs/components/attributes/editMode/ComplexAttribute/ComplexAttribute.js

@@ -103,7 +103,7 @@ var ComplexAttribute = function (_a) {
                     ")")),
                 additionalControlsRenderer && additionalControlsRenderer({ attributeType: attributeType, attributeValue: attributeValue }),
                 showDeleteButton && react_1.default.createElement(SmallIconButton_1.default, { icon: Delete_1.default, onClick: onDeleteThis, size: "L" }))),
-        expanded && (react_1.default.createElement(AttributesList_1.default, { attrTypes: attributeTypesList, entity: attributeListEntity, showEmptyEditors: showEmptyEditors || isNew, drawLines: true, parentUri: uri, mode: mode, crosswalks: crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute, additionalControlsRenderer: additionalControlsRenderer, showNonOv: showNonOv }, children))));
+        expanded && (react_1.default.createElement(AttributesList_1.default, { parentAttributeType: attributeType, attrTypes: attributeTypesList, entity: attributeListEntity, showEmptyEditors: showEmptyEditors || isNew, drawLines: true, parentUri: uri, mode: mode, crosswalks: crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute, additionalControlsRenderer: additionalControlsRenderer, showNonOv: showNonOv }, children))));
 };
 ComplexAttribute.propTypes = __assign({ label: prop_types_1.default.string, children: prop_types_1.default.node, attributeTypesList: prop_types_1.default.arrayOf(mdm_sdk_1.AttributeTypeType), attributeValue: prop_types_1.default.oneOfType([mdm_sdk_1.NestedAttributeValueType, mdm_sdk_1.ReferenceAttributeValueType]) }, mdm_sdk_1.ComplexAttributeType);
 exports.default = ComplexAttribute;

package/cjs/components/attributes/editMode/MoreAttributesButton/MoreAttributesButton.d.ts

@@ -1,8 +1,9 @@
 export default MoreAttributesButton;
-declare function MoreAttributesButton({ label, popupTitle, data, dense, onApply }: {
+declare function MoreAttributesButton({ label, popupTitle, data, parent, dense, onApply }: {
     label: any;
     popupTitle?: any;
     data: any;
+    parent: any;
     dense: any;
     onApply: any;
 }): JSX.Element;
@@ -11,6 +12,7 @@ declare namespace MoreAttributesButton {
         const label: PropTypes.Requireable<string>;
         const popupTitle: PropTypes.Requireable<string>;
         const data: PropTypes.Requireable<any[]>;
+        const parent: PropTypes.Requireable<object>;
         const dense: PropTypes.Requireable<boolean>;
         const onApply: PropTypes.Requireable<(...args: any[]) => any>;
     }

package/cjs/components/attributes/editMode/MoreAttributesButton/MoreAttributesButton.js

@@ -23,29 +23,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var classnames_1 = __importDefault(require("classnames"));
 var prop_types_1 = __importDefault(require("prop-types"));
 var ramda_1 = require("ramda");
 var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var ListItem_1 = __importDefault(require("@material-ui/core/ListItem"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var styles_1 = require("./styles");
 var SelectionPopup_1 = __importDefault(require("../../../SelectionPopup/SelectionPopup"));
 var AttributeListItem_1 = __importDefault(require("../../../AttributeListItem/AttributeListItem"));
-var helpers_1 = require("../../../VirtualGroupedList/helpers");
 var VirtualGroupedList_1 = __importDefault(require("../../../VirtualGroupedList/VirtualGroupedList"));
-var helpers_2 = require("../../../SelectionPopup/helpers");
+var helpers_1 = require("../../../SelectionPopup/helpers");
 var Add_1 = __importDefault(require("@material-ui/icons/Add"));
 var Highlighter_1 = __importDefault(require("../../../Highlighter/Highlighter"));
+var useMoreAttributesItems_1 = require("./useMoreAttributesItems");
 var ITEM_HEIGHT = 28;
+var ITEM_GROUP_TITLE_HEIGHT = 40;
 var LIST_CONTAINER_WIDTH = 320;
 var MAX_LIST_CONTAINER_HEIGHT = 255;
 var MIN_CONTAINER_HEIGHT = 140;
 var CONTAINER_HEADER_HEIGHT = 112;
-var filterItems = ramda_1.curry(function (filterText, items) {
-    return ramda_1.filter(function (item) { return item.label.toLowerCase().includes(filterText.toLowerCase()); })(items);
-});
 var MoreAttributesButton = function (_a) {
     var _b;
-    var label = _a.label, _c = _a.popupTitle, popupTitle = _c === void 0 ? label : _c, data = _a.data, dense = _a.dense, onApply = _a.onApply;
+    var label = _a.label, _c = _a.popupTitle, popupTitle = _c === void 0 ? label : _c, data = _a.data, parent = _a.parent, dense = _a.dense, onApply = _a.onApply;
     var styles = styles_1.useStyles();
     var inputRef = react_1.useRef();
     var _d = react_1.useState(false), isOpen = _d[0], setIsOpen = _d[1];
@@ -55,6 +56,7 @@ var MoreAttributesButton = function (_a) {
     var clearFilter = function () { return setFilter(''); };
     var _f = react_1.useState([]), selectedItems = _f[0], setSelectedItems = _f[1];
     var clearSelectedItems = function () { return setSelectedItems([]); };
+    var _g = useMoreAttributesItems_1.useMoreAttributesItems({ data: data, parent: parent, filter: filter }), items = _g.items, hasGroups = _g.hasGroups, parentGroupLength = _g.parentGroupLength, attributesGroupLength = _g.attributesGroupLength;
     var addSelectedAttributes = function () {
         if (selectedItems.length > 0) {
             onApply(ramda_1.pluck('attrType', selectedItems));
@@ -63,48 +65,45 @@ var MoreAttributesButton = function (_a) {
     var handleListItemClick = react_1.useCallback(function (item, checked) {
         setSelectedItems(ramda_1.ifElse(ramda_1.always(checked), ramda_1.append(item), ramda_1.reject(ramda_1.propEq('id', item.id)))(selectedItems));
     }, [selectedItems]);
-    var preparedGroupedItems = react_1.useMemo(function () {
-        return ramda_1.pipe(filterItems(filter), ramda_1.map(function (attrType) { return ({
-            item: {
-                id: attrType.uri,
-                label: attrType.label,
-                attrType: attrType
-            }
-        }); }))(data);
-    }, [data, filter]);
-    var items = react_1.useMemo(function () { return helpers_1.flattenGroupedItemsData(preparedGroupedItems); }, [preparedGroupedItems]);
-    var getItemSize = react_1.useCallback(function () { return ITEM_HEIGHT; }, []);
+    var getItemSize = react_1.useCallback(function (i, item) { return (item.items ? ITEM_GROUP_TITLE_HEIGHT : ITEM_HEIGHT); }, []);
     var handleSearchOnEnter = react_1.useCallback(function (_a) {
         var item = _a.item;
         handleListItemClick(item, ramda_1.not(ramda_1.any(ramda_1.propEq('id', item.id))(selectedItems)));
     }, [handleListItemClick, selectedItems]);
-    var _g = helpers_2.useKeyboardNavigation({
+    var _h = helpers_1.useKeyboardNavigation({
         items: items,
         open: isOpen,
         onSelectFocusedItem: handleSearchOnEnter,
         selectedItems: selectedItems
-    }), focusIndex = _g.focusIndex, handleKeyDown = _g.handleKeyDown;
+    }), focusIndex = _h.focusIndex, handleKeyDown = _h.handleKeyDown;
     var focusIndexRef = react_1.useRef(null);
     focusIndexRef.current = focusIndex;
-    var listHeight = Math.min(MAX_LIST_CONTAINER_HEIGHT, ITEM_HEIGHT * items.length);
+    var groupsCount = hasGroups ? (parentGroupLength ? 1 : 0) + (attributesGroupLength ? 1 : 0) : 0;
+    var itemsCount = items.length - groupsCount;
+    var listHeight = Math.min(MAX_LIST_CONTAINER_HEIGHT, ITEM_HEIGHT * itemsCount + ITEM_GROUP_TITLE_HEIGHT * groupsCount);
     var containerHeight = Math.max(MIN_CONTAINER_HEIGHT, listHeight + CONTAINER_HEADER_HEIGHT);
     var listItemRenderer = react_1.useCallback(function (style, _a, index) {
-        var item = _a.item, _b = _a.level, level = _b === void 0 ? 0 : _b;
+        var _b;
+        var item = _a.item, _c = _a.level, level = _c === void 0 ? 0 : _c;
         var isChecked = ramda_1.any(ramda_1.propEq('id', item.id))(selectedItems);
         var isFocused = focusIndexRef.current === index;
-        return (react_1.default.createElement(AttributeListItem_1.default, { key: item.uri, onClick: handleListItemClick, checked: isChecked, level: level, data: item, label: react_1.default.createElement(Highlighter_1.default, { text: item.label, highlight: filter }), labelInText: item.label, style: style, isFocused: isFocused, isRequired: !!item.attrType.required, LogoIcon: item.LogoIcon }));
+        return (react_1.default.createElement(AttributeListItem_1.default, { key: item.uri, onClick: handleListItemClick, checked: isChecked, level: level, data: item, label: react_1.default.createElement(Highlighter_1.default, { text: item.label, highlight: filter }), labelInText: item.label, style: style, isFocused: isFocused, isRequired: !!((_b = item.attrType) === null || _b === void 0 ? void 0 : _b.required), LogoIcon: item.LogoIcon }));
     }, [filter, handleListItemClick, selectedItems]);
+    var renderGroupTitle = react_1.useCallback(function (style, item) { return (react_1.default.createElement(ListItem_1.default, { component: 'div', className: styles.subHeader, style: style, key: "group-" + item.item.id }, item.item.label)); }, []);
     return (react_1.default.createElement("div", { className: classnames_1.default(styles.moreAttributes, (_b = {}, _b[styles.dense] = dense, _b)) },
         react_1.default.createElement(Button_1.default, { color: "primary", onClick: togglePopupOpen, ref: inputRef, className: styles.moreButton },
             react_1.default.createElement(Add_1.default, { classes: { root: styles.icon } }),
             react_1.default.createElement("div", { className: styles.buttonLabel }, label)),
         react_1.default.createElement(SelectionPopup_1.default, { open: isOpen, className: classnames_1.default(styles.moreAttributesPopup, styles.popupContainer), anchorEl: inputRef.current, onClose: ramda_1.pipe(addSelectedAttributes, closePopup, clearFilter, clearSelectedItems), onSearch: setFilter, containerHeight: containerHeight, title: popupTitle, containerWidth: LIST_CONTAINER_WIDTH, searchInputOnKeyDown: handleKeyDown },
-            react_1.default.createElement(VirtualGroupedList_1.default, { getItemSize: getItemSize, renderItem: listItemRenderer, items: items, height: listHeight, containerWidth: LIST_CONTAINER_WIDTH, focusIndex: focusIndex }))));
+            react_1.default.createElement(VirtualGroupedList_1.default, { getItemSize: getItemSize, renderItem: listItemRenderer, renderGroupTitle: renderGroupTitle, items: items, height: listHeight, containerWidth: LIST_CONTAINER_WIDTH, focusIndex: focusIndex }),
+            items.length === 0 && (react_1.default.createElement("div", { className: styles.noResultsCaptionContainer },
+                react_1.default.createElement(Typography_1.default, { variant: "caption", display: "block", gutterBottom: true }, ui_i18n_1.default.text('No results found')))))));
 };
 MoreAttributesButton.propTypes = {
     label: prop_types_1.default.string,
     popupTitle: prop_types_1.default.string,
     data: prop_types_1.default.array,
+    parent: prop_types_1.default.object,
     dense: prop_types_1.default.bool,
     onApply: prop_types_1.default.func
 };