@reltio/components 1.4.882 → 1.4.886

package/cjs/components/RelationEditor/RelationEditor.d.ts

@@ -0,0 +1,31 @@
+export default RelationEditor;
+declare function RelationEditor({ connection, modifiedEntity, allModifiedEntities, dispatch, config, mode, metadata, globalSearchRequestOptions, error }: {
+    connection: any;
+    modifiedEntity: any;
+    allModifiedEntities: any;
+    dispatch: any;
+    config: any;
+    mode: any;
+    metadata: any;
+    globalSearchRequestOptions: any;
+    error: any;
+}): JSX.Element;
+declare namespace RelationEditor {
+    namespace propTypes {
+        export { ConnectionType as connection };
+        export { EntityType as modifiedEntity };
+        export const allModifiedEntities: PropTypes.Requireable<object>;
+        export const dispatch: PropTypes.Requireable<(...args: any[]) => any>;
+        export { RelationsConfigType as config };
+        export const mode: PropTypes.Requireable<string>;
+        export { MetadataType as metadata };
+        export const globalSearchRequestOptions: PropTypes.Requireable<object>;
+        export { AttributeErrorType as error };
+    }
+}
+import { ConnectionType } from "@reltio/mdm-sdk/src/constants";
+import { EntityType } from "@reltio/mdm-sdk/src/constants";
+import PropTypes from "prop-types";
+import { RelationsConfigType } from "@reltio/mdm-sdk/src/constants";
+import { MetadataType } from "@reltio/mdm-sdk/src/constants";
+import { AttributeErrorType } from "@reltio/mdm-sdk/src/constants";

package/cjs/components/RelationEditor/RelationEditor.js

