@reltio/components 1.4.699 → 1.4.703

package/components/attributes/editMode/ImageAttributesLine/ImageAttributesLine.js

@@ -0,0 +1,107 @@
+"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 });
+var react_1 = __importStar(require("react"));
+var react_redux_1 = require("react-redux");
+var CloudUpload_1 = __importDefault(require("@material-ui/icons/CloudUpload"));
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Image_1 = __importDefault(require("../../../Image/Image"));
+var ImageActionsOverlay_1 = __importDefault(require("../../../Image/ImageActionsOverlay/ImageActionsOverlay"));
+var SmallIconButton_1 = require("../../../SmallIconButton");
+var UploadImageDialog_1 = require("../../../UploadImageDialog/UploadImageDialog");
+var ImageAttributesLine_1 = __importDefault(require("../../ImageAttributesLine"));
+var constants_1 = require("../../ImageAttributesLine/constants");
+var styles_1 = require("./styles");
+var ImageAttributesLine = function (_a) {
+    var _b = _a.attributeType, attributeType = _b === void 0 ? {} : _b, _c = _a.attributeValues, attributeValues = _c === void 0 ? [] : _c, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, parentUri = _a.parentUri;
+    var styles = styles_1.useStyles({ imageMargin: constants_1.IMAGE_MARGIN, imageWidth: constants_1.IMAGE_WIDTH, imageHeight: constants_1.IMAGE_HEIGHT });
+    var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity) || {};
+    var defaultProfilePic = react_redux_1.useSelector(function (state) {
+        return mdm_module_1.default.selectors.getModifiedEntityDefaultProfilePic(state, entity.uri);
+    });
+    var dispatch = react_redux_1.useDispatch();
+    var _d = react_1.useState(false), isVisibleUploadDialog = _d[0], setIsVisibleUploadDialog = _d[1];
+    var toggleVisibilityUploadDialog = react_1.useCallback(function () {
+        setIsVisibleUploadDialog(function (visible) { return !visible; });
+    }, []);
+    var handleAddAttributes = react_1.useCallback(function (image) {
+        var uri = mdm_sdk_1.generateUri(parentUri, attributeType.name);
+        var attributeValue = {};
+        var _loop_1 = function (key) {
+            var attribute = (attributeType.attributes || []).find(function (_a) {
+                var name = _a.name;
+                return name === key;
+            });
+            if (attribute) {
+                attributeValue[key] = [
+                    {
+                        uri: mdm_sdk_1.generateUri(uri, attribute.name),
+                        ov: true,
+                        value: image[key],
+                        type: attribute.uri
+                    }
+                ];
+            }
+        };
+        for (var key in image) {
+            _loop_1(key);
+        }
+        onChangeAttribute({ attributeType: attributeType, uri: uri, value: attributeValue });
+    }, [onChangeAttribute, parentUri, attributeType]);
+    var handleDeleteAttribute = react_1.useCallback(function (param) {
+        var _a;
+        onDeleteAttribute(param);
+        if (defaultProfilePic === param.uri) {
+            var newDefaultPic = ((_a = attributeValues[0]) === null || _a === void 0 ? void 0 : _a.uri) === param.uri ? attributeValues[1] : attributeValues[0];
+            dispatch(mdm_module_1.profile.modifiedEntities.actions.setDefaultProfilePic({
+                entityUri: entity.uri,
+                value: newDefaultPic || {}
+            }));
+        }
+    }, [onDeleteAttribute, entity, defaultProfilePic, attributeValues]);
+    var renderImageActionsOverlay = function (methods, attribute) {
+        var onOpenImageGalleryDialog = methods.onOpenImageGalleryDialog, onDownload = methods.onDownload, onShareLink = methods.onShareLink, onSetAsDefault = methods.onSetAsDefault;
+        var imageUrl = mdm_sdk_1.getImageAttributeOvUrl(attribute);
+        var uri = attribute.uri;
+        return (react_1.default.createElement(ImageActionsOverlay_1.default, { id: uri, onShareLink: function () { return onShareLink(imageUrl); }, onSetAsDefault: function () { return onSetAsDefault(attribute); }, onDelete: function () { return handleDeleteAttribute({ uri: uri, attributeType: attributeType }); }, onDownload: function () { return onDownload([imageUrl]); }, onClick: function () { return onOpenImageGalleryDialog(uri); } }));
+    };
+    var renderImage = function (methods) {
+        var renderImage = function (attribute) {
+            if (attribute === void 0) { attribute = {}; }
+            var src = mdm_sdk_1.getImageAttributeOvThumbnailUrl(attribute);
+            var uri = attribute.uri;
+            var onOpenImageGalleryDialog = methods.onOpenImageGalleryDialog;
+            return (react_1.default.createElement("div", { className: styles.image, key: uri },
+                react_1.default.createElement(Image_1.default, { src: src, overlay: renderImageActionsOverlay(methods, attribute), onClick: function () { return onOpenImageGalleryDialog(uri); } })));
+        };
+        return renderImage;
+    };
+    return (react_1.default.createElement("div", { className: styles.root },
+        react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: attributeValues, attributeType: attributeType, renderImage: renderImage, overlay: true, countFixedItems: 1, onUpload: toggleVisibilityUploadDialog, onDeleteAttribute: handleDeleteAttribute },
+            react_1.default.createElement("div", { className: styles.uploadContainer, onClick: toggleVisibilityUploadDialog },
+                react_1.default.createElement(SmallIconButton_1.SmallIconButton, { className: styles.uploadButton, iconClassName: styles.uploadIcon, icon: CloudUpload_1.default }))),
+        react_1.default.createElement(UploadImageDialog_1.UploadImageDialog, { open: isVisibleUploadDialog, onUpload: handleAddAttributes, onClose: toggleVisibilityUploadDialog })));
+};
+exports.default = ImageAttributesLine;

