@reltio/components 1.4.882 → 1.4.886

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/esm/components/workflow/cards/GenericWorkflowTaskCard/GenericWorkflowTaskCard.js

@@ -18,7 +18,7 @@ import CollaborationIcon from '../../../../icons/CollaborationIcon';
 var GenericWorkflowTaskCard = function (_a) {
     var _b;
     var task = _a.task, children = _a.children, actions = _a.actions, Icon = _a.Icon;
-    var taskId = task.taskId, dueDate = task.dueDate, priority = task.priority, assignee = task.assignee, createdBy = task.createdBy, createTime = task.createTime, step = task.displayName, processDefinitionDisplayName = task.processDefinitionDisplayName, objectURIs = task.objectURIs, processInstanceComments = task.processInstanceComments, possibleActions = task.possibleActions;
+    var taskId = task.taskId, dueDate = task.dueDate, priority = task.priority, assignee = task.assignee, createdBy = task.createdBy, createTime = task.createTime, step = task.displayName, processDefinitionDisplayName = task.processDefinitionDisplayName, objectURIs = task.objectURIs, processInstanceComments = task.processInstanceComments, possibleActions = task.possibleActions, isTaskOpen = task.isOpen;
     var dcrId = getDCRId(objectURIs);
     var color = useWorkflowColor({ processDefinitionDisplayName: processDefinitionDisplayName });
     var styles = useStyles({ color: color });
@@ -61,16 +61,16 @@ var GenericWorkflowTaskCard = function (_a) {
                                 canViewComments && (processInstanceComments === null || processInstanceComments === void 0 ? void 0 : processInstanceComments.length) > 0 && (React.createElement("div", { className: styles.commentsInfo },
                                     React.createElement(CollaborationIcon, { className: styles.commentsIcon }),
                                     React.createElement("div", { className: styles.infoValue }, processInstanceComments.length)))),
-                            actions || (React.createElement(TaskActions, { taskId: taskId, possibleActions: possibleActions, assignee: assignee })))))),
+                            actions || (React.createElement(TaskActions, { taskId: taskId, possibleActions: possibleActions, assignee: assignee, isTaskOpen: isTaskOpen })))))),
             isExpanded && (React.createElement(LineDecorator, { plain: true },
                 React.createElement("div", { className: styles.controlsBox },
                     React.createElement("div", { className: styles.controlsInRow },
-                        React.createElement(DueDateField, { taskId: taskId, dueDate: dueDate }),
-                        React.createElement(PrioritySelector, { taskId: taskId, priority: priority, className: styles.priority })),
-                    React.createElement(AssigneeSelector, { taskId: taskId, assignee: assignee }))))),
+                        React.createElement(DueDateField, { taskId: taskId, dueDate: dueDate, isTaskOpen: isTaskOpen }),
+                        React.createElement(PrioritySelector, { taskId: taskId, priority: priority, className: styles.priority, isTaskOpen: isTaskOpen })),
+                    React.createElement(AssigneeSelector, { taskId: taskId, assignee: assignee, isTaskOpen: isTaskOpen }))))),
         isExpanded && (React.createElement(React.Fragment, null,
             children,
             canViewComments && (React.createElement("div", { className: styles.comments },
-                React.createElement(WorkflowComments, { taskId: taskId, processInstanceComments: processInstanceComments })))))));
+                React.createElement(WorkflowComments, { taskId: taskId, processInstanceComments: processInstanceComments, isTaskOpen: isTaskOpen })))))));
 };
 export default GenericWorkflowTaskCard;

package/esm/components/workflow/components/AssigneeSelector/AssigneeSelector.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
 import { WorkflowTaskData } from '@reltio/mdm-sdk';
-declare type Props = Pick<WorkflowTaskData, 'taskId' | 'assignee'>;
-declare const AssigneeSelector: ({ taskId, assignee }: Props) => JSX.Element;
+declare type Props = Pick<WorkflowTaskData, 'taskId' | 'assignee'> & {
+    isTaskOpen?: WorkflowTaskData['isOpen'];
+};
+declare const AssigneeSelector: ({ taskId, assignee, isTaskOpen }: Props) => JSX.Element;
 export default AssigneeSelector;