@@ -0,0 +1,175 @@
+"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 prop_types_1 = __importDefault(require("prop-types"));
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
+var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var classnames_1 = __importDefault(require("classnames"));
+var ramda_1 = require("ramda");
+var styles_1 = require("./styles");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var mdm_module_1 = require("@reltio/mdm-module");
+var Divider_1 = __importDefault(require("@material-ui/core/Divider"));
+var ConnectionRelationTypeSelector_1 = __importDefault(require("../ConnectionRelationTypeSelector/ConnectionRelationTypeSelector"));
+var ErrorWrapper_1 = __importDefault(require("../ErrorWrapper/ErrorWrapper"));
+var EntitySelector_1 = __importDefault(require("../attributes/editMode/EntitySelector/EntitySelector"));
+var AttributesList_1 = __importDefault(require("../attributes/editMode/AttributesList"));
+var areRelatedEntitiesChanged = function (initial, actual) {
+    return initial.length !== actual.length || initial.some(function (_, i) { return initial[i] !== actual[i]; });
+};
+var RelationEditor = function (_a) {
+    var _b;
+    var connection = _a.connection, modifiedEntity = _a.modifiedEntity, allModifiedEntities = _a.allModifiedEntities, dispatch = _a.dispatch, config = _a.config, mode = _a.mode, metadata = _a.metadata, globalSearchRequestOptions = _a.globalSearchRequestOptions, error = _a.error;
+    var _c = connection.relation, relationUri = _c.relationUri, relationType = _c.relationType, direction = _c.direction;
+    var isNew = connection.isNew;
+    var styles = styles_1.useStyles();
+    var _d = react_1.useMemo(function () { return mdm_sdk_1.getInOutRelations({ config: config, direction: direction, relationType: relationType, mode: mode, metadata: metadata }); }, [config, direction, relationType, mode, metadata]), _e = _d.inRelations, inRelationTypes = _e === void 0 ? [] : _e, _f = _d.outRelations, outRelationTypes = _f === void 0 ? [] : _f;
+    var firstLevelRelationAttrTypes = react_1.useMemo(function () { return mdm_sdk_1.getRelationAttributesList(metadata, relationType); }, [
+        relationType,
+        metadata
+    ]);
+    var attributeListEntity = react_1.useMemo(function () { return (__assign({ attributes: __assign({}, mdm_module_1.profile.relations.selectors.getRelationAttributesFromConnection(connection)) }, mdm_sdk_1.getActivenessAttributes(connection.relation))); }, [connection]);
+    var initialConnection = react_1.useRef(connection);
+    var initialModifiedEntity = react_1.useRef(modifiedEntity);
+    var relatedTempEntities = react_1.useMemo(function () { return mdm_sdk_1.findRelatedTemporaryEntities(allModifiedEntities, modifiedEntity); }, [
+        allModifiedEntities,
+        modifiedEntity
+    ]);
+    var relatedTempEntitiesUrisHistory = react_1.useRef([]);
+    react_1.useEffect(function () {
+        relatedTempEntitiesUrisHistory.current = ramda_1.pipe(ramda_1.concat(relatedTempEntities.map(ramda_1.prop('uri'))), ramda_1.uniq)(relatedTempEntitiesUrisHistory.current);
+    }, [relatedTempEntities]);
+    var initialRelatedTempEntities = react_1.useRef(relatedTempEntities);
+    var defaultRelationType = mdm_sdk_1.getDefaultRelationTypeObject(inRelationTypes, outRelationTypes);
+    var hasChanges = initialConnection.current !== connection ||
+        initialModifiedEntity.current !== modifiedEntity ||
+        areRelatedEntitiesChanged(initialRelatedTempEntities.current, relatedTempEntities) ||
+        (connection.isNew && !mdm_sdk_1.isEmptyValue(ramda_1.path(['relation', 'object', 'attributes'], connection)));
+    var applyAction = isNew ? mdm_module_1.profile.relations.actions.addRelation : mdm_module_1.profile.relations.actions.editRelation;
+    var onRelationTypeChange = react_1.useCallback(ramda_1.pipe(mdm_module_1.profile.relations.actions.setRelationType(config.id, relationUri), dispatch), [config, relationUri, dispatch]);
+    var handleClose = react_1.useCallback(function () { return ramda_1.pipe(mdm_module_1.profile.relations.actions.closeRelationEditor, dispatch)(config.id, relationUri); }, [config, relationUri, dispatch]);
+    var updateModifiedEntityLabel = react_1.useCallback(function (connection) {
+        if (modifiedEntity) {
+            var entityType = mdm_sdk_1.getEntityType(metadata, modifiedEntity.type);
+            return mdm_sdk_1.updateConnectionEntityLabel(entityType, modifiedEntity, connection);
+        }
+        return connection;
+    }, [modifiedEntity, metadata]);
+    var setModifiedEntity = react_1.useCallback(function (entity) { return dispatch(mdm_module_1.profile.modifiedEntities.actions.entityCreated(entity)); }, [dispatch]);
+    var deleteModifiedEntity = react_1.useCallback(function (entityUri) { return dispatch(mdm_module_1.profile.modifiedEntities.actions.entityDeleted(entityUri)); }, [dispatch]);
+    var onChangeEntity = react_1.useCallback(function (entity) {
+        if (modifiedEntity) {
+            deleteModifiedEntity(modifiedEntity.uri);
+        }
+        dispatch(mdm_module_1.profile.relations.actions.setRelationEntity(config.id, relationUri, entity));
+        if (error) {
+            dispatch(mdm_module_1.profile.errors.actions.errorDeactivated(mdm_sdk_1.getErrorId(error)));
+        }
+    }, [config.id, relationUri, dispatch, modifiedEntity, deleteModifiedEntity, error]);
+    var validate = react_1.useCallback(function () {
+        var errors = mdm_sdk_1.validateConnection(metadata, allModifiedEntities, connection);
+        dispatch(mdm_module_1.profile.errors.actions.errorsSet(errors));
+        return errors.length === 0;
+    }, [connection, metadata, allModifiedEntities, dispatch]);
+    var resetErrors = react_1.useCallback(function () { return dispatch(mdm_module_1.profile.errors.actions.errorsSet([])); }, [dispatch]);
+    var onApply = react_1.useCallback(ramda_1.pipe(ramda_1.always(connection), ramda_1.when(validate, ramda_1.pipe(mdm_sdk_1.omitMarks, updateModifiedEntityLabel, applyAction(config.id), dispatch, ramda_1.always(ramda_1.differenceWith(ramda_1.equals, relatedTempEntitiesUrisHistory.current, relatedTempEntities.map(ramda_1.prop('uri')))), ramda_1.forEach(deleteModifiedEntity), handleClose))), [connection, config, dispatch, updateModifiedEntityLabel, validate, relatedTempEntities]);
+    var onCancel = react_1.useCallback(function () {
+        var initialEntity = initialModifiedEntity.current;
+        if (modifiedEntity !== initialEntity) {
+            if (initialEntity) {
+                setModifiedEntity(initialEntity);
+                if (modifiedEntity && modifiedEntity.uri !== initialEntity.uri) {
+                    deleteModifiedEntity(modifiedEntity.uri);
+                }
+            }
+            else {
+                deleteModifiedEntity(modifiedEntity.uri);
+            }
+        }
+        var initialTempEntities = initialRelatedTempEntities.current;
+        var entitiesUrisToDelete = ramda_1.differenceWith(ramda_1.equals, relatedTempEntitiesUrisHistory.current, initialTempEntities.map(ramda_1.prop('uri')));
+        entitiesUrisToDelete.forEach(deleteModifiedEntity);
+        initialTempEntities.forEach(setModifiedEntity);
+        resetErrors();
+        handleClose();
+    }, [handleClose, setModifiedEntity, deleteModifiedEntity, resetErrors, modifiedEntity]);
+    var onAddAttributes = react_1.useCallback(function (params) {
+        return ramda_1.pipe(mdm_module_1.profile.actions.addAttributes, dispatch)(params.map(function (param) { return (__assign(__assign({}, param), { viewId: config.id })); }));
+    }, [config.id, dispatch]);
+    var onChangeAttribute = react_1.useCallback(function (params) { return ramda_1.pipe(mdm_module_1.profile.actions.modifyAttribute, dispatch)(__assign(__assign({}, params), { viewId: config.id })); }, [config.id, dispatch]);
+    var onDeleteAttribute = react_1.useCallback(function (params) { return ramda_1.pipe(mdm_module_1.profile.actions.removeAttribute, dispatch)(__assign(__assign({}, params), { viewId: config.id })); }, [config.id, dispatch]);
+    var onCreateEntity = react_1.useCallback(function (entityTypeUri, initValue) {
+        var entityType = mdm_sdk_1.getEntityType(metadata, entityTypeUri);
+        var newEntityAttrTypes = ramda_1.pipe(mdm_sdk_1.relationEditorAttributeTypesSelectionStrategy, mdm_sdk_1.getCreatableAttributeTypes(mode))(entityType);
+        var newEntity = mdm_sdk_1.createTemporaryEntity({
+            entityTypeUri: entityTypeUri,
+            initValue: initValue,
+            attributeTypes: newEntityAttrTypes,
+            metadata: metadata,
+            mode: mode
+        });
+        onChangeEntity(newEntity);
+        setModifiedEntity(newEntity);
+    }, [setModifiedEntity, onChangeEntity, mode, metadata]);
+    var errorMessage = mdm_sdk_1.getErrorMessage(error);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: styles.editor },
+            react_1.default.createElement(Typography_1.default, { className: styles.title }, isNew ? ui_i18n_1.default.text('Add new item') : ui_i18n_1.default.text('Edit item')),
+            defaultRelationType === null && (react_1.default.createElement(ConnectionRelationTypeSelector_1.default, { className: styles.item, relation: connection.relation, inRelationTypes: inRelationTypes, outRelationTypes: outRelationTypes, onChange: onRelationTypeChange })),
+            Boolean(relationType) && (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: errorMessage },
+                    react_1.default.createElement(EntitySelector_1.default, { className: classnames_1.default(styles.item, (_b = {},
+                            _b[styles.dense] = errorMessage || (connection.entity && mdm_sdk_1.isTempUri(connection.entity.entityUri)),
+                            _b)), entity: connection.entity || {}, entityTypesUris: config.content.entityTypes || [], max: config.max || 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, onChange: onChangeEntity, onCreate: onCreateEntity, metadata: metadata, attributeTypesSelectionStrategy: mdm_sdk_1.relationEditorAttributeTypesSelectionStrategy })),
+                react_1.default.createElement(AttributesList_1.default, { className: styles.item, attrTypes: firstLevelRelationAttrTypes, entity: attributeListEntity, showEmptyEditors: true, crosswalks: connection.crosswalks, mode: mode, parentUri: relationUri, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })))),
+        react_1.default.createElement("div", { className: styles.actionButtons },
+            react_1.default.createElement(Button_1.default, { onClick: onCancel }, ui_i18n_1.default.text('Cancel')),
+            react_1.default.createElement(Button_1.default, { color: "primary", disabled: !hasChanges, onClick: onApply }, ui_i18n_1.default.text('Apply'))),
+        react_1.default.createElement(Divider_1.default, null)));
+};
+RelationEditor.propTypes = {
+    connection: mdm_sdk_1.ConnectionType,
+    modifiedEntity: mdm_sdk_1.EntityType,
+    allModifiedEntities: prop_types_1.default.object,
+    dispatch: prop_types_1.default.func,
+    config: mdm_sdk_1.RelationsConfigType,
+    mode: prop_types_1.default.string,
+    metadata: mdm_sdk_1.MetadataType,
+    globalSearchRequestOptions: prop_types_1.default.object,
+    error: mdm_sdk_1.AttributeErrorType
+};
+exports.default = RelationEditor;