package/components/attributes/editMode/ImageAttributesLine/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var ImageAttributesLine_1 = __importDefault(require("./ImageAttributesLine"));
+exports.default = ImageAttributesLine_1.default;

package/components/attributes/editMode/ImageAttributesLine/styles.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function () { return ({
+    root: {
+        width: '100%',
+        marginBottom: '10px'
+    },
+    image: function (_a) {
+        var imageMargin = _a.imageMargin;
+        return {
+            marginRight: imageMargin,
+            cursor: 'pointer',
+            '&:last-child': {
+                marginRight: 0
+            }
+        };
+    },
+    uploadContainer: function (_a) {
+        var imageMargin = _a.imageMargin, imageWidth = _a.imageWidth, imageHeight = _a.imageHeight;
+        return {
+            backgroundColor: 'white',
+            width: imageWidth,
+            height: imageHeight,
+            cursor: 'pointer',
+            border: '1px dashed #0072CE',
+            boxSizing: 'border-box',
+            marginRight: imageMargin,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexShrink: 0
+        };
+    },
+    uploadButton: {
+        width: '50px',
+        height: '50px'
+    },
+    uploadIcon: {
+        fontSize: '36px'
+    }
+}); });

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

@@ -0,0 +1,111 @@
+"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 });
+var react_1 = __importStar(require("react"));
+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 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 Add_1 = __importDefault(require("@material-ui/icons/Add"));
+var Highlighter_1 = __importDefault(require("../../../Highlighter/Highlighter"));
+var ITEM_HEIGHT = 28;
+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 styles = styles_1.useStyles();
+    var inputRef = react_1.useRef();
+    var _d = react_1.useState(false), isOpen = _d[0], setIsOpen = _d[1];
+    var togglePopupOpen = function () { return setIsOpen(!isOpen); };
+    var closePopup = function () { return setIsOpen(false); };
+    var _e = react_1.useState(''), filter = _e[0], setFilter = _e[1];
+    var clearFilter = function () { return setFilter(''); };
+    var _f = react_1.useState([]), selectedItems = _f[0], setSelectedItems = _f[1];
+    var clearSelectedItems = function () { return setSelectedItems([]); };
+    var addSelectedAttributes = function () {
+        if (selectedItems.length > 0) {
+            onApply(ramda_1.pluck('attrType', selectedItems));
+        }
+    };
+    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 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({
+        items: items,
+        open: isOpen,
+        onSelectFocusedItem: handleSearchOnEnter,
+        selectedItems: selectedItems
+    }), focusIndex = _g.focusIndex, handleKeyDown = _g.handleKeyDown;
+    var focusIndexRef = react_1.useRef(null);
+    focusIndexRef.current = focusIndex;
+    var listHeight = Math.min(MAX_LIST_CONTAINER_HEIGHT, ITEM_HEIGHT * items.length);
+    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 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 }));
+    }, [filter, handleListItemClick, selectedItems]);
+    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 }))));
+};
+MoreAttributesButton.propTypes = {
+    label: prop_types_1.default.string,
+    popupTitle: prop_types_1.default.string,
+    data: prop_types_1.default.array,
+    dense: prop_types_1.default.bool,
+    onApply: prop_types_1.default.func
+};
+exports.default = MoreAttributesButton;

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = void 0;
+var MoreAttributesButton_1 = require("./MoreAttributesButton");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(MoreAttributesButton_1).default; } });

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    moreAttributes: {
+        display: 'flex',
+        paddingBottom: '6px',
+        '&$dense': {
+            padding: 0
+        }
+    },
+    dense: {},
+    popupContainer: {},
+    moreAttributesPopup: {
+        '&$popupContainer': {}
+    },
+    moreButton: {
+        padding: '9px 16px 9px 12px',
+        backgroundColor: 'rgba(98, 2, 238, 0)'
+    },
+    buttonLabel: {
+        fontSize: '14px',
+        fontWeight: 500,
+        lineHeight: '16px'
+    },
+    icon: {
+        fontSize: '18px',
+        marginRight: '8px'
+    }
+});

