@reltio/components 1.4.1164 → 1.4.1168

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/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/esm/components/attributes/editMode/AttributesList/AttributesList.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import React, { memo, useCallback, useContext, useMemo, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import i18n from 'ui-i18n';
-import { getCreatableAttributeTypes, getAttributesListForEditMode, ModeType } from '@reltio/mdm-sdk';
+import { getCreatableAttributeTypes, getAttributesListForEditMode, ModeType, getParentUri, checkCanCreateAttribute } from '@reltio/mdm-sdk';
 import { path } from 'ramda';
 import AttributesPager from '../AttributesPager';
 import BranchDecorator from '../../BranchDecorator/BranchDecorator';
@@ -23,7 +23,7 @@ import { getMoreAttrTypes } from './helpers';
 import { PinnedAttributesContext } from '../contexts/PinnedAttributesContext';
 import { HasDeletionsContext } from '../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 ? 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 ? 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 = useState({}), hasDeletionsMap = _d[0], setHasDeletionsMap = _d[1];
     var setHasDeletions = useCallback(function (attrTypeUri, value) {
@@ -35,14 +35,18 @@ var AttributesList = function (_a) {
     useEffect(function () {
         setHasDeletionsMap({});
     }, [parentUri]);
+    var canCreateParentAttrType = useMemo(function () { return parentAttributeType && checkCanCreateAttribute({ attributeType: parentAttributeType, mode: mode }); }, [parentAttributeType, mode]);
     var creatableAttrTypes = useMemo(function () { return getCreatableAttributeTypes(mode, attrTypes); }, [attrTypes, mode]);
     var moreAttrTypes = getMoreAttrTypes(creatableAttrTypes, entity, showEmptyEditors, hasDeletionsMap);
     var pinnedAttributes = useContext(PinnedAttributesContext);
     var pagersData = useMemo(function () { return getAttributesListForEditMode(attrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes); }, [attrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes]);
     var _e = useMemo(function () { return splitPagersData(alwaysVisibleTypeUris, pagersData); }, [pagersData, alwaysVisibleTypeUris]), alwaysVisiblePagersData = _e[0], regularPagersData = _e[1];
     var onAddMoreAttributes = 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 ? getParentUri(parentUri) : parentUri
+        }); }));
+    }, [onAddAttributes, parentUri, parentAttributeType]);
     var decoratorProps = {
         enabled: drawLines
     };