package/cjs/components/RelationEditor/index.d.ts

@@ -0,0 +1,142 @@
+export { RelationEditor };
+declare var _default: import("react-redux").ConnectedComponent<{
+    ({ connection, modifiedEntity, allModifiedEntities, dispatch, config, mode, metadata, globalSearchRequestOptions, error }: {
+        connection: any;
+        modifiedEntity: any;
+        allModifiedEntities: any;
+        dispatch: any;
+        config: any;
+        mode: any;
+        metadata: any;
+        globalSearchRequestOptions: any;
+        error: any;
+    }): JSX.Element;
+    propTypes: {
+        connection: import("prop-types").Requireable<import("prop-types").InferProps<{
+            entity: import("prop-types").Requireable<import("prop-types").InferProps<{
+                entityUri: import("prop-types").Requireable<string>;
+                entityType: import("prop-types").Requireable<string>;
+                entityLabel: import("prop-types").Requireable<string>;
+                object: import("prop-types").Requireable<import("prop-types").InferProps<{
+                    uri: import("prop-types").Requireable<string>;
+                    type: import("prop-types").Requireable<string>;
+                }>>;
+            }>>;
+            relation: import("prop-types").Requireable<import("prop-types").InferProps<{
+                relationUri: import("prop-types").Requireable<string>;
+                relationType: import("prop-types").Requireable<string>;
+                relationLabel: import("prop-types").Requireable<string>;
+                direction: import("prop-types").Requireable<string>;
+                object: import("prop-types").Requireable<import("prop-types").InferProps<{
+                    uri: import("prop-types").Requireable<string>;
+                    type: import("prop-types").Requireable<string>;
+                }>>;
+            }>>;
+        }>>;
+        modifiedEntity: import("prop-types").Requireable<import("prop-types").InferProps<{
+            uri: import("prop-types").Requireable<string>;
+            type: import("prop-types").Requireable<string>;
+        }>>;
+        allModifiedEntities: import("prop-types").Requireable<object>;
+        dispatch: import("prop-types").Requireable<(...args: any[]) => any>;
+        config: import("prop-types").Requireable<import("prop-types").InferProps<{
+            id: import("prop-types").Requireable<string>;
+            content: import("prop-types").Requireable<import("prop-types").InferProps<{
+                inRelations: import("prop-types").Requireable<(string | object)[]>;
+                outRelations: import("prop-types").Requireable<(string | object)[]>;
+                groups: import("prop-types").Requireable<string[]>;
+                entityTypes: import("prop-types").Requireable<string[]>;
+                nextEntry: import("prop-types").Requireable<object>;
+            }>>;
+            allowOnlyCreateNew: import("prop-types").Requireable<boolean>;
+            sortColumn: import("prop-types").Requireable<string>;
+            sortOrder: import("prop-types").Requireable<string>;
+            'text-empty': import("prop-types").Requireable<string>;
+            max: import("prop-types").Requireable<number>;
+            icon: import("prop-types").Requireable<string>;
+            caption: import("prop-types").Requireable<string>;
+            canCreate: import("prop-types").Requireable<boolean>;
+            canRead: import("prop-types").Requireable<boolean>;
+            canUpdate: import("prop-types").Requireable<boolean>;
+            canDelete: import("prop-types").Requireable<boolean>;
+            editingEnabled: import("prop-types").Requireable<boolean>;
+        }>>;
+        mode: import("prop-types").Requireable<string>;
+        metadata: import("prop-types").Requireable<import("prop-types").InferProps<{
+            uri: import("prop-types").Requireable<string>;
+            description: import("prop-types").Requireable<string>;
+            label: import("prop-types").Requireable<string>;
+            schemaVersion: import("prop-types").Requireable<string>;
+            entityTypes: import("prop-types").Requireable<import("prop-types").InferProps<{
+                typeColor: import("prop-types").Requireable<string>;
+                typeIcon: import("prop-types").Requireable<string>;
+                typeImage: import("prop-types").Requireable<string>;
+                label: import("prop-types").Requireable<string>;
+                uri: import("prop-types").Requireable<string>;
+                attributes: import("prop-types").Requireable<import("prop-types").InferProps<{
+                    label: import("prop-types").Requireable<string>;
+                    name: import("prop-types").Requireable<string>;
+                    description: import("prop-types").Requireable<string>;
+                    type: import("prop-types").Requireable<string>;
+                    hidden: import("prop-types").Requireable<boolean>;
+                    faceted: import("prop-types").Requireable<boolean>;
+                    searchable: import("prop-types").Requireable<boolean>;
+                    uri: import("prop-types").Requireable<string>;
+                    access: import("prop-types").Requireable<string[]>;
+                    cardinality: import("prop-types").Requireable<import("prop-types").InferProps<{
+                        minValue: import("prop-types").Requireable<number>;
+                        maxValue: import("prop-types").Requireable<number>;
+                    }>>;
+                }>[]>;
+            }>[]>;
+            roles: import("prop-types").Requireable<object[]>;
+            groupTypes: import("prop-types").Requireable<object[]>;
+            relationTypes: import("prop-types").Requireable<import("prop-types").InferProps<{
+                label: import("prop-types").Requireable<string>;
+                uri: import("prop-types").Requireable<string>;
+                typeColor: import("prop-types").Requireable<string>;
+                direction: import("prop-types").Requireable<string>;
+                startObject: import("prop-types").Requireable<object>;
+                endObject: import("prop-types").Requireable<object>;
+            }>[]>;
+            graphTypes: import("prop-types").Requireable<import("prop-types").InferProps<{
+                uri: import("prop-types").Requireable<string>;
+                label: import("prop-types").Requireable<string>;
+                extendsTypeUri: import("prop-types").Requireable<string>;
+                relationshipTypeURIs: import("prop-types").Requireable<string[]>;
+            }>[]>;
+            interactionTypes: import("prop-types").Requireable<import("prop-types").InferProps<{
+                uri: import("prop-types").Requireable<string>;
+                label: import("prop-types").Requireable<string>;
+                memberTypes: import("prop-types").Requireable<any[]>;
+                extendsTypeUri: import("prop-types").Requireable<string>;
+                attributes: import("prop-types").Requireable<import("prop-types").InferProps<{
+                    label: import("prop-types").Requireable<string>;
+                    name: import("prop-types").Requireable<string>;
+                    description: import("prop-types").Requireable<string>;
+                    type: import("prop-types").Requireable<string>;
+                    hidden: import("prop-types").Requireable<boolean>;
+                    faceted: import("prop-types").Requireable<boolean>;
+                    searchable: import("prop-types").Requireable<boolean>;
+                    uri: import("prop-types").Requireable<string>;
+                    access: import("prop-types").Requireable<string[]>;
+                    cardinality: import("prop-types").Requireable<import("prop-types").InferProps<{
+                        minValue: import("prop-types").Requireable<number>;
+                        maxValue: import("prop-types").Requireable<number>;
+                    }>>;
+                }>[]>;
+            }>[]>;
+            sources: import("prop-types").Requireable<object[]>;
+        }>>;
+        globalSearchRequestOptions: import("prop-types").Requireable<object>;
+        error: import("prop-types").Requireable<import("prop-types").InferProps<{
+            type: import("prop-types").Validator<import("@reltio/mdm-sdk").ErrorType>;
+            attributeTypeUri: import("prop-types").Validator<string>;
+            parentUri: import("prop-types").Validator<string>;
+            uri: import("prop-types").Requireable<string>;
+            message: import("prop-types").Requireable<string>;
+        }>>;
+    };
+}, any>;
+export default _default;
+import RelationEditor from "./RelationEditor";

