@reltio/components 1.4.1165 → 1.4.1169

package/cjs/components/EntityTypeBadge/EntityTypeBadge.js

@@ -9,6 +9,7 @@ var classnames_1 = __importDefault(require("classnames"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
+var ExpandedValueTooltip_1 = __importDefault(require("../ExpandedValueTooltip/ExpandedValueTooltip"));
 var styles_1 = __importDefault(require("./styles"));
 var EntityTypeBadge = function (_a) {
     var entity = _a.entity, className = _a.className, _b = _a.size, size = _b === void 0 ? 'small' : _b;
@@ -17,9 +18,11 @@ var EntityTypeBadge = function (_a) {
     var entityTypeUri = entity.type;
     var entityType = mdm_sdk_1.getEntityType(metadata, entityTypeUri) || {};
     var entityTypeColor = mdm_sdk_1.getPropWithInheritance(metadata, entityType, 'typeColor') || mdm_sdk_1.theme.palette.primary.main;
-    return (react_1.default.createElement(Typography_1.default, { style: {
-            backgroundColor: entityTypeColor,
-            color: mdm_sdk_1.utils.Colors.getColor(entityTypeColor) ? '#FFFFFF' : '#212121'
-        }, className: classnames_1.default(styles["entityType-" + size], className), component: "div" }, mdm_sdk_1.getEntityTypeLabel(metadata, entity)));
+    var entityTypeLabel = mdm_sdk_1.getEntityTypeLabel(metadata, entity);
+    return (react_1.default.createElement(ExpandedValueTooltip_1.default, { value: entityTypeLabel, placement: "top" },
+        react_1.default.createElement(Typography_1.default, { style: {
+                backgroundColor: entityTypeColor,
+                color: mdm_sdk_1.utils.Colors.getColor(entityTypeColor) ? '#FFFFFF' : '#212121'
+            }, className: classnames_1.default(styles["entityType-" + size], styles['entityType-overflow'], className), component: "div" }, entityTypeLabel)));
 };
 exports.default = EntityTypeBadge;

package/cjs/components/EntityTypeBadge/styles.d.ts

@@ -1,2 +1,2 @@
-declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"entityType-small" | "entityType-medium">;
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"entityType-overflow" | "entityType-small" | "entityType-medium">;
 export default useStyles;

package/cjs/components/EntityTypeBadge/styles.js

@@ -2,11 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var styles_1 = require("@material-ui/core/styles");
 var useStyles = styles_1.makeStyles({
+    'entityType-overflow': {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+    },
     'entityType-small': {
         padding: '1px 4px',
         fontSize: '10px',
         lineHeight: 'normal',
-        display: 'inline-flex',
         marginRight: '12px',
         borderRadius: '2px'
     },
@@ -16,7 +20,6 @@ var useStyles = styles_1.makeStyles({
         fontSize: '13px',
         fontWeight: 500,
         lineHeight: '15px',
-        display: 'inline-flex',
         marginRight: '16px'
     }
 });

package/cjs/components/ProfileCard/styles.js

@@ -48,6 +48,7 @@ var useStyles = styles_1.makeStyles(function (theme) { return ({
     entityId: {
         display: 'flex',
         alignItems: 'baseline',
+        whiteSpace: 'nowrap',
         fontWeight: 400,
         fontSize: '12px',
         lineHeight: '16px'

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
 };

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.preparedGroupedItems = void 0;
+var ramda_1 = require("ramda");
+var filterItems = ramda_1.curry(function (filterText, items) {
+    return ramda_1.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 ramda_1.pipe(filterItems(filter), ramda_1.map(function (attrType) { return ({
+        item: {
+            id: attrType.uri,
+            label: attrType.label,
+            attrType: attrType
+        }
+    }); }))(attrTypes);
+};
+exports.preparedGroupedItems = preparedGroupedItems;

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

@@ -27,5 +27,25 @@ exports.useStyles = styles_1.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/cjs/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/cjs/components/attributes/editMode/MoreAttributesButton/useMoreAttributesItems.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMoreAttributesItems = void 0;
+var react_1 = require("react");
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var helpers_1 = require("../../../VirtualGroupedList/helpers");
+var helpers_2 = require("./helpers");
+var GROUP_NAMES;
+(function (GROUP_NAMES) {
+    GROUP_NAMES["parent"] = "parent";
+    GROUP_NAMES["attributes"] = "attributes";
+})(GROUP_NAMES || (GROUP_NAMES = {}));
+var useMoreAttributesItems = function (_a) {
+    var data = _a.data, parent = _a.parent, filter = _a.filter;
+    var hasGroups = Boolean(parent);
+    var preparedParentGroupItem = react_1.useMemo(function () { return (hasGroups ? helpers_2.preparedGroupedItems({ attrTypes: [parent], filter: filter }) : []); }, [hasGroups, parent, filter]);
+    var parentGroup = react_1.useMemo(function () {
+        return hasGroups && (preparedParentGroupItem === null || preparedParentGroupItem === void 0 ? void 0 : preparedParentGroupItem.length)
+            ? [
+                {
+                    item: {
+                        id: GROUP_NAMES.parent,
+                        label: ui_i18n_1.default.text('Parent')
+                    },
+                    items: preparedParentGroupItem
+                }
+            ]
+            : [];
+    }, [hasGroups, preparedParentGroupItem]);
+    var preparedAttributesGroupItems = react_1.useMemo(function () {
+        return helpers_2.preparedGroupedItems({
+            attrTypes: data,
+            filter: filter
+        });
+    }, [data, filter]);
+    var attributesGroup = react_1.useMemo(function () {
+        return hasGroups && (preparedAttributesGroupItems === null || preparedAttributesGroupItems === void 0 ? void 0 : preparedAttributesGroupItems.length)
+            ? [
+                {
+                    item: {
+                        id: GROUP_NAMES.attributes,
+                        label: ui_i18n_1.default.text('Attributes')
+                    },
+                    items: preparedAttributesGroupItems
+                }
+            ]
+            : preparedAttributesGroupItems;
+    }, [hasGroups, preparedAttributesGroupItems]);
+    var items = react_1.useMemo(function () { return helpers_1.flattenGroupedItemsData((parentGroup || []).concat(attributesGroup)); }, [
+        parentGroup,
+        attributesGroup
+    ]);
+    var parentGroupLength = parentGroup.length;
+    var attributesGroupLength = attributesGroup.length;
+    return { items: items, hasGroups: hasGroups, parentGroupLength: parentGroupLength, attributesGroupLength: attributesGroupLength };
+};
+exports.useMoreAttributesItems = useMoreAttributesItems;

package/esm/components/EntityTypeBadge/EntityTypeBadge.js

@@ -4,6 +4,7 @@ import classnames from 'classnames';
 import Typography from '@material-ui/core/Typography';
 import { getEntityType, getEntityTypeLabel, getPropWithInheritance, theme, utils } from '@reltio/mdm-sdk';
 import mdmModule from '@reltio/mdm-module';
+import ExpandedValueTooltip from '../ExpandedValueTooltip/ExpandedValueTooltip';
 import useStyles from './styles';
 var EntityTypeBadge = function (_a) {
     var entity = _a.entity, className = _a.className, _b = _a.size, size = _b === void 0 ? 'small' : _b;
@@ -12,9 +13,11 @@ var EntityTypeBadge = function (_a) {
     var entityTypeUri = entity.type;
     var entityType = getEntityType(metadata, entityTypeUri) || {};
     var entityTypeColor = getPropWithInheritance(metadata, entityType, 'typeColor') || theme.palette.primary.main;
-    return (React.createElement(Typography, { style: {
-            backgroundColor: entityTypeColor,
-            color: utils.Colors.getColor(entityTypeColor) ? '#FFFFFF' : '#212121'
-        }, className: classnames(styles["entityType-" + size], className), component: "div" }, getEntityTypeLabel(metadata, entity)));
+    var entityTypeLabel = getEntityTypeLabel(metadata, entity);
+    return (React.createElement(ExpandedValueTooltip, { value: entityTypeLabel, placement: "top" },
+        React.createElement(Typography, { style: {
+                backgroundColor: entityTypeColor,
+                color: utils.Colors.getColor(entityTypeColor) ? '#FFFFFF' : '#212121'
+            }, className: classnames(styles["entityType-" + size], styles['entityType-overflow'], className), component: "div" }, entityTypeLabel)));
 };
 export default EntityTypeBadge;

package/esm/components/EntityTypeBadge/styles.d.ts

@@ -1,2 +1,2 @@
-declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"entityType-small" | "entityType-medium">;
+declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"entityType-overflow" | "entityType-small" | "entityType-medium">;
 export default useStyles;

package/esm/components/EntityTypeBadge/styles.js

@@ -1,10 +1,14 @@
 import { makeStyles } from '@material-ui/core/styles';
 var useStyles = makeStyles({
+    'entityType-overflow': {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap'
+    },
     'entityType-small': {
         padding: '1px 4px',
         fontSize: '10px',
         lineHeight: 'normal',
-        display: 'inline-flex',
         marginRight: '12px',
         borderRadius: '2px'
     },
@@ -14,7 +18,6 @@ var useStyles = makeStyles({
         fontSize: '13px',
         fontWeight: 500,
         lineHeight: '15px',
-        display: 'inline-flex',
         marginRight: '16px'
     }
 });

package/esm/components/ProfileCard/styles.js

@@ -46,6 +46,7 @@ var useStyles = makeStyles(function (theme) { return ({
     entityId: {
         display: 'flex',
         alignItems: 'baseline',
+        whiteSpace: 'nowrap',
         fontWeight: 400,
         fontSize: '12px',
         lineHeight: '16px'

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/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1165",
+  "version": "1.4.1169",
   "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.1165",
-    "@reltio/mdm-sdk": "^1.4.1165",
+    "@reltio/mdm-module": "^1.4.1169",
+    "@reltio/mdm-sdk": "^1.4.1169",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",