@reltio/components 1.4.881 → 1.4.885

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

package/cjs/components/index.js

@@ -15,7 +15,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.NoResults = exports.NoData = exports.DropDownSelector = exports.DropDownMenuButton = exports.Drawer = exports.DataTypeValue = exports.ConnectionRelationTypeSelector = exports.ConfigureColumnsPopup = exports.MenuWithPopper = exports.DropdownIndicatorWithIconButton = exports.DropdownIndicator = exports.CommentsContainer = exports.ColorBar = exports.CollapseButton = exports.CollaborationItem = exports.ClickAwayProvider = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.ProfileBandNavigation = exports.AvatarWithFallback = exports.AutoSizeList = exports.ReadOnlyAttributesPager = exports.SimpleAttribute = exports.ReferenceAttribute = exports.NestedAttribute = exports.ImageAttributesLine = exports.ReadOnlyAttributesList = exports.ReadOnlyAttributeValuesBlock = exports.EditableAttribute = exports.ReadOnlyAttribute = exports.CardinalityMessage = exports.AttributesPager = exports.SimpleAttributeEditor = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.NestedAttributeEditor = exports.MoreAttributesButton = exports.EntitySelector = exports.EntityCreator = exports.AttributesList = exports.BranchDecorator = exports.AttributesView = exports.AttributeListItem = void 0;
 exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopupPopper = exports.SelectionPopup = exports.useKeyboardNavigation = exports.WhiteSearchInput = exports.SearchInput = exports.ScoreLabel = exports.Score = exports.ResizablePanes = exports.ReltioGridLayout = exports.ReactSortableTreeUtils = exports.ReactSortableTreeHandlers = exports.ReactSortableTree = exports.ReactSelectOptionFilters = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportModes = exports.ImportButton = exports.ImageGalleryDialog = exports.Highlighter = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.FlipCard = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.ErrorWrapper = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.EntityTypesSelector = void 0;
-exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = void 0;
+exports.RelationEditor = exports.OvIcon = exports.ErrorMessage = exports.ReltioMap = exports.ConfirmDeleteDialog = exports.ConfirmationDialog = exports.Marginator = exports.LightArrowTooltip = exports.ArrowExpandButton = exports.ScrollableTabs = exports.ExpandableSearchInput = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = void 0;
 __exportStar(require("./activityLog"), exports);
 var AttributeListItem_1 = require("./AttributeListItem/AttributeListItem");
 Object.defineProperty(exports, "AttributeListItem", { enumerable: true, get: function () { return __importDefault(AttributeListItem_1).default; } });