package/cjs/components/RelationEditor/index.js

@@ -0,0 +1,42 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RelationEditor = void 0;
+var RelationEditor_1 = __importDefault(require("./RelationEditor"));
+exports.RelationEditor = RelationEditor_1.default;
+var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var react_redux_1 = require("react-redux");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var getConnectionEntityUri = function (props) { return mdm_module_1.profile.relations.selectors.getEntityUriFromConnection(props.connection); };
+var mapStateToProps = function (state, ownProps) {
+    var entityUri = getConnectionEntityUri(ownProps);
+    var isTempEntity = mdm_sdk_1.isTempUri(entityUri);
+    return {
+        modifiedEntity: isTempEntity ? mdm_module_1.default.selectors.getModifiedEntity(state, entityUri) : null,
+        allModifiedEntities: isTempEntity ? mdm_module_1.default.selectors.getModifiedEntities(state) : null,
+        globalSearchRequestOptions: mdm_module_1.default.selectors.getGlobalSearchRequestOptions(state, ['ovOnly']),
+        error: mdm_sdk_1.getRelationEditorActiveError(ownProps.connection, mdm_module_1.default.selectors.getProfileErrors(state))
+    };
+};
+exports.default = react_redux_1.connect(mapStateToProps)(RelationEditor_1.default);

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

