@reltio/components 1.4.949 → 1.4.953

package/cjs/components/AvatarWithFallback/AvatarWithFallback.d.ts

@@ -4,6 +4,10 @@ declare type Props = {
     icon?: string;
     avatarText?: string;
     variant?: 'circle' | 'circular' | 'rounded' | 'square';
+    rootClasses?: {
+        iconRoot?: string;
+        textRoot?: string;
+    };
 };
-declare const AvatarWithFallback: ({ className, icon, avatarText, ...otherProps }: Props) => JSX.Element;
+declare const AvatarWithFallback: ({ className, icon, avatarText, rootClasses, ...otherProps }: Props) => JSX.Element;
 export default AvatarWithFallback;

package/cjs/components/AvatarWithFallback/AvatarWithFallback.js

@@ -45,6 +45,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var Avatar_1 = __importDefault(require("@material-ui/core/Avatar"));
+var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
 var AvatarStates;
 (function (AvatarStates) {
@@ -53,7 +54,7 @@ var AvatarStates;
     AvatarStates[AvatarStates["ERROR_MODE"] = 2] = "ERROR_MODE";
 })(AvatarStates || (AvatarStates = {}));
 var AvatarWithFallback = function (_a) {
-    var className = _a.className, icon = _a.icon, avatarText = _a.avatarText, otherProps = __rest(_a, ["className", "icon", "avatarText"]);
+    var className = _a.className, icon = _a.icon, avatarText = _a.avatarText, rootClasses = _a.rootClasses, otherProps = __rest(_a, ["className", "icon", "avatarText", "rootClasses"]);
     var _b = react_1.useState(null), state = _b[0], setState = _b[1];
     react_1.useEffect(function () {
         if (icon) {
@@ -68,10 +69,10 @@ var AvatarWithFallback = function (_a) {
     };
     switch (state) {
         case AvatarStates.ICON_MODE:
-            return react_1.default.createElement(Avatar_1.default, __assign({ className: className, src: icon, onError: onImageLoadFail }, otherProps));
+            return (react_1.default.createElement(Avatar_1.default, __assign({ className: classnames_1.default(className, rootClasses === null || rootClasses === void 0 ? void 0 : rootClasses.iconRoot), src: icon, onError: onImageLoadFail }, otherProps)));
         case AvatarStates.TEXT_MODE:
         case AvatarStates.ERROR_MODE:
-            return (react_1.default.createElement(Avatar_1.default, __assign({ className: className }, otherProps), avatarText));
+            return (react_1.default.createElement(Avatar_1.default, __assign({ className: classnames_1.default(className, rootClasses === null || rootClasses === void 0 ? void 0 : rootClasses.textRoot) }, otherProps), avatarText));
         default:
             return null;
     }

package/cjs/components/ImageAttributesGallery/HeaderRight/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"divider" | "downloadButton" | "shareButton" | "deleteButton">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"divider" | "deleteButton" | "downloadButton" | "shareButton">;

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

@@ -55,10 +55,22 @@ declare var _default: import("react-redux").ConnectedComponent<{
             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>;
+            canCreate: import("prop-types").Requireable<import("prop-types").InferProps<{
+                deviceTypes: import("prop-types").Requireable<string | string[]>;
+                roles: import("prop-types").Requireable<string[]>;
+            }>>;
+            canRead: import("prop-types").Requireable<import("prop-types").InferProps<{
+                deviceTypes: import("prop-types").Requireable<string | string[]>;
+                roles: import("prop-types").Requireable<string[]>;
+            }>>;
+            canUpdate: import("prop-types").Requireable<import("prop-types").InferProps<{
+                deviceTypes: import("prop-types").Requireable<string | string[]>;
+                roles: import("prop-types").Requireable<string[]>;
+            }>>;
+            canDelete: import("prop-types").Requireable<import("prop-types").InferProps<{
+                deviceTypes: import("prop-types").Requireable<string | string[]>;
+                roles: import("prop-types").Requireable<string[]>;
+            }>>;
             editingEnabled: import("prop-types").Requireable<boolean>;
         }>>;
         mode: import("prop-types").Requireable<string>;

package/cjs/components/SourceIcon/SourceIcon.d.ts

@@ -2,6 +2,10 @@
 declare type Props = {
     sourceType: string;
     className?: string;
+    classes?: {
+        iconRoot?: string;
+        textRoot?: string;
+    };
 };
-declare const SourceIcon: ({ sourceType, className }: Props) => JSX.Element;
+declare const SourceIcon: ({ sourceType, className, classes }: Props) => JSX.Element;
 export default SourceIcon;

package/cjs/components/SourceIcon/SourceIcon.js

@@ -10,9 +10,9 @@ var react_redux_1 = require("react-redux");
 var AvatarWithFallback_1 = __importDefault(require("../AvatarWithFallback/AvatarWithFallback"));
 var SOURCE_URL = 'https://s3.amazonaws.com/reltio.images/api';
 var SourceIcon = function (_a) {
-    var sourceType = _a.sourceType, className = _a.className;
+    var sourceType = _a.sourceType, className = _a.className, classes = _a.classes;
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
     var _b = mdm_sdk_1.findSourceSystemByUri(metadata, sourceType), label = _b.label, icon = _b.icon;
-    return (react_1.default.createElement(AvatarWithFallback_1.default, { className: className, avatarText: label[0], icon: icon ? mdm_sdk_1.getAbsoluteImageUrl(SOURCE_URL, icon) : null, variant: "square" }));
+    return (react_1.default.createElement(AvatarWithFallback_1.default, { className: className, avatarText: label[0], icon: icon ? mdm_sdk_1.getAbsoluteImageUrl(SOURCE_URL, icon) : null, variant: "square", rootClasses: classes }));
 };
 exports.default = SourceIcon;

package/cjs/components/attributes/editMode/AttributesList/helpers.js

@@ -18,7 +18,7 @@ var getMoreAttrTypes = function (attrTypes, entity) {
     return attrTypes.filter(function (attrType) {
         var source = getSource(attrType, entity);
         var nameProp = getNameProp(attrType);
-        return !(attrType.singleValue && ramda_1.has(attrType[nameProp])(source));
+        return !((attrType.singleValue || mdm_sdk_1.isRoleAttrType(attrType) || mdm_sdk_1.isTagAttrType(attrType)) && ramda_1.has(attrType[nameProp])(source));
     });
 };
 exports.getMoreAttrTypes = getMoreAttrTypes;

package/cjs/components/attributes/editMode/AttributesPager/SpecialRenderer.d.ts

@@ -8,7 +8,8 @@ declare type Props = {
     mode: Mode;
     errorMessage?: string;
     onDeleteAttribute: (param: AttributeItem) => void;
+    onChangeAttribute: (param: AttributeItem) => void;
     showEmptyEditors?: boolean;
 };
-declare const SpecialRenderer: ({ values, attributeType, parentUri, mode, errorMessage, onDeleteAttribute, showEmptyEditors, ...otherProps }: Props) => JSX.Element;
+declare const SpecialRenderer: ({ values, attributeType, parentUri, mode, errorMessage, onDeleteAttribute, onChangeAttribute, showEmptyEditors, ...otherProps }: Props) => JSX.Element;
 export default SpecialRenderer;

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

@@ -56,11 +56,12 @@ var Roles_1 = require("../Roles/Roles");
 var Tags_1 = __importDefault(require("../Tags"));
 var styles_1 = require("./styles");
 var SpecialRenderer = function (_a) {
-    var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, onDeleteAttribute = _a.onDeleteAttribute, showEmptyEditors = _a.showEmptyEditors, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage", "onDeleteAttribute", "showEmptyEditors"]);
+    var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, showEmptyEditors = _a.showEmptyEditors, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage", "onDeleteAttribute", "onChangeAttribute", "showEmptyEditors"]);
     var styles = styles_1.useStyles();
     var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality;
     var isEditableMode = mdm_sdk_1.isEditableMode(mode);
     var _b = react_1.useState(false), hadDeletions = _b[0], setHadDeletions = _b[1];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     var onDelete = react_1.useCallback(ramda_1.pipe(onDeleteAttribute, ramda_1.T, setHadDeletions), [onDeleteAttribute, setHadDeletions]);
     var isEmptyValues = mdm_sdk_1.isEmptyValue(values);
     var showEmpty = !hadDeletions && showEmptyEditors && isEmptyValues;
@@ -71,14 +72,13 @@ var SpecialRenderer = function (_a) {
     var renderValue = function () {
         switch (attributeType.uri) {
             case mdm_sdk_1.EntityAttrTypes.tags.uri:
-                return react_1.default.createElement(Tags_1.default, { values: values });
-            case mdm_sdk_1.EntityAttrTypes.roles.uri: {
-                return react_1.default.createElement(Roles_1.Roles, { values: values });
-            }
+                return react_1.default.createElement(Tags_1.default, { values: values, onDelete: onDelete, onChange: onChangeAttribute });
+            case mdm_sdk_1.EntityAttrTypes.roles.uri:
+                return react_1.default.createElement(Roles_1.Roles, { values: values, onDelete: onDelete, onChange: onChangeAttribute });
             default: {
                 //startDate, endDate
                 var value = __assign(__assign({}, emptyEditorValue.current), { value: values[0] || '' });
-                return (react_1.default.createElement(Attribute_1.default, __assign({ attributeValue: value, attributeType: attributeType, mode: mode, onDeleteAttribute: onDelete }, otherProps)));
+                return (react_1.default.createElement(Attribute_1.default, __assign({ attributeValue: value, attributeType: attributeType, mode: mode, onDeleteAttribute: onDelete, onChangeAttribute: onChangeAttribute }, otherProps)));
             }
         }
     };

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

@@ -33,7 +33,7 @@ var EntityCreator = function (_a) {
         attributeTypesSelectionStrategy,
         entityType
     ]);
-    return entity ? (react_1.default.createElement(AttributesList_1.default, { attrTypes: attributeTypes, entity: entity, showEmptyEditors: true, drawLines: true, parentUri: entity.uri, mode: mode, crosswalks: entity.crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })) : null;
+    return entity ? (react_1.default.createElement(AttributesList_1.default, { key: entity.uri, attrTypes: attributeTypes, entity: entity, showEmptyEditors: true, drawLines: true, parentUri: entity.uri, mode: mode, crosswalks: entity.crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })) : null;
 };
 EntityCreator.propTypes = {
     entityUri: prop_types_1.default.string,

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

@@ -1,6 +1,9 @@
 /// <reference types="react" />
+import { AttributeItem } from '../../..';
 declare type Props = {
     values: string[];
+    onChange: (param: AttributeItem) => void;
+    onDelete?: (param: AttributeItem) => void;
 };
-export declare const Roles: ({ values }: Props) => JSX.Element;
+export declare const Roles: ({ values, onChange, onDelete }: Props) => JSX.Element;
 export {};

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

@@ -23,19 +23,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Roles = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var ramda_1 = require("ramda");
 var react_redux_1 = require("react-redux");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var mdm_module_1 = __importStar(require("@reltio/mdm-module"));
+var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var SimpleDropDownSelector_1 = __importDefault(require("../../../SimpleDropDownSelector/SimpleDropDownSelector"));
 var __1 = require("../../..");
 var styles_1 = require("./styles");
+var SmallIconButton_1 = __importDefault(require("../../../SmallIconButton/SmallIconButton"));
+var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
 var components = { MultiValue: __1.MultiValueChip };
 var Roles = function (_a) {
-    var values = _a.values;
+    var values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete;
     var styles = styles_1.useStyles();
-    var dispatch = react_redux_1.useDispatch();
     var metadata = react_redux_1.useSelector(mdm_module_1.default.selectors.getMetadata);
     var entity = react_redux_1.useSelector(mdm_module_1.default.selectors.getEntity);
     var entityUri = entity.uri;
@@ -43,7 +44,7 @@ var Roles = function (_a) {
         value: role.uri,
         label: role.label
     }); });
-    var formattedValues = values.map(function (value) {
+    var formattedValues = (values || []).map(function (value) {
         var _a;
         var label = (_a = options.find(ramda_1.propEq('value', value))) === null || _a === void 0 ? void 0 : _a.label;
         return {
@@ -51,14 +52,19 @@ var Roles = function (_a) {
             label: label || mdm_sdk_1.getLastUriPart(value)
         };
     });
-    var handleChange = function (values) {
+    var handleChange = react_1.useCallback(function (values) {
         var roles = (values === null || values === void 0 ? void 0 : values.map(ramda_1.prop('value'))) || [];
-        dispatch(mdm_module_1.profile.actions.modifyAttribute({
+        onChange({
             value: roles,
             attributeType: mdm_sdk_1.EntityAttrTypes.roles,
             uri: entityUri
-        }));
-    };
-    return (react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: handleChange, components: components, classes: styles }));
+        });
+    }, [entityUri, onChange]);
+    var handleDelete = react_1.useCallback(function () {
+        onDelete({ uri: entityUri, attributeType: mdm_sdk_1.EntityAttrTypes.roles });
+    }, [entityUri, onDelete]);
+    return (react_1.default.createElement("div", { className: styles.container },
+        react_1.default.createElement(SimpleDropDownSelector_1.default, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: handleChange, components: components, classes: styles, className: styles.roleContainer }),
+        !!onDelete && (react_1.default.createElement(SmallIconButton_1.default, { className: styles.deleteButton, icon: Delete_1.default, onClick: handleDelete, size: "L" }))));
 };
 exports.Roles = Roles;

package/cjs/components/attributes/editMode/Roles/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"valueContainer">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container" | "valueContainer" | "roleContainer" | "deleteButton">;

package/cjs/components/attributes/editMode/Roles/styles.js

@@ -3,8 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStyles = void 0;
 var styles_1 = require("@material-ui/core/styles");
 exports.useStyles = styles_1.makeStyles({
+    container: {
+        display: 'flex',
+        flex: 1,
+        alignItems: 'flex-start',
+        marginBottom: '10px'
+    },
+    roleContainer: {
+        width: '100%'
+    },
     valueContainer: {
         marginLeft: '8px',
         width: 0
+    },
+    deleteButton: {
+        marginLeft: '8px'
     }
 });

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

@@ -53,15 +53,15 @@ var Add_1 = __importDefault(require("@material-ui/icons/Add"));
 var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var styles_1 = require("./styles");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var DataTypeValue_1 = __importDefault(require("../../../DataTypeValue/DataTypeValue"));
 var DataTypeValueEditor_1 = __importDefault(require("../../../editors/DataTypeValueEditor/DataTypeValueEditor"));
 var ErrorWrapper_1 = __importDefault(require("../../../ErrorWrapper/ErrorWrapper"));
-var SmallIconButton_1 = __importDefault(require("../../../../components/SmallIconButton/SmallIconButton"));
+var SmallIconButton_1 = __importDefault(require("../../../SmallIconButton/SmallIconButton"));
 var utils_1 = require("./utils");
 var withAsyncMount_1 = __importDefault(require("../../../../HOCs/withAsyncMount/withAsyncMount"));
 var getDependentLookupEditorContext_1 = require("./selectors/getDependentLookupEditorContext");
+var styles_1 = require("./styles");
 var AsyncMountPlaceholder = function () {
     var styles = styles_1.useStyles();
     return react_1.default.createElement("div", { className: styles.placeholder });

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

@@ -1,7 +1,10 @@
 /// <reference types="react" />
-declare type Props = {
+import { AttributeItem } from '../AttributesPager';
+export declare type Props = {
     className?: string;
     values: string[];
+    onChange: (param: AttributeItem) => void;
+    onDelete?: (param: AttributeItem) => void;
 };
-declare const Tags: ({ className, values }: Props) => JSX.Element;
+declare const Tags: ({ className, values, onChange, onDelete }: Props) => JSX.Element;
 export default Tags;

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

@@ -24,9 +24,12 @@ var __importDefault = (this && this.__importDefault) || function (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_module_1 = __importDefault(require("@reltio/mdm-module"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var Delete_1 = __importDefault(require("@material-ui/icons/Delete"));
 var TypeaheadEditor_1 = __importDefault(require("../../../editors/TypeaheadEditor/TypeaheadEditor"));
+var SmallIconButton_1 = __importDefault(require("../../../SmallIconButton/SmallIconButton"));
+var styles_1 = require("./styles");
 var filtersWithSearch = function (searchQuery) { return [
     {
         filter: 'containsWordStartingWith',
@@ -47,16 +50,21 @@ 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 className = _a.className, values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete;
+    var styles = styles_1.useStyles();
     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({
+    var handleChange = react_1.useCallback(function (tags) {
+        onChange({
             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 }));
+        });
+    }, [onChange, entityUri]);
+    var handleDelete = react_1.useCallback(function () {
+        onDelete({ uri: entityUri, attributeType: mdm_sdk_1.EntityAttrTypes.tags });
+    }, [entityUri, onDelete]);
+    return (react_1.default.createElement("div", { className: styles.container },
+        react_1.default.createElement(TypeaheadEditor_1.default, { fullWidth: true, multiple: true, variant: "filled", className: className, value: values || [], onChange: handleChange, getSuggestions: getSuggestions }),
+        !!onDelete && (react_1.default.createElement(SmallIconButton_1.default, { className: styles.deleteButton, icon: Delete_1.default, onClick: handleDelete, size: "L" }))));
 };
 exports.default = Tags;

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

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container" | "deleteButton">;

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

@@ -0,0 +1,15 @@
+"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({
+    container: {
+        display: 'flex',
+        flex: 1,
+        alignItems: 'flex-start',
+        marginBottom: '10px'
+    },
+    deleteButton: {
+        marginLeft: '8px'
+    }
+});

package/cjs/components/workflow/components/AttributesChanges/helpers/mergeHelpers.js

@@ -27,7 +27,7 @@ var SPECIAL_ATTRIBUTES_NAMES = [
 var prepareStartOrEndDate = function (_a) {
     var newValue = _a.newValue, oldValue = _a.oldValue;
     var parseValue = function (value) { return (isNaN(value) || mdm_sdk_1.isEmptyValue(value) ? value : parseInt(value)); };
-    var isExistedValue = function (value) { return (value === null || value === void 0 ? void 0 : value.length) && !mdm_sdk_1.isEmptyValue(value); };
+    var isExistedValue = function (value) { return (value === null || value === void 0 ? void 0 : value.length) && !mdm_sdk_1.isEmptyValue(value) && !mdm_sdk_1.isEmptyValue(value[0]); };
     var isExistNewValue = isExistedValue(newValue);
     var isExistOldValue = isExistedValue(oldValue);
     if (isExistNewValue && isExistOldValue) {

package/cjs/components/workflow/hooks/useWorkflowAssignee.js

@@ -48,7 +48,11 @@ var useWorkflowAssignee = function (_a) {
             }))
                 .then(function (result) {
                 var data = result.data;
-                var assignees = data.map(assigneeToValue);
+                var assignees = data
+                    .sort(function (a, b) {
+                    return mdm_sdk_1.utils.strings.sort('asc', a, b);
+                })
+                    .map(assigneeToValue);
                 setAssignees(assignees);
                 return filterOutRest_1(assignees);
             })

package/esm/components/AvatarWithFallback/AvatarWithFallback.d.ts

@@ -4,6 +4,10 @@ declare type Props = {
     icon?: string;
     avatarText?: string;
     variant?: 'circle' | 'circular' | 'rounded' | 'square';
+    rootClasses?: {
+        iconRoot?: string;
+        textRoot?: string;
+    };
 };
-declare const AvatarWithFallback: ({ className, icon, avatarText, ...otherProps }: Props) => JSX.Element;
+declare const AvatarWithFallback: ({ className, icon, avatarText, rootClasses, ...otherProps }: Props) => JSX.Element;
 export default AvatarWithFallback;

package/esm/components/AvatarWithFallback/AvatarWithFallback.js

@@ -21,6 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import Avatar from '@material-ui/core/Avatar';
+import classnames from 'classnames';
 import React, { useEffect, useState } from 'react';
 var AvatarStates;
 (function (AvatarStates) {
@@ -29,7 +30,7 @@ var AvatarStates;
     AvatarStates[AvatarStates["ERROR_MODE"] = 2] = "ERROR_MODE";
 })(AvatarStates || (AvatarStates = {}));
 var AvatarWithFallback = function (_a) {
-    var className = _a.className, icon = _a.icon, avatarText = _a.avatarText, otherProps = __rest(_a, ["className", "icon", "avatarText"]);
+    var className = _a.className, icon = _a.icon, avatarText = _a.avatarText, rootClasses = _a.rootClasses, otherProps = __rest(_a, ["className", "icon", "avatarText", "rootClasses"]);
     var _b = useState(null), state = _b[0], setState = _b[1];
     useEffect(function () {
         if (icon) {
@@ -44,10 +45,10 @@ var AvatarWithFallback = function (_a) {
     };
     switch (state) {
         case AvatarStates.ICON_MODE:
-            return React.createElement(Avatar, __assign({ className: className, src: icon, onError: onImageLoadFail }, otherProps));
+            return (React.createElement(Avatar, __assign({ className: classnames(className, rootClasses === null || rootClasses === void 0 ? void 0 : rootClasses.iconRoot), src: icon, onError: onImageLoadFail }, otherProps)));
         case AvatarStates.TEXT_MODE:
         case AvatarStates.ERROR_MODE:
-            return (React.createElement(Avatar, __assign({ className: className }, otherProps), avatarText));
+            return (React.createElement(Avatar, __assign({ className: classnames(className, rootClasses === null || rootClasses === void 0 ? void 0 : rootClasses.textRoot) }, otherProps), avatarText));
         default:
             return null;
     }

package/esm/components/ImageAttributesGallery/HeaderRight/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"divider" | "downloadButton" | "shareButton" | "deleteButton">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"divider" | "deleteButton" | "downloadButton" | "shareButton">;

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

@@ -55,10 +55,22 @@ declare var _default: import("react-redux").ConnectedComponent<{
             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>;
+            canCreate: import("prop-types").Requireable<import("prop-types").InferProps<{
+                deviceTypes: import("prop-types").Requireable<string | string[]>;
+                roles: import("prop-types").Requireable<string[]>;
+            }>>;
+            canRead: import("prop-types").Requireable<import("prop-types").InferProps<{
+                deviceTypes: import("prop-types").Requireable<string | string[]>;
+                roles: import("prop-types").Requireable<string[]>;
+            }>>;
+            canUpdate: import("prop-types").Requireable<import("prop-types").InferProps<{
+                deviceTypes: import("prop-types").Requireable<string | string[]>;
+                roles: import("prop-types").Requireable<string[]>;
+            }>>;
+            canDelete: import("prop-types").Requireable<import("prop-types").InferProps<{
+                deviceTypes: import("prop-types").Requireable<string | string[]>;
+                roles: import("prop-types").Requireable<string[]>;
+            }>>;
             editingEnabled: import("prop-types").Requireable<boolean>;
         }>>;
         mode: import("prop-types").Requireable<string>;

package/esm/components/SourceIcon/SourceIcon.d.ts

@@ -2,6 +2,10 @@
 declare type Props = {
     sourceType: string;
     className?: string;
+    classes?: {
+        iconRoot?: string;
+        textRoot?: string;
+    };
 };
-declare const SourceIcon: ({ sourceType, className }: Props) => JSX.Element;
+declare const SourceIcon: ({ sourceType, className, classes }: Props) => JSX.Element;
 export default SourceIcon;

package/esm/components/SourceIcon/SourceIcon.js

@@ -5,9 +5,9 @@ import { useSelector } from 'react-redux';
 import AvatarWithFallback from '../AvatarWithFallback/AvatarWithFallback';
 var SOURCE_URL = 'https://s3.amazonaws.com/reltio.images/api';
 var SourceIcon = function (_a) {
-    var sourceType = _a.sourceType, className = _a.className;
+    var sourceType = _a.sourceType, className = _a.className, classes = _a.classes;
     var metadata = useSelector(mdmModule.selectors.getMetadata);
     var _b = findSourceSystemByUri(metadata, sourceType), label = _b.label, icon = _b.icon;
-    return (React.createElement(AvatarWithFallback, { className: className, avatarText: label[0], icon: icon ? getAbsoluteImageUrl(SOURCE_URL, icon) : null, variant: "square" }));
+    return (React.createElement(AvatarWithFallback, { className: className, avatarText: label[0], icon: icon ? getAbsoluteImageUrl(SOURCE_URL, icon) : null, variant: "square", rootClasses: classes }));
 };
 export default SourceIcon;

package/esm/components/attributes/editMode/AttributesList/helpers.js

@@ -1,5 +1,5 @@
 import { always, both, cond, has, T } from 'ramda';
-import { isAnalyticAttribute, isSpecialAttribute } from '@reltio/mdm-sdk';
+import { isAnalyticAttribute, isRoleAttrType, isSpecialAttribute, isTagAttrType } from '@reltio/mdm-sdk';
 var getSource = function (attrType, entity) {
     var _a = entity.attributes, attributes = _a === void 0 ? {} : _a, _b = entity.analyticsAttributes, analyticsAttributes = _b === void 0 ? {} : _b;
     return cond([
@@ -15,6 +15,6 @@ export var getMoreAttrTypes = function (attrTypes, entity) {
     return attrTypes.filter(function (attrType) {
         var source = getSource(attrType, entity);
         var nameProp = getNameProp(attrType);
-        return !(attrType.singleValue && has(attrType[nameProp])(source));
+        return !((attrType.singleValue || isRoleAttrType(attrType) || isTagAttrType(attrType)) && has(attrType[nameProp])(source));
     });
 };

package/esm/components/attributes/editMode/AttributesPager/SpecialRenderer.d.ts

@@ -8,7 +8,8 @@ declare type Props = {
     mode: Mode;
     errorMessage?: string;
     onDeleteAttribute: (param: AttributeItem) => void;
+    onChangeAttribute: (param: AttributeItem) => void;
     showEmptyEditors?: boolean;
 };
-declare const SpecialRenderer: ({ values, attributeType, parentUri, mode, errorMessage, onDeleteAttribute, showEmptyEditors, ...otherProps }: Props) => JSX.Element;
+declare const SpecialRenderer: ({ values, attributeType, parentUri, mode, errorMessage, onDeleteAttribute, onChangeAttribute, showEmptyEditors, ...otherProps }: Props) => JSX.Element;
 export default SpecialRenderer;

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

@@ -32,11 +32,12 @@ import { Roles } from '../Roles/Roles';
 import Tags from '../Tags';
 import { useStyles } from './styles';
 var SpecialRenderer = function (_a) {
-    var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, onDeleteAttribute = _a.onDeleteAttribute, showEmptyEditors = _a.showEmptyEditors, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage", "onDeleteAttribute", "showEmptyEditors"]);
+    var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, showEmptyEditors = _a.showEmptyEditors, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage", "onDeleteAttribute", "onChangeAttribute", "showEmptyEditors"]);
     var styles = useStyles();
     var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality;
     var isEditableMode = checkIsEditableMode(mode);
     var _b = useState(false), hadDeletions = _b[0], setHadDeletions = _b[1];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     var onDelete = useCallback(pipe(onDeleteAttribute, T, setHadDeletions), [onDeleteAttribute, setHadDeletions]);
     var isEmptyValues = isEmptyValue(values);
     var showEmpty = !hadDeletions && showEmptyEditors && isEmptyValues;
@@ -47,14 +48,13 @@ var SpecialRenderer = function (_a) {
     var renderValue = function () {
         switch (attributeType.uri) {
             case EntityAttrTypes.tags.uri:
-                return React.createElement(Tags, { values: values });
-            case EntityAttrTypes.roles.uri: {
-                return React.createElement(Roles, { values: values });
-            }
+                return React.createElement(Tags, { values: values, onDelete: onDelete, onChange: onChangeAttribute });
+            case EntityAttrTypes.roles.uri:
+                return React.createElement(Roles, { values: values, onDelete: onDelete, onChange: onChangeAttribute });
             default: {
                 //startDate, endDate
                 var value = __assign(__assign({}, emptyEditorValue.current), { value: values[0] || '' });
-                return (React.createElement(Attribute, __assign({ attributeValue: value, attributeType: attributeType, mode: mode, onDeleteAttribute: onDelete }, otherProps)));
+                return (React.createElement(Attribute, __assign({ attributeValue: value, attributeType: attributeType, mode: mode, onDeleteAttribute: onDelete, onChangeAttribute: onChangeAttribute }, otherProps)));
             }
         }
     };

package/esm/components/attributes/editMode/EntityCreator/EntityCreator.js

@@ -9,7 +9,7 @@ var EntityCreator = function (_a) {
         attributeTypesSelectionStrategy,
         entityType
     ]);
-    return entity ? (React.createElement(AttributesList, { attrTypes: attributeTypes, entity: entity, showEmptyEditors: true, drawLines: true, parentUri: entity.uri, mode: mode, crosswalks: entity.crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })) : null;
+    return entity ? (React.createElement(AttributesList, { key: entity.uri, attrTypes: attributeTypes, entity: entity, showEmptyEditors: true, drawLines: true, parentUri: entity.uri, mode: mode, crosswalks: entity.crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute })) : null;
 };
 EntityCreator.propTypes = {
     entityUri: PropTypes.string,

package/esm/components/attributes/editMode/Roles/Roles.d.ts

@@ -1,6 +1,9 @@
 /// <reference types="react" />
+import { AttributeItem } from '../../..';
 declare type Props = {
     values: string[];
+    onChange: (param: AttributeItem) => void;
+    onDelete?: (param: AttributeItem) => void;
 };
-export declare const Roles: ({ values }: Props) => JSX.Element;
+export declare const Roles: ({ values, onChange, onDelete }: Props) => JSX.Element;
 export {};

package/esm/components/attributes/editMode/Roles/Roles.js

@@ -1,16 +1,17 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { prop, propEq } from 'ramda';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { EntityAttrTypes, getRolesForEntityType, getLastUriPart } from '@reltio/mdm-sdk';
-import mdmModule, { profile } from '@reltio/mdm-module';
+import mdmModule from '@reltio/mdm-module';
 import SimpleDropDownSelector from '../../../SimpleDropDownSelector/SimpleDropDownSelector';
 import { MultiValueChip } from '../../..';
 import { useStyles } from './styles';
+import SmallIconButton from '../../../SmallIconButton/SmallIconButton';
+import DeleteIcon from '@material-ui/icons/Delete';
 var components = { MultiValue: MultiValueChip };
 export var Roles = function (_a) {
-    var values = _a.values;
+    var values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete;
     var styles = useStyles();
-    var dispatch = useDispatch();
     var metadata = useSelector(mdmModule.selectors.getMetadata);
     var entity = useSelector(mdmModule.selectors.getEntity);
     var entityUri = entity.uri;
@@ -18,7 +19,7 @@ export var Roles = function (_a) {
         value: role.uri,
         label: role.label
     }); });
-    var formattedValues = values.map(function (value) {
+    var formattedValues = (values || []).map(function (value) {
         var _a;
         var label = (_a = options.find(propEq('value', value))) === null || _a === void 0 ? void 0 : _a.label;
         return {
@@ -26,13 +27,18 @@ export var Roles = function (_a) {
             label: label || getLastUriPart(value)
         };
     });
-    var handleChange = function (values) {
+    var handleChange = useCallback(function (values) {
         var roles = (values === null || values === void 0 ? void 0 : values.map(prop('value'))) || [];
-        dispatch(profile.actions.modifyAttribute({
+        onChange({
             value: roles,
             attributeType: EntityAttrTypes.roles,
             uri: entityUri
-        }));
-    };
-    return (React.createElement(SimpleDropDownSelector, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: handleChange, components: components, classes: styles }));
+        });
+    }, [entityUri, onChange]);
+    var handleDelete = useCallback(function () {
+        onDelete({ uri: entityUri, attributeType: EntityAttrTypes.roles });
+    }, [entityUri, onDelete]);
+    return (React.createElement("div", { className: styles.container },
+        React.createElement(SimpleDropDownSelector, { label: '', height: 40, isMulti: true, options: options, value: formattedValues, onChange: handleChange, components: components, classes: styles, className: styles.roleContainer }),
+        !!onDelete && (React.createElement(SmallIconButton, { className: styles.deleteButton, icon: DeleteIcon, onClick: handleDelete, size: "L" }))));
 };

package/esm/components/attributes/editMode/Roles/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"valueContainer">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container" | "valueContainer" | "roleContainer" | "deleteButton">;

package/esm/components/attributes/editMode/Roles/styles.js

@@ -1,7 +1,19 @@
 import { makeStyles } from '@material-ui/core/styles';
 export var useStyles = makeStyles({
+    container: {
+        display: 'flex',
+        flex: 1,
+        alignItems: 'flex-start',
+        marginBottom: '10px'
+    },
+    roleContainer: {
+        width: '100%'
+    },
     valueContainer: {
         marginLeft: '8px',
         width: 0
+    },
+    deleteButton: {
+        marginLeft: '8px'
     }
 });

package/esm/components/attributes/editMode/SimpleAttributeEditor/SimpleAttributeEditor.js

@@ -29,15 +29,15 @@ import AddIcon from '@material-ui/icons/Add';
 import DeleteIcon from '@material-ui/icons/Delete';
 import Typography from '@material-ui/core/Typography';
 import i18n from 'ui-i18n';
-import { useStyles } from './styles';
 import { AttributeErrorType, AttributeTypeType, attributeUriToSearchUri, checkCanCreateAttribute, checkCanDeleteAttribute, checkCanEditAttribute, ErrorType, getAttributeValue, getAttrDataTypeDefinition, getErrorId, getErrorMessage, getErrorType, isDependentLookupAttrType, isEditableMode as checkIsEditableMode, ModeType, SimpleAttributeValueType } from '@reltio/mdm-sdk';
 import DataTypeValue from '../../../DataTypeValue/DataTypeValue';
 import DataTypeValueEditor from '../../../editors/DataTypeValueEditor/DataTypeValueEditor';
 import ErrorWrapper from '../../../ErrorWrapper/ErrorWrapper';
-import SmallIconButton from '../../../../components/SmallIconButton/SmallIconButton';
+import SmallIconButton from '../../../SmallIconButton/SmallIconButton';
 import { attributeValueToEditorValue, prepareChangeData } from './utils';
 import withAsyncMount from '../../../../HOCs/withAsyncMount/withAsyncMount';
 import { getDependentLookupEditorContext } from './selectors/getDependentLookupEditorContext';
+import { useStyles } from './styles';
 var AsyncMountPlaceholder = function () {
     var styles = useStyles();
     return React.createElement("div", { className: styles.placeholder });

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

@@ -1,7 +1,10 @@
 /// <reference types="react" />
-declare type Props = {
+import { AttributeItem } from '../AttributesPager';
+export declare type Props = {
     className?: string;
     values: string[];
+    onChange: (param: AttributeItem) => void;
+    onDelete?: (param: AttributeItem) => void;
 };
-declare const Tags: ({ className, values }: Props) => JSX.Element;
+declare const Tags: ({ className, values, onChange, onDelete }: Props) => JSX.Element;
 export default Tags;

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

@@ -1,8 +1,11 @@
 import React, { useCallback } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import mdmModule, { profile } from '@reltio/mdm-module';
+import { useSelector } from 'react-redux';
+import mdmModule from '@reltio/mdm-module';
 import { getFacets, EntityAttrTypes, buildFilterQueryString } from '@reltio/mdm-sdk';
+import DeleteIcon from '@material-ui/icons/Delete';
 import TypeaheadEditor from '../../../editors/TypeaheadEditor/TypeaheadEditor';
+import SmallIconButton from '../../../SmallIconButton/SmallIconButton';
+import { useStyles } from './styles';
 var filtersWithSearch = function (searchQuery) { return [
     {
         filter: 'containsWordStartingWith',
@@ -23,16 +26,21 @@ 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 className = _a.className, values = _a.values, onChange = _a.onChange, onDelete = _a.onDelete;
+    var styles = useStyles();
     var entityUri = useSelector(mdmModule.selectors.getEntityUri);
-    var onChange = useCallback(function (tags) {
-        return dispatch(profile.actions.modifyAttribute({
+    var handleChange = useCallback(function (tags) {
+        onChange({
             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 }));
+        });
+    }, [onChange, entityUri]);
+    var handleDelete = useCallback(function () {
+        onDelete({ uri: entityUri, attributeType: EntityAttrTypes.tags });
+    }, [entityUri, onDelete]);
+    return (React.createElement("div", { className: styles.container },
+        React.createElement(TypeaheadEditor, { fullWidth: true, multiple: true, variant: "filled", className: className, value: values || [], onChange: handleChange, getSuggestions: getSuggestions }),
+        !!onDelete && (React.createElement(SmallIconButton, { className: styles.deleteButton, icon: DeleteIcon, onClick: handleDelete, size: "L" }))));
 };
 export default Tags;

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

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"container" | "deleteButton">;

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

@@ -0,0 +1,12 @@
+import { makeStyles } from '@material-ui/core/styles';
+export var useStyles = makeStyles({
+    container: {
+        display: 'flex',
+        flex: 1,
+        alignItems: 'flex-start',
+        marginBottom: '10px'
+    },
+    deleteButton: {
+        marginLeft: '8px'
+    }
+});

package/esm/components/workflow/components/AttributesChanges/helpers/mergeHelpers.js

@@ -24,7 +24,7 @@ var SPECIAL_ATTRIBUTES_NAMES = [
 var prepareStartOrEndDate = function (_a) {
     var newValue = _a.newValue, oldValue = _a.oldValue;
     var parseValue = function (value) { return (isNaN(value) || isEmptyValue(value) ? value : parseInt(value)); };
-    var isExistedValue = function (value) { return (value === null || value === void 0 ? void 0 : value.length) && !isEmptyValue(value); };
+    var isExistedValue = function (value) { return (value === null || value === void 0 ? void 0 : value.length) && !isEmptyValue(value) && !isEmptyValue(value[0]); };
     var isExistNewValue = isExistedValue(newValue);
     var isExistOldValue = isExistedValue(oldValue);
     if (isExistNewValue && isExistOldValue) {

package/esm/components/workflow/hooks/useWorkflowAssignee.js

@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useContext } from 'react';
 import { filter } from 'ramda';
 import { useSelector } from 'react-redux';
-import { getAssigneeForTask, updateAssigneeForTask } from '@reltio/mdm-sdk';
+import { getAssigneeForTask, updateAssigneeForTask, utils } from '@reltio/mdm-sdk';
 import mdmModule from '@reltio/mdm-module';
 import { useSafePromise } from '../../../hooks';
 import { WorkflowTasksContext } from '../../../contexts/WorkflowTasksContext';
@@ -42,7 +42,11 @@ export var useWorkflowAssignee = function (_a) {
             }))
                 .then(function (result) {
                 var data = result.data;
-                var assignees = data.map(assigneeToValue);
+                var assignees = data
+                    .sort(function (a, b) {
+                    return utils.strings.sort('asc', a, b);
+                })
+                    .map(assigneeToValue);
                 setAssignees(assignees);
                 return filterOutRest_1(assignees);
             })

package/package.json

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