package/components/attributes/editMode/NestedAttribute/NestedAttribute.js

@@ -0,0 +1,45 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ComplexAttribute_1 = __importDefault(require("../ComplexAttribute/ComplexAttribute"));
+var NestedAttribute = function (props) {
+    var attributeValue = props.attributeValue, attributeType = props.attributeType;
+    var label = mdm_sdk_1.evaluateDeepEntityLabel(attributeValue, attributeType.dataLabelPattern);
+    return (react_1.default.createElement(ComplexAttribute_1.default, __assign({ label: mdm_sdk_1.getLabel(label), attributeTypesList: attributeType.attributes || attributeType.analyticsAttributes }, props)));
+};
+NestedAttribute.propTypes = mdm_sdk_1.NestedAttributeType;
+exports.default = react_1.memo(NestedAttribute);

package/components/attributes/editMode/ReferenceAttribute/ReferenceAttribute.js

@@ -0,0 +1,152 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var ComplexAttribute_1 = __importDefault(require("../ComplexAttribute/ComplexAttribute"));
+var EntitySelector_1 = __importDefault(require("../EntitySelector/EntitySelector"));
+var index_1 = require("../../../index");
+var styles_1 = require("./styles");
+var ReferenceAttribute = function (props) {
+    var _a;
+    var styles = styles_1.useStyles();
+    var modifiedEntity = props.modifiedEntity, metadata = props.metadata, globalSearchRequestOptions = props.globalSearchRequestOptions, onDeleteModifiedEntity = props.onDeleteModifiedEntity, onUpdateModifiedEntity = props.onUpdateModifiedEntity, onDeactivateError = props.onDeactivateError, ownProps = __rest(props, ["modifiedEntity", "metadata", "globalSearchRequestOptions", "onDeleteModifiedEntity", "onUpdateModifiedEntity", "onDeactivateError"]);
+    var attributeValue = ownProps.attributeValue, attributeType = ownProps.attributeType, mode = ownProps.mode, crosswalks = ownProps.crosswalks, errors = ownProps.errors, onChangeAttribute = ownProps.onChangeAttribute;
+    var initialAttributeValue = react_1.useRef(attributeValue);
+    var referencedEntity = mdm_sdk_1.getReferencedEntityFromAttrValue(attributeValue);
+    var referencedRelation = mdm_sdk_1.getReferencedRelationFromAttrValue(attributeValue);
+    var referencedEntityTypeUri = mdm_sdk_1.getReferencedEntityTypeUriFromAttrType(attributeType);
+    var referencedEntityType = mdm_sdk_1.getEntityType(metadata, referencedEntityTypeUri);
+    var label = modifiedEntity
+        ? mdm_sdk_1.evaluateDeepEntityLabel(modifiedEntity, referencedEntityType.dataLabelPattern)
+        : attributeValue.label;
+    var entityTypesUris = react_1.useMemo(function () { return [referencedEntityTypeUri]; }, [referencedEntityTypeUri]);
+    var allCrosswalks = react_1.useMemo(function () { return mdm_sdk_1.addReferencedRelationCrosswalks(crosswalks, referencedRelation); }, [
+        crosswalks,
+        referencedRelation
+    ]);
+    var referencedEntityMissedError = react_1.useMemo(function () { return mdm_sdk_1.getReferencedEntityActiveError(attributeValue, errors); }, [
+        attributeValue,
+        errors
+    ]);
+    var selectedEntity = react_1.useMemo(function () {
+        return referencedEntity && {
+            entityUri: mdm_sdk_1.getReferencedEntityUri(referencedEntity),
+            entityType: mdm_sdk_1.getReferencedEntityTypeUri(referencedEntity),
+            entityLabel: attributeValue.label
+        };
+    }, [referencedEntity, attributeValue.label]);
+    var editableAttrTypes = react_1.useMemo(function () {
+        return mdm_sdk_1.getReferencedRelationAttrTypesUris(attributeType)
+            .map(function (attrTypeUri) { return mdm_sdk_1.findAttributeTypeByUri(metadata, attrTypeUri); })
+            .filter(ramda_1.identity);
+    }, [attributeType, metadata]);
+    var newEntityAttrTypesSelectionStrategy = react_1.useCallback(function (entityType) { return mdm_sdk_1.referencedEntityAttributeTypesSelectionStrategy(attributeType, entityType); }, [attributeType]);
+    var onChangeEntity = react_1.useCallback(function (entity) {
+        if (modifiedEntity) {
+            onDeleteModifiedEntity(modifiedEntity.uri);
+        }
+        var initialAttrValue = initialAttributeValue.current;
+        var isInitialEntity = !ramda_1.isEmpty(entity) && entity.uri === mdm_sdk_1.getReferencedEntityUriFromAttrValue(initialAttrValue);
+        var modifiedValue = __assign(__assign({}, attributeValue), { label: entity.label, refEntity: isInitialEntity ? initialAttrValue.refEntity : mdm_sdk_1.convertReferencedEntityForAttrValue(entity), refRelation: isInitialEntity
+                ? initialAttrValue.refRelation
+                : mdm_sdk_1.createReferencedRelationForAttrValue(attributeValue) });
+        onChangeAttribute({ value: modifiedValue, attributeType: attributeType, uri: attributeValue.uri });
+        if (referencedEntityMissedError) {
+            onDeactivateError(mdm_sdk_1.getErrorId(referencedEntityMissedError));
+        }
+    }, [
+        attributeValue,
+        attributeType,
+        modifiedEntity,
+        onChangeAttribute,
+        onDeleteModifiedEntity,
+        onDeactivateError,
+        referencedEntityMissedError
+    ]);
+    var onCreateEntity = react_1.useCallback(function (entityTypeUri, initValue) {
+        var newEntityAttrTypes = ramda_1.pipe(newEntityAttrTypesSelectionStrategy, mdm_sdk_1.getCreatableAttributeTypes(mode))(referencedEntityType);
+        var newEntity = mdm_sdk_1.createTemporaryEntity({
+            entityTypeUri: entityTypeUri,
+            initValue: initValue,
+            attributeTypes: newEntityAttrTypes,
+            metadata: metadata,
+            mode: mode
+        });
+        onChangeEntity(newEntity);
+        onUpdateModifiedEntity(newEntity);
+    }, [
+        newEntityAttrTypesSelectionStrategy,
+        mode,
+        referencedEntityType,
+        metadata,
+        onChangeEntity,
+        onUpdateModifiedEntity
+    ]);
+    var canChangeReferencedEntity = react_1.useMemo(function () {
+        return mdm_sdk_1.checkCanEditAttribute({
+            attributeType: attributeType,
+            attributeValue: attributeValue,
+            mode: mode,
+            isReltioCrosswalk: mdm_sdk_1.isReltioCrosswalk(crosswalks, attributeValue)
+        });
+    }, [attributeType, attributeValue, mode, crosswalks]);
+    var canCreateReferencedEntity = react_1.useMemo(function () { return mdm_sdk_1.checkMetadataForCreate(mode, referencedEntityType); }, [
+        mode,
+        referencedEntityType
+    ]);
+    var errorMessage = mdm_sdk_1.getErrorMessage(referencedEntityMissedError);
+    return (react_1.default.createElement(ComplexAttribute_1.default, __assign({}, ownProps, { label: mdm_sdk_1.getLabel(label), attributeTypesList: editableAttrTypes, crosswalks: allCrosswalks, metadata: metadata }),
+        react_1.default.createElement(index_1.ErrorWrapper, { errorMessage: errorMessage },
+            react_1.default.createElement(EntitySelector_1.default, { className: classnames_1.default(styles.item, (_a = {},
+                    _a[styles.dense] = errorMessage || (selectedEntity && mdm_sdk_1.isTempUri(selectedEntity.entityUri)),
+                    _a)), entity: selectedEntity || {}, entityTypesUris: entityTypesUris, max: 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: canChangeReferencedEntity ? onChangeEntity : undefined, onCreate: canCreateReferencedEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: newEntityAttrTypesSelectionStrategy }))));
+};
+ReferenceAttribute.propTypes = __assign(__assign({}, mdm_sdk_1.ReferenceAttributeType), { modifiedEntity: mdm_sdk_1.EntityType, metadata: mdm_sdk_1.MetadataType, globalSearchRequestOptions: prop_types_1.default.object, onDeleteModifiedEntity: prop_types_1.default.func, onUpdateModifiedEntity: prop_types_1.default.func, onDeactivateError: prop_types_1.default.func });
+exports.default = react_1.memo(ReferenceAttribute);