@@ -0,0 +1 @@
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"title" | "item" | "dense" | "editor" | "actionButtons">;

package/cjs/components/RelationEditor/styles.js

@@ -0,0 +1,36 @@
+"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({
+    editor: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '0 24px 5px'
+    },
+    title: {
+        color: 'rgba(0, 0, 0, 0.6)',
+        fontSize: '16px',
+        letterSpacing: '0.15px',
+        lineHeight: '24px',
+        margin: '17px 0 24px'
+    },
+    item: {
+        marginBottom: '20px'
+    },
+    dense: {
+        marginBottom: 0
+    },
+    actionButtons: {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        margin: '0 8px 10px',
+        '& > button': {
+            fontSize: '14px',
+            lineHeight: '16px',
+            marginLeft: '8px',
+            padding: '10px 8px',
+            backgroundColor: 'rgba(98, 2, 238, 0)'
+        }
+    }
+});

package/cjs/components/attributes/editMode/AttributesPager/SpecialRenderer.js

@@ -51,7 +51,7 @@ var Title_1 = __importDefault(require("../../../Title/Title"));
 var CardinalityMessage_1 = __importDefault(require("./CardinalityMessage"));
 var ErrorMessage_1 = __importDefault(require("../../../ErrorWrapper/ErrorMessage"));
 var Attribute_1 = __importDefault(require("../AttributesFactory/Attribute"));