@@ -255,4 +255,6 @@ Object.defineProperty(exports, "ErrorMessage", { enumerable: true, get: function
 __exportStar(require("./history"), exports);
 var OvIcon_1 = require("./attributes/OvIcon");
 Object.defineProperty(exports, "OvIcon", { enumerable: true, get: function () { return __importDefault(OvIcon_1).default; } });
+var RelationEditor_1 = require("./RelationEditor");
+Object.defineProperty(exports, "RelationEditor", { enumerable: true, get: function () { return __importDefault(RelationEditor_1).default; } });
 __exportStar(require("./workflow"), exports);

package/esm/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/esm/components/RelationEditor/RelationEditor.js

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

package/esm/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/esm/components/RelationEditor/index.js

@@ -0,0 +1,17 @@
+import RelationEditor from './RelationEditor';
+import mdmModule, { profile } from '@reltio/mdm-module';
+import { connect } from 'react-redux';
+import { getRelationEditorActiveError, isTempUri } from '@reltio/mdm-sdk';
+var getConnectionEntityUri = function (props) { return profile.relations.selectors.getEntityUriFromConnection(props.connection); };
+var mapStateToProps = function (state, ownProps) {
+    var entityUri = getConnectionEntityUri(ownProps);
+    var isTempEntity = isTempUri(entityUri);
+    return {
+        modifiedEntity: isTempEntity ? mdmModule.selectors.getModifiedEntity(state, entityUri) : null,
+        allModifiedEntities: isTempEntity ? mdmModule.selectors.getModifiedEntities(state) : null,
+        globalSearchRequestOptions: mdmModule.selectors.getGlobalSearchRequestOptions(state, ['ovOnly']),
+        error: getRelationEditorActiveError(ownProps.connection, mdmModule.selectors.getProfileErrors(state))
+    };
+};
+export { RelationEditor };
+export default connect(mapStateToProps)(RelationEditor);

package/esm/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/esm/components/RelationEditor/styles.js

@@ -0,0 +1,33 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = 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/esm/components/attributes/editMode/AttributesPager/SpecialRenderer.js

@@ -27,7 +27,7 @@ import Title from '../../../Title/Title';
 import Cardinality from './CardinalityMessage';
 import ErrorMessage from '../../../ErrorWrapper/ErrorMessage';
 import Attribute from '../AttributesFactory/Attribute';
-import Tags from '../../readMode/SpecialAttributes/Tags'; //TODO: should be edit mode
+import Tags from '../Tags';
 import Roles from '../../readMode/SpecialAttributes/Roles'; //TODO: should be edit mode
 import { useStyles } from './styles';
 var SpecialRenderer = function (_a) {

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

@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import mdmModule, { profile } from '@reltio/mdm-module';
+import { getFacets, EntityAttrTypes, buildFilterQueryString } from '@reltio/mdm-sdk';
+import TypeaheadEditor from '../../../editors/TypeaheadEditor/TypeaheadEditor';
+var filtersWithSearch = function (searchQuery) { return [
+    {
+        filter: 'containsWordStartingWith',
+        fieldName: 'tags',
+        values: [searchQuery]
+    }
+]; };
+var getQuery = function (searchQuery) {
+    return searchQuery ? "?filter=" + buildFilterQueryString()(filtersWithSearch(searchQuery)) : '';
+};
+var body = [
+    {
+        fieldName: 'tags',
+        orderType: 'reversedCount'
+    }
+];
+var getSuggestions = function (searchQuery) {
+    return 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 = useDispatch();
+    var entityUri = useSelector(mdmModule.selectors.getEntityUri);
+    var onChange = useCallback(function (tags) {
+        return dispatch(profile.actions.modifyAttribute({
+            value: tags,
+            attributeType: EntityAttrTypes.tags,
+            uri: entityUri
+        }));
+    }, [dispatch, entityUri]);
+    return (React.createElement(TypeaheadEditor, { fullWidth: true, multiple: true, variant: "filled", className: className, value: values, onChange: onChange, getSuggestions: getSuggestions }));
+};
+export default Tags;

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

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

package/esm/components/attributes/editMode/Tags/index.js

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

package/esm/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/esm/components/editors/TypeaheadEditor/TypeaheadEditor.js

@@ -26,6 +26,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from) {
     return to;
 };
 import Autosuggest from 'react-autosuggest';
+import AutosizeInput from 'react-input-autosize';
 import classnames from 'classnames';
 import TextField from '@material-ui/core/TextField';
 import MenuItem from '@material-ui/core/MenuItem';
@@ -42,9 +43,9 @@ import ExpandedValueTooltip from '../../ExpandedValueTooltip/ExpandedValueToolti
 import ValueChip from '../../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 = useState([]), suggestions = _b[0], setSuggestions = _b[1];
-    var _c = 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 = useState([]), suggestions = _c[0], setSuggestions = _c[1];
+    var _d = useState(false), isPlaceholderVisible = _d[0], setPlaceholderVisibility = _d[1];
     var inputRef = useRef();
     var styles = useStyles();
     var isFocused = function () { var _a; return ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input')) === document.activeElement; };
@@ -53,8 +54,8 @@ var TypeaheadEditor = function (_a) {
         getSuggestions
     ]);
     value = defaultTo(multiple ? [] : '', value);
-    var _d = useState(''), currentValue = _d[0], setCurrentValue = _d[1];
-    var _e = useState(false), hasHighlightedItem = _e[0], setHasHighlightedItem = _e[1];
+    var _e = useState(''), currentValue = _e[0], setCurrentValue = _e[1];
+    var _f = useState(false), hasHighlightedItem = _f[0], setHasHighlightedItem = _f[1];
     var onInputChange = function (_a) {
         var newValue = _a.newValue, method = _a.method;
         switch (method) {
@@ -99,7 +100,7 @@ var TypeaheadEditor = function (_a) {
                 underline: classnames((_b = {}, _b[styles['input__underline']] = isEmptyValue(value), _b)),
                 input: classnames(styles['rawInput'], path(['classes', 'input'], InputProps))
             };
-            return multiple ? (React.createElement(TextField, __assign({}, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (React.createElement(ValueChip, { key: item, label: item, onDelete: function () { return onChange(remove(index, 1, value)); } })); }), classes: __assign({ root: classnames(styles['multiple-input__input'], path(['classes', 'root'], InputProps)), adornedStart: styles['multiple-input__adornedStart'] }, commonClasses) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (React.createElement(TextField, __assign({}, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: pipe(tap(onInputChange), getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: classnames(styles['input__root'], path(['classes', 'root'], InputProps)) }, commonClasses) }) })));
+            return multiple ? (React.createElement(TextField, __assign({}, otherProps, { ref: inputRef, inputRef: ref, InputProps: __assign(__assign({}, InputProps), { startAdornment: value.map(function (item, index) { return (React.createElement(ValueChip, { key: item, label: item, onDelete: function () { return onChange(remove(index, 1, value)); } })); }), inputComponent: AutosizeInput, classes: __assign(__assign({ root: classnames(styles['multiple-input__input'], path(['classes', 'root'], InputProps)) }, commonClasses), { input: classnames(styles.autosizeInput, commonClasses.input), adornedStart: styles['multiple-input__adornedStart'] }) }), value: currentValue, onChange: onInputChange, classes: { root: styles['multiple-input__root'] } }))) : (React.createElement(TextField, __assign({}, otherProps, { ref: inputRef, inputRef: ref, value: value, onChange: pipe(tap(onInputChange), getValue, onChange), InputProps: __assign(__assign({}, InputProps), { classes: __assign({ root: classnames(styles['input__root'], path(['classes', 'root'], InputProps)) }, commonClasses) }) })));
         }, renderSuggestionsContainer: function (_a) {
             var children = _a.children, _b = _a.containerProps, ref = _b.ref, restContainerProps = __rest(_b, ["ref"]);
             return (React.createElement(Popper, { anchorEl: inputRef.current, open: Boolean(children) || isPlaceholderVisible },

package/esm/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/esm/components/editors/TypeaheadEditor/styles.js

@@ -21,6 +21,21 @@ export var useStyles = 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/esm/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';

package/esm/components/index.js

@@ -118,4 +118,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';

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.881",
+  "version": "1.4.885",
   "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.881",
-    "@reltio/mdm-sdk": "^1.4.881",
+    "@reltio/mdm-module": "^1.4.885",
+    "@reltio/mdm-sdk": "^1.4.885",
     "classnames": "^2.2.5",
     "frontend-collective-react-dnd-scrollzone": "^1.0.2",
     "nanoid": "^2.0.0",