package/components/attributes/editMode/ReferenceAttribute/index.js

@@ -0,0 +1,44 @@
+"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.ReferenceAttribute = void 0;
+var react_redux_1 = require("react-redux");
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var ReferenceAttribute_1 = __importDefault(require("./ReferenceAttribute"));
+exports.ReferenceAttribute = ReferenceAttribute_1.default;
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mapStateToProps = function (state, ownProps) {
+    var entityUri = mdm_sdk_1.getReferencedEntityUriFromAttrValue(ownProps.attributeValue);
+    return {
+        modifiedEntity: mdm_sdk_1.isTempUri(entityUri) ? mdm_module_1.default.selectors.getModifiedEntity(state, entityUri) : null,
+        metadata: mdm_module_1.default.selectors.getMetadata(state),
+        globalSearchRequestOptions: mdm_module_1.default.selectors.getGlobalSearchRequestOptions(state, ['ovOnly'])
+    };
+};
+var mapDispatchToProps = {
+    onDeleteModifiedEntity: mdm_module_1.profile.modifiedEntities.actions.entityDeleted,
+    onUpdateModifiedEntity: mdm_module_1.profile.modifiedEntities.actions.entityCreated,
+    onDeactivateError: mdm_module_1.profile.errors.actions.errorDeactivated
+};
+exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(ReferenceAttribute_1.default);