-var Tags_1 = __importDefault(require("../../readMode/SpecialAttributes/Tags")); //TODO: should be edit mode
+var Tags_1 = __importDefault(require("../Tags"));
 var Roles_1 = __importDefault(require("../../readMode/SpecialAttributes/Roles")); //TODO: should be edit mode
 var styles_1 = require("./styles");
 var SpecialRenderer = function (_a) {

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    className?: string;
+    values: string[];
+};
+declare const Tags: ({ className, values }: Props) => JSX.Element;
+export default Tags;

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

@@ -0,0 +1,62 @@
+"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 mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var TypeaheadEditor_1 = __importDefault(require("../../../editors/TypeaheadEditor/TypeaheadEditor"));
+var filtersWithSearch = function (searchQuery) { return [
+    {
+        filter: 'containsWordStartingWith',
+        fieldName: 'tags',
+        values: [searchQuery]
+    }
+]; };
+var getQuery = function (searchQuery) {
+    return searchQuery ? "?filter=" + mdm_sdk_1.buildFilterQueryString()(filtersWithSearch(searchQuery)) : '';
+};
+var body = [
+    {
+        fieldName: 'tags',
+        orderType: 'reversedCount'
+    }
+];
+var getSuggestions = function (searchQuery) {
+    return mdm_sdk_1.getFacets({ query: getQuery(searchQuery), body: body }).then(function (response) { return Object.keys(response.tags); });
+};
+var Tags = function (_a) {
+    var className = _a.className, values = _a.values;
+    var dispatch = react_redux_1.useDispatch();
+    var entityUri = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntityUri);
+    var onChange = react_1.useCallback(function (tags) {
+        return dispatch(mdm_module_1.profile.actions.modifyAttribute({
+            value: tags,
+            attributeType: mdm_sdk_1.EntityAttrTypes.tags,
+            uri: entityUri
+        }));
+    }, [dispatch, entityUri]);
+    return (react_1.default.createElement(TypeaheadEditor_1.default, { fullWidth: true, multiple: true, variant: "filled", className: className, value: values, onChange: onChange, getSuggestions: getSuggestions }));
+};
+exports.default = Tags;