package/esm/components/workflow/components/AssigneeSelector/AssigneeSelector.js

@@ -3,10 +3,11 @@ import i18n from 'ui-i18n';
 import DropDownSelector from '../../../DropDownSelector/DropDownSelector';
 import { useWorkflowAssignee } from '../../hooks/useWorkflowAssignee';
 var AssigneeSelector = function (_a) {
-    var taskId = _a.taskId, assignee = _a.assignee;
+    var taskId = _a.taskId, assignee = _a.assignee, isTaskOpen = _a.isTaskOpen;
     var _b = useWorkflowAssignee({
         taskId: taskId,
-        assignee: assignee
+        assignee: assignee,
+        isOpen: isTaskOpen
     }), currentAssignee = _b.assignee, getAssignees = _b.getAssignees, updateAssignee = _b.updateAssignee, updateRequestIsInProgress = _b.updateRequestIsInProgress, readOnly = _b.readOnly;
     var disabled = updateRequestIsInProgress || readOnly;
     return (React.createElement(DropDownSelector, { isDisabled: disabled, getOptions: getAssignees, onChange: updateAssignee, hideSelectedOptions: false, label: i18n.text('Assigned to'), value: currentAssignee, defaultOptions: true, TextFieldProps: { disabled: disabled }, height: 40 }));

package/esm/components/workflow/components/DueDateField/DueDateField.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { WorkflowTaskData } from '@reltio/mdm-sdk';
 declare type Props = Pick<WorkflowTaskData, 'taskId' | 'dueDate'> & {
+    isTaskOpen?: WorkflowTaskData['isOpen'];
     className?: string;
 };
-declare const DueDateField: ({ taskId, dueDate, className }: Props) => JSX.Element;
+declare const DueDateField: ({ taskId, dueDate, isTaskOpen, className }: Props) => JSX.Element;
 export default DueDateField;

package/esm/components/workflow/components/DueDateField/DueDateField.js

@@ -6,9 +6,13 @@ import { useStyles } from './styles';
 import { DateEditor } from '../../../editors';
 import { useWorkflowDueDate } from '../../hooks/useWorkflowDueDate';
 var DueDateField = function (_a) {
-    var taskId = _a.taskId, dueDate = _a.dueDate, className = _a.className;
+    var taskId = _a.taskId, dueDate = _a.dueDate, isTaskOpen = _a.isTaskOpen, className = _a.className;
     var styles = useStyles();
-    var _b = useWorkflowDueDate({ dueDate: dueDate, taskId: taskId }), updateDueDate = _b.updateDueDate, updateRequestIsInProgress = _b.updateRequestIsInProgress, readOnly = _b.readOnly;
+    var _b = useWorkflowDueDate({
+        dueDate: dueDate,
+        taskId: taskId,
+        isOpen: isTaskOpen
+    }), updateDueDate = _b.updateDueDate, updateRequestIsInProgress = _b.updateRequestIsInProgress, readOnly = _b.readOnly;
     return (React.createElement(DateEditor, { className: classnames(styles.dueDate, className), disabled: updateRequestIsInProgress || readOnly, value: dueDate, label: i18n.text('Due date'), onChange: pipe(function (date) { return date && date.getTime(); }, updateDueDate), margin: "dense", InputProps: { className: styles.dueDateInput }, InputLabelProps: { classes: { root: styles.inputLabel } } }));
 };
 export default DueDateField;

package/esm/components/workflow/components/PrioritySelector/PrioritySelector.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { WorkflowTaskData } from '@reltio/mdm-sdk';
 declare type Props = Pick<WorkflowTaskData, 'taskId' | 'priority'> & {
+    isTaskOpen?: WorkflowTaskData['isOpen'];
     className?: string;
 };
-declare const PrioritySelector: ({ taskId, priority, className }: Props) => JSX.Element;
+declare const PrioritySelector: ({ taskId, priority, isTaskOpen, className }: Props) => JSX.Element;
 export default PrioritySelector;