package/components/attributes/editMode/ReferenceAttribute/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    item: {
+        marginBottom: '20px'
+    },
+    dense: {
+        marginBottom: 0
+    }
+});

package/components/attributes/editMode/RelationTypeSelector/RelationTypeSelector.js

@@ -0,0 +1,72 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var prop_types_1 = __importDefault(require("prop-types"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var ramda_1 = require("ramda");
+var RelationOption_1 = __importDefault(require("./components/RelationOption"));
+var DropDownSelector_1 = __importDefault(require("../../../DropDownSelector/DropDownSelector"));
+var RelationTypeSelector = function (_a) {
+    var _b = _a.value, value = _b === void 0 ? {} : _b, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.onChange, onChange = _d === void 0 ? ramda_1.identity : _d, TextFieldProps = _a.TextFieldProps, otherProps = __rest(_a, ["value", "options", "onChange", "TextFieldProps"]);
+    var textFieldProps = react_1.useMemo(function () {
+        var _a;
+        return (__assign(__assign({}, ramda_1.defaultTo({}, TextFieldProps)), (_a = {}, _a['data-reltio-id'] = 'relation-type-selector', _a)));
+    }, [TextFieldProps]);
+    return (react_1.default.createElement(DropDownSelector_1.default, __assign({ value: value, options: options, onChange: onChange, label: ui_i18n_1.default.text('Select relationship type '), components: { Option: RelationOption_1.default }, TextFieldProps: textFieldProps }, otherProps)));
+};
+var ValueType = prop_types_1.default.shape({
+    label: prop_types_1.default.string.isRequired,
+    value: prop_types_1.default.string.isRequired,
+    startObject: prop_types_1.default.object,
+    endObject: prop_types_1.default.object
+});
+RelationTypeSelector.propTypes = {
+    value: ValueType,
+    options: prop_types_1.default.arrayOf(ValueType),
+    onChange: prop_types_1.default.func
+};
+exports.default = RelationTypeSelector;