@@ -52,13 +56,14 @@ var AttributesList = function (_a) {
     }); }, [hasDeletionsMap, setHasDeletions]);
     return (React.createElement("div", { className: className },
         children && React.createElement(BranchDecorator, __assign({}, decoratorProps), children),
-        React.createElement(BranchDecorator, __assign({}, decoratorProps, { plain: true }), moreAttrTypes.length > 0 && (React.createElement(MoreAttributesButton, { label: i18n.text('More attributes'), onApply: onAddMoreAttributes, dense: drawLines, data: moreAttrTypes }))),
+        React.createElement(BranchDecorator, __assign({}, decoratorProps, { plain: true }), moreAttrTypes.length > 0 && (React.createElement(MoreAttributesButton, { label: i18n.text('More attributes'), onApply: onAddMoreAttributes, dense: drawLines, data: moreAttrTypes, parent: canCreateParentAttrType && parentAttributeType }))),
         React.createElement(HasDeletionsContext.Provider, { value: hasDeletionsContextValue }, regularPagersData.concat(alwaysVisiblePagersData).map(function (_a) {
             var attrType = _a.attrType, values = _a.values;
             return (React.createElement(AttributesPager, { key: attrType.uri, attributeType: attrType, drawLines: drawLines, values: values, paging: 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: PropTypes.object,
     attrTypes: PropTypes.array,
     entity: PropTypes.object,
     parentUri: PropTypes.string,

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

@@ -79,7 +79,7 @@ var ComplexAttribute = function (_a) {
                     ")")),
                 additionalControlsRenderer && additionalControlsRenderer({ attributeType: attributeType, attributeValue: attributeValue }),
                 showDeleteButton && React.createElement(SmallIconButton, { icon: DeleteIcon, onClick: onDeleteThis, size: "L" }))),
-        expanded && (React.createElement(AttributesList, { 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.createElement(AttributesList, { 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: PropTypes.string, children: PropTypes.node, attributeTypesList: PropTypes.arrayOf(AttributeTypeType), attributeValue: PropTypes.oneOfType([NestedAttributeValueType, ReferenceAttributeValueType]) }, ComplexAttributeType);
 export default ComplexAttribute;

package/esm/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/esm/components/attributes/editMode/MoreAttributesButton/MoreAttributesButton.js

@@ -1,27 +1,28 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
+import i18n from 'ui-i18n';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
-import { always, any, append, curry, filter, ifElse, map, not, pipe, pluck, propEq, reject } from 'ramda';
+import { always, any, append, ifElse, not, pipe, pluck, propEq, reject } from 'ramda';
 import Button from '@material-ui/core/Button';
+import ListItem from '@material-ui/core/ListItem';
+import Typography from '@material-ui/core/Typography';
 import { useStyles } from './styles';
 import SelectionPopup from '../../../SelectionPopup/SelectionPopup';
 import AttributeListItem from '../../../AttributeListItem/AttributeListItem';
-import { flattenGroupedItemsData } from '../../../VirtualGroupedList/helpers';
 import VirtualGroupedList from '../../../VirtualGroupedList/VirtualGroupedList';
 import { useKeyboardNavigation } from '../../../SelectionPopup/helpers';
 import AddIcon from '@material-ui/icons/Add';
 import Highlighter from '../../../Highlighter/Highlighter';
+import { useMoreAttributesItems } from './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 = curry(function (filterText, items) {
-    return 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 = useStyles();
     var inputRef = useRef();
     var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
@@ -31,6 +32,7 @@ var MoreAttributesButton = function (_a) {
     var clearFilter = function () { return setFilter(''); };
     var _f = useState([]), selectedItems = _f[0], setSelectedItems = _f[1];
     var clearSelectedItems = function () { return setSelectedItems([]); };
+    var _g = 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(pluck('attrType', selectedItems));
@@ -39,48 +41,45 @@ var MoreAttributesButton = function (_a) {
     var handleListItemClick = useCallback(function (item, checked) {
         setSelectedItems(ifElse(always(checked), append(item), reject(propEq('id', item.id)))(selectedItems));
     }, [selectedItems]);
-    var preparedGroupedItems = useMemo(function () {
-        return pipe(filterItems(filter), map(function (attrType) { return ({
-            item: {
-                id: attrType.uri,
-                label: attrType.label,
-                attrType: attrType
-            }
-        }); }))(data);
-    }, [data, filter]);
-    var items = useMemo(function () { return flattenGroupedItemsData(preparedGroupedItems); }, [preparedGroupedItems]);
-    var getItemSize = useCallback(function () { return ITEM_HEIGHT; }, []);
+    var getItemSize = useCallback(function (i, item) { return (item.items ? ITEM_GROUP_TITLE_HEIGHT : ITEM_HEIGHT); }, []);
     var handleSearchOnEnter = useCallback(function (_a) {
         var item = _a.item;
         handleListItemClick(item, not(any(propEq('id', item.id))(selectedItems)));
     }, [handleListItemClick, selectedItems]);
-    var _g = useKeyboardNavigation({
+    var _h = useKeyboardNavigation({
         items: items,
         open: isOpen,
         onSelectFocusedItem: handleSearchOnEnter,
         selectedItems: selectedItems
-    }), focusIndex = _g.focusIndex, handleKeyDown = _g.handleKeyDown;
+    }), focusIndex = _h.focusIndex, handleKeyDown = _h.handleKeyDown;
     var focusIndexRef = 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 = 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 = any(propEq('id', item.id))(selectedItems);
         var isFocused = focusIndexRef.current === index;
-        return (React.createElement(AttributeListItem, { key: item.uri, onClick: handleListItemClick, checked: isChecked, level: level, data: item, label: React.createElement(Highlighter, { text: item.label, highlight: filter }), labelInText: item.label, style: style, isFocused: isFocused, isRequired: !!item.attrType.required, LogoIcon: item.LogoIcon }));
+        return (React.createElement(AttributeListItem, { key: item.uri, onClick: handleListItemClick, checked: isChecked, level: level, data: item, label: React.createElement(Highlighter, { 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 = useCallback(function (style, item) { return (React.createElement(ListItem, { component: 'div', className: styles.subHeader, style: style, key: "group-" + item.item.id }, item.item.label)); }, []);
     return (React.createElement("div", { className: classnames(styles.moreAttributes, (_b = {}, _b[styles.dense] = dense, _b)) },
         React.createElement(Button, { color: "primary", onClick: togglePopupOpen, ref: inputRef, className: styles.moreButton },
             React.createElement(AddIcon, { classes: { root: styles.icon } }),
             React.createElement("div", { className: styles.buttonLabel }, label)),
         React.createElement(SelectionPopup, { open: isOpen, className: classnames(styles.moreAttributesPopup, styles.popupContainer), anchorEl: inputRef.current, onClose: pipe(addSelectedAttributes, closePopup, clearFilter, clearSelectedItems), onSearch: setFilter, containerHeight: containerHeight, title: popupTitle, containerWidth: LIST_CONTAINER_WIDTH, searchInputOnKeyDown: handleKeyDown },
-            React.createElement(VirtualGroupedList, { getItemSize: getItemSize, renderItem: listItemRenderer, items: items, height: listHeight, containerWidth: LIST_CONTAINER_WIDTH, focusIndex: focusIndex }))));
+            React.createElement(VirtualGroupedList, { getItemSize: getItemSize, renderItem: listItemRenderer, renderGroupTitle: renderGroupTitle, items: items, height: listHeight, containerWidth: LIST_CONTAINER_WIDTH, focusIndex: focusIndex }),
+            items.length === 0 && (React.createElement("div", { className: styles.noResultsCaptionContainer },
+                React.createElement(Typography, { variant: "caption", display: "block", gutterBottom: true }, i18n.text('No results found')))))));
 };
 MoreAttributesButton.propTypes = {
     label: PropTypes.string,
     popupTitle: PropTypes.string,
     data: PropTypes.array,
+    parent: PropTypes.object,
     dense: PropTypes.bool,
     onApply: PropTypes.func
 };

package/esm/components/attributes/editMode/MoreAttributesButton/helpers.d.ts

@@ -0,0 +1,8 @@
+import { AttributeType } from '@reltio/mdm-sdk';
+import { GroupedItem } from './useMoreAttributesItems';
+declare type Props = {
+    attrTypes: AttributeType[];
+    filter?: string;
+};
+declare const preparedGroupedItems: ({ attrTypes, filter }: Props) => GroupedItem[];
+export { preparedGroupedItems };

package/esm/components/attributes/editMode/MoreAttributesButton/helpers.js

@@ -0,0 +1,15 @@
+import { curry, filter, map, pipe } from 'ramda';
+var filterItems = curry(function (filterText, items) {
+    return filter(function (item) { return item.label.toLowerCase().includes(filterText.toLowerCase()); })(items);
+});
+var preparedGroupedItems = function (_a) {
+    var attrTypes = _a.attrTypes, _b = _a.filter, filter = _b === void 0 ? '' : _b;
+    return pipe(filterItems(filter), map(function (attrType) { return ({
+        item: {
+            id: attrType.uri,
+            label: attrType.label,
+            attrType: attrType
+        }
+    }); }))(attrTypes);
+};
+export { preparedGroupedItems };

package/esm/components/attributes/editMode/MoreAttributesButton/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "dense" | "buttonLabel" | "moreButton" | "moreAttributes" | "popupContainer" | "moreAttributesPopup">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"icon" | "dense" | "buttonLabel" | "moreButton" | "subHeader" | "moreAttributes" | "popupContainer" | "moreAttributesPopup" | "noResultsCaptionContainer">;

package/esm/components/attributes/editMode/MoreAttributesButton/styles.js

@@ -24,5 +24,25 @@ export var useStyles = makeStyles({
     icon: {
         fontSize: '18px',
         marginRight: '8px'
+    },
+    subHeader: {
+        backgroundColor: 'rgb(245, 245, 245)',
+        padding: '0 16px',
+        margin: 0,
+        display: 'flex',
+        alignItems: 'center',
+        color: 'rgba(0,0,0,0.84)',
+        fontSize: '14px',
+        fontWeight: 500
+    },
+    noResultsCaptionContainer: {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center'
     }
 });

package/esm/components/attributes/editMode/MoreAttributesButton/useMoreAttributesItems.d.ts

@@ -0,0 +1,22 @@
+import { AttributeType } from '@reltio/mdm-sdk';
+declare type Props = {
+    data: AttributeType[];
+    parent?: AttributeType;
+    filter?: string;
+};
+declare type Item = {
+    id: string;
+    label: string;
+    attrType?: AttributeType;
+};
+export declare type GroupedItem = {
+    item: Item;
+    items?: GroupedItem[];
+};
+export declare const useMoreAttributesItems: ({ data, parent, filter }: Props) => {
+    items: any;
+    hasGroups: boolean;
+    parentGroupLength: number;
+    attributesGroupLength: number;
+};
+export {};

package/esm/components/attributes/editMode/MoreAttributesButton/useMoreAttributesItems.js

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+import i18n from 'ui-i18n';
+import { flattenGroupedItemsData } from '../../../VirtualGroupedList/helpers';
+import { preparedGroupedItems } from './helpers';
+var GROUP_NAMES;
+(function (GROUP_NAMES) {
+    GROUP_NAMES["parent"] = "parent";
+    GROUP_NAMES["attributes"] = "attributes";
+})(GROUP_NAMES || (GROUP_NAMES = {}));
+export var useMoreAttributesItems = function (_a) {
+    var data = _a.data, parent = _a.parent, filter = _a.filter;
+    var hasGroups = Boolean(parent);
+    var preparedParentGroupItem = useMemo(function () { return (hasGroups ? preparedGroupedItems({ attrTypes: [parent], filter: filter }) : []); }, [hasGroups, parent, filter]);
+    var parentGroup = useMemo(function () {
+        return hasGroups && (preparedParentGroupItem === null || preparedParentGroupItem === void 0 ? void 0 : preparedParentGroupItem.length)
+            ? [
+                {
+                    item: {
+                        id: GROUP_NAMES.parent,
+                        label: i18n.text('Parent')
+                    },
+                    items: preparedParentGroupItem
+                }
+            ]
+            : [];
+    }, [hasGroups, preparedParentGroupItem]);
+    var preparedAttributesGroupItems = useMemo(function () {
+        return preparedGroupedItems({
+            attrTypes: data,
+            filter: filter
+        });
+    }, [data, filter]);
+    var attributesGroup = useMemo(function () {
+        return hasGroups && (preparedAttributesGroupItems === null || preparedAttributesGroupItems === void 0 ? void 0 : preparedAttributesGroupItems.length)
+            ? [
+                {
+                    item: {
+                        id: GROUP_NAMES.attributes,
+                        label: i18n.text('Attributes')
+                    },
+                    items: preparedAttributesGroupItems
+                }
+            ]
+            : preparedAttributesGroupItems;
+    }, [hasGroups, preparedAttributesGroupItems]);
+    var items = useMemo(function () { return flattenGroupedItemsData((parentGroup || []).concat(attributesGroup)); }, [
+        parentGroup,
+        attributesGroup
+    ]);
+    var parentGroupLength = parentGroup.length;
+    var attributesGroupLength = attributesGroup.length;
+    return { items: items, hasGroups: hasGroups, parentGroupLength: parentGroupLength, attributesGroupLength: attributesGroupLength };
+};

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.1164",
+  "version": "1.4.1168",
   "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.1164",
-    "@reltio/mdm-sdk": "^1.4.1164",
+    "@reltio/mdm-module": "^1.4.1168",
+    "@reltio/mdm-sdk": "^1.4.1168",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",