package/cjs/components/attributes/editMode/Tags/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Tags';

package/cjs/components/attributes/editMode/Tags/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 Tags_1 = require("./Tags");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(Tags_1).default; } });

package/cjs/components/editors/TypeaheadEditor/TypeaheadEditor.d.ts

@@ -6,7 +6,7 @@ declare function TypeaheadEditor({ value, getSuggestions, onChange, multiple, fu
     onChange: any;
     multiple: any;
     fullWidth: any;
-    InputProps: any;
+    InputProps?: {};
 }): JSX.Element;
 declare namespace TypeaheadEditor {
     namespace propTypes {

package/cjs/components/editors/TypeaheadEditor/TypeaheadEditor.js

@@ -50,6 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_autosuggest_1 = __importDefault(require("react-autosuggest"));
+var react_input_autosize_1 = __importDefault(require("react-input-autosize"));
 var classnames_1 = __importDefault(require("classnames"));
 var TextField_1 = __importDefault(require("@material-ui/core/TextField"));
 var MenuItem_1 = __importDefault(require("@material-ui/core/MenuItem"));
@@ -66,9 +67,9 @@ var ExpandedValueTooltip_1 = __importDefault(require("../../ExpandedValueTooltip
 var ValueChip_1 = __importDefault(require("../../ValueChip/ValueChip"));
 var FETCH_DEBOUNCE_INTERVAL = 300;
 var TypeaheadEditor = function (_a) {
-    var value = _a.value, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, InputProps = _a.InputProps, inputProps = __rest(_a, ["value", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps"]);
-    var _b = react_1.useState([]), suggestions = _b[0], setSuggestions = _b[1];
-    var _c = react_1.useState(false), isPlaceholderVisible = _c[0], setPlaceholderVisibility = _c[1];
+    var value = _a.value, getSuggestions = _a.getSuggestions, onChange = _a.onChange, multiple = _a.multiple, fullWidth = _a.fullWidth, _b = _a.InputProps, InputProps = _b === void 0 ? {} : _b, inputProps = __rest(_a, ["value", "getSuggestions", "onChange", "multiple", "fullWidth", "InputProps"]);
+    var _c = react_1.useState([]), suggestions = _c[0], setSuggestions = _c[1];
+    var _d = react_1.useState(false), isPlaceholderVisible = _d[0], setPlaceholderVisibility = _d[1];
     var inputRef = react_1.useRef();
     var styles = styles_1.useStyles();
     var isFocused = function () { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === document.activeElement; };
@@ -77,8 +78,8 @@ var TypeaheadEditor = function (_a) {
         getSuggestions
     ]);
     value = ramda_1.defaultTo(multiple ? [] : '', value);
-    var _d = react_1.useState(''), currentValue = _d[0], setCurrentValue = _d[1];
-    var _e = react_1.useState(false), hasHighlightedItem = _e[0], setHasHighlightedItem = _e[1];
+    var _e = react_1.useState(''), currentValue = _e[0], setCurrentValue = _e[1];
+    var _f = react_1.useState(false), hasHighlightedItem = _f[0], setHasHighlightedItem = _f[1];
     var onInputChange = function (_a) {
         var newValue = _a.newValue, method = _a.method;
         switch (method) {
@@ -123,7 +124,7 @@ var TypeaheadEditor = function (_a) {
                 underline: classnames_1.default((_b = {}, _b[styles['input__underline']] = mdm_sdk_1.isEmptyValue(value), _b)),
                 input: classnames_1.default(styles['rawInput'], ramda_1.path(['classes', 'input'], InputProps))
             };
-            return multiple ? (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (react_1.default.createElement(ValueChip_1.default, { key: item, label: item, onDelete: function () { return onChange(ramda_1.remove(index, 1, value)); } })); }), classes: __assign({ root: classnames_1.default(styles['multiple-input__input'], ramda_1.path(['classes', 'root'], InputProps)), adornedStart: styles['multiple-input__adornedStart'] }, commonClasses) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: ramda_1.pipe(ramda_1.tap(onInputChange), utils_1.getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: classnames_1.default(styles['input__root'], ramda_1.path(['classes', 'root'], InputProps)) }, commonClasses) }) })));
+            return multiple ? (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (react_1.default.createElement(ValueChip_1.default, { key: item, label: item, onDelete: function () { return onChange(ramda_1.remove(index, 1, value)); } })); }), inputComponent: react_input_autosize_1.default, classes: __assign(__assign({ root: classnames_1.default(styles['multiple-input__input'], ramda_1.path(['classes', 'root'], InputProps)) }, commonClasses), { input: classnames_1.default(styles.autosizeInput, commonClasses.input), adornedStart: styles['multiple-input__adornedStart'] }) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: ramda_1.pipe(ramda_1.tap(onInputChange), utils_1.getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: classnames_1.default(styles['input__root'], ramda_1.path(['classes', 'root'], InputProps)) }, commonClasses) }) })));
         }, renderSuggestionsContainer: function (_a) {
             var children = _a.children, _b = _a.containerProps, ref = _b.ref, restContainerProps = __rest(_b, ["ref"]);
             return (react_1.default.createElement(Popper_1.default, { anchorEl: inputRef.current, open: Boolean(children) || isPlaceholderVisible },

package/cjs/components/editors/TypeaheadEditor/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"typeahead__suggestions-placeholder" | "typeahead__suggestions-container--open" | "typeahead__suggestions-list" | "typeahead__suggestions-menuItem" | "input__root" | "rawInput" | "multiple-input__root" | "multiple-input__input" | "multiple-input__adornedStart" | "input__underline" | "typeahead__suggestions-container" | "menuItem--item">;
+export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"autosizeInput" | "typeahead__suggestions-placeholder" | "typeahead__suggestions-container--open" | "typeahead__suggestions-list" | "typeahead__suggestions-menuItem" | "input__root" | "rawInput" | "multiple-input__root" | "multiple-input__input" | "multiple-input__adornedStart" | "input__underline" | "typeahead__suggestions-container" | "menuItem--item">;

package/cjs/components/editors/TypeaheadEditor/styles.js

@@ -24,6 +24,21 @@ exports.useStyles = styles_1.makeStyles({
         color: 'rgba(0,0,0,0.87)',
         fontSize: '14px'
     },
+    autosizeInput: {
+        width: 'auto',
+        paddingTop: '10px',
+        paddingBottom: '11px',
+        marginLeft: '5px',
+        overflow: 'hidden',
+        '& input': {
+            background: '0px center',
+            border: 0,
+            fontSize: 'inherit',
+            outline: 0,
+            padding: 0,
+            color: 'inherit'
+        }
+    },
     rawInput: {
         height: '19px'
     },

package/cjs/components/index.d.ts

@@ -119,4 +119,5 @@ export { ReltioMap } from './ReltioMap';
 export { default as ErrorMessage } from './ErrorWrapper/ErrorMessage';
 export * from './history';
 export { default as OvIcon } from './attributes/OvIcon';
+export { default as RelationEditor } from './RelationEditor';
 export * from './workflow';