@reltio/components 1.4.1067 → 1.4.1068

package/cjs/components/Title/Title.d.ts

@@ -1,14 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    label: string;
+    isRequired?: boolean;
+    className?: string;
+};
+declare const Title: ({ label, isRequired, className, ...otherProps }: Props) => JSX.Element;
 export default Title;
-declare function Title({ label, isRequired, className }: {
-    label: any;
-    isRequired: any;
-    className: any;
-}): JSX.Element;
-declare namespace Title {
-    namespace propTypes {
-        const label: PropTypes.Requireable<string>;
-        const isRequired: PropTypes.Requireable<boolean>;
-        const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/cjs/components/Title/Title.js

@@ -1,24 +1,40 @@
 "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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var prop_types_1 = __importDefault(require("prop-types"));
 var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var RequiredMark_1 = __importDefault(require("../RequiredMark/RequiredMark"));
 var Typography_1 = __importDefault(require("@material-ui/core/Typography"));
 var styles_1 = require("./styles");
 var Title = function (_a) {
-    var label = _a.label, isRequired = _a.isRequired, className = _a.className;
+    var label = _a.label, isRequired = _a.isRequired, className = _a.className, otherProps = __rest(_a, ["label", "isRequired", "className"]);
     var styles = styles_1.useStyles();
-    return (react_1.default.createElement(Typography_1.default, { className: classnames_1.default(styles.label, className), component: "span" },
+    return (react_1.default.createElement(Typography_1.default, __assign({ className: classnames_1.default(styles.label, className), component: "span" }, otherProps),
         label,
         isRequired && react_1.default.createElement(RequiredMark_1.default, null)));
 };
-Title.propTypes = {
-    label: prop_types_1.default.string,
-    isRequired: prop_types_1.default.bool,
-    className: prop_types_1.default.string
-};
 exports.default = Title;

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

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

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

@@ -100,7 +100,7 @@ var AttributeRenderer = function (_a) {
     return (react_1.default.createElement(BranchDecorator_1.default, { enabled: drawLines },
         react_1.default.createElement("div", { className: styles.wrapper },
             react_1.default.createElement("div", { className: styles.titleWrapper },
-                react_1.default.createElement(Title_1.default, { label: label, isRequired: isRequired, className: styles.title }),
+                react_1.default.createElement(Title_1.default, { label: label, isRequired: isRequired, className: styles.title, "data-reltio-id": "reltio-attribute-label" }),
                 react_1.default.createElement(OvIcon_1.default, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues })),
             isEditableMode && react_1.default.createElement(CardinalityMessage_1.default, { cardinality: cardinality }),
             isEditableMode && react_1.default.createElement(ErrorMessage_1.default, { message: errorMessage, className: styles.typeError }),

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

@@ -81,7 +81,7 @@ var AttributesPager = function (_a) {
             case RENDERER_TYPES.imageLine:
                 return (react_1.default.createElement(BranchDecorator_1.default, { enabled: drawLines },
                     react_1.default.createElement("div", { className: styles.wrapper },
-                        react_1.default.createElement(Title_1.default, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label }),
+                        react_1.default.createElement(Title_1.default, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label, "data-reltio-id": "reltio-attribute-label" }),
                         react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv }))));
             default:
                 return (react_1.default.createElement(AttributeRenderer_1.default, __assign({ values: visibleValues, attributeType: attributeType, max: max, paging: paging, crosswalks: crosswalks, drawLines: drawLines, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv, nonVisibleValues: nonVisibleValues }, commonProps)));

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

@@ -86,7 +86,7 @@ var SpecialRenderer = function (_a) {
         return null;
     }
     return (react_1.default.createElement(Box_1.default, { className: styles.wrapper },
-        react_1.default.createElement(Title_1.default, { label: label, isRequired: isRequired, className: styles.title }),
+        react_1.default.createElement(Title_1.default, { label: label, isRequired: isRequired, className: styles.title, "data-reltio-id": "reltio-attribute-label" }),
         isEditableMode && react_1.default.createElement(CardinalityMessage_1.default, { cardinality: cardinality }),
         isEditableMode && react_1.default.createElement(ErrorMessage_1.default, { message: errorMessage }),
         react_1.default.createElement(Box_1.default, { className: styles.attributesWrapper }, renderValue())));

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

@@ -91,7 +91,7 @@ var ComplexAttribute = function (_a) {
             react_1.default.createElement("div", { className: styles.titleContainer },
                 react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded, className: styles.expandButton, disabled: deleted }),
                 react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: errorMessage, classes: { helperText: styles.errorWrapperHelperText } },
-                    react_1.default.createElement("div", { className: classnames_1.default(styles.label, (_b = {}, _b[styles.deleted] = deleted, _b)) }, label))),
+                    react_1.default.createElement("div", { className: classnames_1.default(styles.label, (_b = {}, _b[styles.deleted] = deleted, _b)), "data-reltio-id": "reltio-attribute-complex-label" }, label))),
             react_1.default.createElement("div", { className: styles.actions },
                 edited && (react_1.default.createElement(Typography_1.default, { variant: "caption", className: styles.editedLabel },
                     "(",

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

@@ -94,7 +94,7 @@ var ImageAttributesLine = function (_a) {
             var uri = attribute.uri;
             var onOpenImageGalleryDialog = methods.onOpenImageGalleryDialog;
             return (react_1.default.createElement("div", { className: styles.image, key: uri },
-                react_1.default.createElement(Image_1.default, { src: src, overlay: renderImageActionsOverlay(methods, attribute), onClick: function () { return onOpenImageGalleryDialog(uri); }, size: { imageWidth: imageSize.imageWidth, imageHeight: imageSize.imageHeight } })));
+                react_1.default.createElement(Image_1.default, { src: src, overlay: renderImageActionsOverlay(methods, attribute), onClick: function () { return onOpenImageGalleryDialog(uri); }, size: { imageWidth: imageSize.imageWidth, imageHeight: imageSize.imageHeight }, "data-reltio-id": "reltio-attribute-value" })));
         };
         return renderImage;
     };

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

@@ -63,7 +63,7 @@ var Roles = function (_a) {
     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 },
+    return (react_1.default.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
         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" }))));
 };

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

@@ -102,7 +102,7 @@ var SimpleAttributeEditor = function (_a) {
     var deletedProps = deleted ? { disabled: true } : {};
     return (react_1.default.createElement("div", { className: classnames_1.default(styles.editor, className) },
         react_1.default.createElement(ErrorWrapper_1.default, { errorMessage: errorMessage, className: styles.errorWrapper },
-            react_1.default.createElement("div", { className: classnames_1.default(styles['editor-value'], (_b = {}, _b[styles.deleted] = deleted, _b), (_c = {}, _c[styles['editor-read-only-value']] = !showToEdit, _c)) }, showToEdit ? (react_1.default.createElement(DataTypeValueEditor_1.default, __assign({ fieldName: mdm_sdk_1.attributeUriToSearchUri(attributeType.uri), value: value, dataTypeDefinition: dataTypeDefinition, error: hasError, onChange: ramda_1.pipe(utils_1.prepareChangeData(attributeValue, attributeType), onChangeAttribute, deactivateError), fullWidth: true }, dependentLookupEditorContext, otherProps, deletedProps))) : (react_1.default.createElement(DataTypeValue_1.default, { value: mdm_sdk_1.getAttributeValue(attributeValue), dataTypeDefinition: dataTypeDefinition })))),
+            react_1.default.createElement("div", { className: classnames_1.default(styles['editor-value'], (_b = {}, _b[styles.deleted] = deleted, _b), (_c = {}, _c[styles['editor-read-only-value']] = !showToEdit, _c)), "data-reltio-id": "reltio-attribute-value" }, showToEdit ? (react_1.default.createElement(DataTypeValueEditor_1.default, __assign({ fieldName: mdm_sdk_1.attributeUriToSearchUri(attributeType.uri), value: value, dataTypeDefinition: dataTypeDefinition, error: hasError, onChange: ramda_1.pipe(utils_1.prepareChangeData(attributeValue, attributeType), onChangeAttribute, deactivateError), fullWidth: true }, dependentLookupEditorContext, otherProps, deletedProps))) : (react_1.default.createElement(DataTypeValue_1.default, { value: mdm_sdk_1.getAttributeValue(attributeValue), dataTypeDefinition: dataTypeDefinition })))),
         react_1.default.createElement("div", { className: styles['editor-actions'] },
             edited && (react_1.default.createElement(Typography_1.default, { variant: "caption", className: styles.editedLabel },
                 "(",

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

@@ -63,7 +63,7 @@ var Tags = function (_a) {
     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 },
+    return (react_1.default.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
         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" }))));
 };

package/cjs/components/attributes/readMode/AttributesPager/AttributesPager.js

@@ -70,7 +70,7 @@ var AttributesPager = function (_a) {
                 return (react_1.default.createElement(MultiLineRenderer_1.default, { values: visibleValues, nonVisibleValues: nonVisibleValues, totalVisibleValues: totalVisibleValues, totalNonVisibleValues: totalNonVisibleValues, attributeType: attributeType, parentUri: parentUri, max: max, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, titleClassName: titleClassName, contentClassName: contentClassName, showNonOv: showNonOv }));
             case RENDERER_TYPES.imageLine:
                 return (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(Title_1.default, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label }),
+                    react_1.default.createElement(Title_1.default, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label, "data-reltio-id": "reltio-attribute-label" }),
                     react_1.default.createElement(ImageAttributesLine_1.default, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, parentUri: parentUri, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv })));
             case RENDERER_TYPES.special:
                 return react_1.default.createElement(SpecialRenderer_1.default, { values: visibleValues, attributeType: attributeType });

package/cjs/components/attributes/readMode/AttributesPager/MultiLineRenderer.js

@@ -58,7 +58,7 @@ var MultiLineRenderer = function (_a) {
     var hiddenValuesCount = totalVisibleValues - visibleValuesCount;
     return (react_1.default.createElement("div", { className: styles.wrapper },
         react_1.default.createElement("div", { className: styles.titleRow },
-            react_1.default.createElement(Title_1.default, { label: label, className: classnames_1.default(styles.title, titleClassName) }),
+            react_1.default.createElement(Title_1.default, { label: label, className: classnames_1.default(styles.title, titleClassName), "data-reltio-id": "reltio-attribute-label" }),
             react_1.default.createElement(OvIcon_1.default, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues })),
         react_1.default.createElement("div", { className: styles.attributes }, shownValues.map(function (value) { return (react_1.default.createElement(Attribute_1.default, { key: value.uri, className: classnames_1.default(styles.attribute, contentClassName), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv })); })),
         showMore && (react_1.default.createElement(ShowMore_1.default, { moreNumber: ramda_1.min(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),

package/cjs/components/attributes/readMode/AttributesPager/OneLineRenderer.js

@@ -18,7 +18,7 @@ var OneLineRenderer = function (_a) {
     var label = attributeType.label;
     return (react_1.default.createElement("div", { className: classnames_1.default(styles.collaborationWrapper, constants_1.COMMENTS_CONTAINER_VISIBILITY_AREA) },
         react_1.default.createElement("div", { className: classnames_1.default(styles.titleRow, styles.wrapper) },
-            react_1.default.createElement(Title_1.default, { label: label, className: classnames_1.default(styles.title, titleClassName) }),
+            react_1.default.createElement(Title_1.default, { label: label, className: classnames_1.default(styles.title, titleClassName), "data-reltio-id": "reltio-attribute-label" }),
             react_1.default.createElement(OvIcon_1.default, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
             react_1.default.createElement(Attribute_1.default, { className: classnames_1.default(styles.attribute, contentClassName), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, inlined: true })),
         react_1.default.createElement(CommentsContainer_1.default, { uri: value.uri, relatedObjectUris: mdm_sdk_1.createRelatedObjectUris(mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE, {

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

@@ -34,7 +34,7 @@ var SpecialRenderer = function (_a) {
     };
     return (react_1.default.createElement("div", { className: classnames_1.default(styles.titleRow, styles.wrapper) },
         renderIcon(styles.titleIcon),
-        react_1.default.createElement(Title_1.default, { label: label, className: styles.title }),
+        react_1.default.createElement(Title_1.default, { label: label, className: styles.title, "data-reltio-id": "reltio-attribute-label" }),
         renderValue(styles.attribute)));
 };
 exports.default = SpecialRenderer;

package/cjs/components/attributes/readMode/ComplexAttribute/ComplexAttribute.js

@@ -48,7 +48,7 @@ var ComplexAttribute = function (_a) {
     return (react_1.default.createElement("div", { className: styles.complexContainer },
         react_1.default.createElement("div", { className: classnames_1.default(styles.labelContainer, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA) },
             react_1.default.createElement(ArrowExpandButton_1.default, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
-            react_1.default.createElement(Typography_1.default, { component: "span", variant: "body2", classes: { body2: styles.label } }, label),
+            react_1.default.createElement(Typography_1.default, { component: "span", variant: "body2", classes: { body2: styles.label }, "data-reltio-id": "reltio-attribute-complex-label" }, label),
             react_1.default.createElement("div", { className: styles.spacer }),
             react_1.default.createElement(CommentsContainer_1.default, { uri: attributeValue.uri, relatedObjectUris: mdm_sdk_1.createRelatedObjectUris(mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE, {
                     uri: attributeValue.uri

package/cjs/components/attributes/readMode/ImageAttributesLine/ImageAttributesLine.js

@@ -45,7 +45,7 @@ var ImageAttributesLine = function (_a) {
             var historyAttributesClassName = historyAppearance_1.getHistoryAttributeClassName(imageAppearance);
             return (react_1.default.createElement("div", { className: classnames_1.default(styles.image, (_a = {},
                     _a[styles[historyAttributesClassName + 'Image']] = historyAttributesClassName,
-                    _a)), key: uri },
+                    _a)), key: uri, "data-reltio-id": "reltio-attribute-value" },
                 react_1.default.createElement(Image_1.default, { onClick: function () { return onOpenImageGalleryDialog(uri); }, className: styles[historyAttributesClassName], src: src, size: { imageWidth: imageSize.imageWidth, imageHeight: imageSize.imageHeight } })));
         };
         return renderImage;

package/cjs/components/attributes/readMode/SimpleAttribute/SimpleAttribute.js

@@ -42,9 +42,9 @@ var SimpleAttribute = function (_a) {
     var dataTypeValue = (react_1.default.createElement(DataTypeValue_1.default, { value: mdm_sdk_1.getAttributeValue(attributeValue), dataTypeDefinition: mdm_sdk_1.getAttrDataTypeDefinition(attributeType) }));
     return inlined || historyClassName ? (react_1.default.createElement("div", { className: className },
         react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames_1.default((_b = {}, _b[styles.multilineAttribute] = !inlined, _b)) },
-            react_1.default.createElement("span", { className: styles[historyClassName] }, dataTypeValue)))) : (react_1.default.createElement("div", { className: classnames_1.default(className, styles.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA) },
+            react_1.default.createElement("span", { className: styles[historyClassName], "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (react_1.default.createElement("div", { className: classnames_1.default(className, styles.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA) },
         react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
-            react_1.default.createElement("span", { className: styles.attributeValue }, dataTypeValue)),
+            react_1.default.createElement("span", { className: styles.attributeValue, "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
         react_1.default.createElement(CommentsContainer_1.default, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: mdm_sdk_1.createRelatedObjectUris(mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE, {
                 uri: attributeValue.uri
             }), objectType: mdm_sdk_1.CollaborationObjectTypes.ENTITY_ATTRIBUTE })));

package/cjs/components/attributes/readMode/SpecialAttributes/Roles/Roles.js

@@ -8,6 +8,6 @@ var SpecialAttributesArray_1 = __importDefault(require("../SpecialAttributesArra
 var Role_1 = __importDefault(require("./Role"));
 var Roles = function (_a) {
     var className = _a.className, values = _a.values;
-    return (react_1.default.createElement(SpecialAttributesArray_1.default, { values: values, className: className, Component: Role_1.default }));
+    return (react_1.default.createElement(SpecialAttributesArray_1.default, { values: values, className: className, dataReltioId: "reltio-attribute-value", Component: Role_1.default }));
 };
 exports.default = Roles;

package/cjs/components/attributes/readMode/SpecialAttributes/SpecialAttributesArray.d.ts

@@ -3,6 +3,7 @@ declare type Props = {
     className?: string;
     values: string[];
     Component: React.ElementType;
+    dataReltioId?: string;
 };
-declare const SpecialAttributesArray: ({ className, values, Component }: Props) => JSX.Element;
+declare const SpecialAttributesArray: ({ className, values, Component, dataReltioId }: Props) => JSX.Element;
 export default SpecialAttributesArray;

package/cjs/components/attributes/readMode/SpecialAttributes/SpecialAttributesArray.js

@@ -21,8 +21,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var SpecialAttributesArray = function (_a) {
-    var className = _a.className, values = _a.values, Component = _a.Component;
-    return (react_1.default.createElement("div", { className: className }, values.map(function (value, index) { return (react_1.default.createElement(react_1.Fragment, { key: value },
+    var className = _a.className, values = _a.values, Component = _a.Component, dataReltioId = _a.dataReltioId;
+    return (react_1.default.createElement("div", { className: className, "data-reltio-id": dataReltioId }, values.map(function (value, index) { return (react_1.default.createElement(react_1.Fragment, { key: value },
         react_1.default.createElement(Component, { value: value }),
         index < values.length - 1 && ', ')); })));
 };

package/cjs/components/attributes/readMode/SpecialAttributes/Tags/Tags.d.ts

@@ -2,6 +2,7 @@
 declare type Props = {
     className?: string;
     values: string[];
+    dataReltioId?: string;
 };
 declare const Tags: ({ className, values }: Props) => JSX.Element;
 export default Tags;

package/cjs/components/attributes/readMode/SpecialAttributes/Tags/Tags.js

@@ -8,6 +8,6 @@ var SpecialAttributesArray_1 = __importDefault(require("../SpecialAttributesArra
 var Tag_1 = __importDefault(require("./Tag"));
 var Tags = function (_a) {
     var className = _a.className, values = _a.values;
-    return (react_1.default.createElement(SpecialAttributesArray_1.default, { values: values, className: className, Component: Tag_1.default }));
+    return (react_1.default.createElement(SpecialAttributesArray_1.default, { values: values, className: className, dataReltioId: "reltio-attribute-value", Component: Tag_1.default }));
 };
 exports.default = Tags;

package/esm/components/Title/Title.d.ts

@@ -1,14 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    label: string;
+    isRequired?: boolean;
+    className?: string;
+};
+declare const Title: ({ label, isRequired, className, ...otherProps }: Props) => JSX.Element;
 export default Title;
-declare function Title({ label, isRequired, className }: {
-    label: any;
-    isRequired: any;
-    className: any;
-}): JSX.Element;
-declare namespace Title {
-    namespace propTypes {
-        const label: PropTypes.Requireable<string>;
-        const isRequired: PropTypes.Requireable<boolean>;
-        const className: PropTypes.Requireable<string>;
-    }
-}
-import PropTypes from "prop-types";

package/esm/components/Title/Title.js

@@ -1,19 +1,35 @@
-import PropTypes from 'prop-types';
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import React from 'react';
 import classnames from 'classnames';
 import RequiredMark from '../RequiredMark/RequiredMark';
 import Typography from '@material-ui/core/Typography';
 import { useStyles } from './styles';
 var Title = function (_a) {
-    var label = _a.label, isRequired = _a.isRequired, className = _a.className;
+    var label = _a.label, isRequired = _a.isRequired, className = _a.className, otherProps = __rest(_a, ["label", "isRequired", "className"]);
     var styles = useStyles();
-    return (React.createElement(Typography, { className: classnames(styles.label, className), component: "span" },
+    return (React.createElement(Typography, __assign({ className: classnames(styles.label, className), component: "span" }, otherProps),
         label,
         isRequired && React.createElement(RequiredMark, null)));
 };
-Title.propTypes = {
-    label: PropTypes.string,
-    isRequired: PropTypes.bool,
-    className: PropTypes.string
-};
 export default Title;

package/esm/components/Title/styles.d.ts

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

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

@@ -76,7 +76,7 @@ var AttributeRenderer = function (_a) {
     return (React.createElement(BranchDecorator, { enabled: drawLines },
         React.createElement("div", { className: styles.wrapper },
             React.createElement("div", { className: styles.titleWrapper },
-                React.createElement(Title, { label: label, isRequired: isRequired, className: styles.title }),
+                React.createElement(Title, { label: label, isRequired: isRequired, className: styles.title, "data-reltio-id": "reltio-attribute-label" }),
                 React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues })),
             isEditableMode && React.createElement(Cardinality, { cardinality: cardinality }),
             isEditableMode && React.createElement(ErrorMessage, { message: errorMessage, className: styles.typeError }),

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

@@ -57,7 +57,7 @@ var AttributesPager = function (_a) {
             case RENDERER_TYPES.imageLine:
                 return (React.createElement(BranchDecorator, { enabled: drawLines },
                     React.createElement("div", { className: styles.wrapper },
-                        React.createElement(Title, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label }),
+                        React.createElement(Title, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label, "data-reltio-id": "reltio-attribute-label" }),
                         React.createElement(ImageAttributesLine, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, onDeleteAttribute: onDeleteAttribute, parentUri: parentUri, onChangeAttribute: onChangeAttribute, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv }))));
             default:
                 return (React.createElement(AttributeRenderer, __assign({ values: visibleValues, attributeType: attributeType, max: max, paging: paging, crosswalks: crosswalks, drawLines: drawLines, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv, nonVisibleValues: nonVisibleValues }, commonProps)));

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

@@ -62,7 +62,7 @@ var SpecialRenderer = function (_a) {
         return null;
     }
     return (React.createElement(Box, { className: styles.wrapper },
-        React.createElement(Title, { label: label, isRequired: isRequired, className: styles.title }),
+        React.createElement(Title, { label: label, isRequired: isRequired, className: styles.title, "data-reltio-id": "reltio-attribute-label" }),
         isEditableMode && React.createElement(Cardinality, { cardinality: cardinality }),
         isEditableMode && React.createElement(ErrorMessage, { message: errorMessage }),
         React.createElement(Box, { className: styles.attributesWrapper }, renderValue())));

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

@@ -67,7 +67,7 @@ var ComplexAttribute = function (_a) {
             React.createElement("div", { className: styles.titleContainer },
                 React.createElement(ArrowExpandButton, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded, className: styles.expandButton, disabled: deleted }),
                 React.createElement(ErrorWrapper, { errorMessage: errorMessage, classes: { helperText: styles.errorWrapperHelperText } },
-                    React.createElement("div", { className: classnames(styles.label, (_b = {}, _b[styles.deleted] = deleted, _b)) }, label))),
+                    React.createElement("div", { className: classnames(styles.label, (_b = {}, _b[styles.deleted] = deleted, _b)), "data-reltio-id": "reltio-attribute-complex-label" }, label))),
             React.createElement("div", { className: styles.actions },
                 edited && (React.createElement(Typography, { variant: "caption", className: styles.editedLabel },
                     "(",

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

@@ -70,7 +70,7 @@ var ImageAttributesLine = function (_a) {
             var uri = attribute.uri;
             var onOpenImageGalleryDialog = methods.onOpenImageGalleryDialog;
             return (React.createElement("div", { className: styles.image, key: uri },
-                React.createElement(Image, { src: src, overlay: renderImageActionsOverlay(methods, attribute), onClick: function () { return onOpenImageGalleryDialog(uri); }, size: { imageWidth: imageSize.imageWidth, imageHeight: imageSize.imageHeight } })));
+                React.createElement(Image, { src: src, overlay: renderImageActionsOverlay(methods, attribute), onClick: function () { return onOpenImageGalleryDialog(uri); }, size: { imageWidth: imageSize.imageWidth, imageHeight: imageSize.imageHeight }, "data-reltio-id": "reltio-attribute-value" })));
         };
         return renderImage;
     };

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

@@ -38,7 +38,7 @@ export var Roles = function (_a) {
     var handleDelete = useCallback(function () {
         onDelete({ uri: entityUri, attributeType: EntityAttrTypes.roles });
     }, [entityUri, onDelete]);
-    return (React.createElement("div", { className: styles.container },
+    return (React.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
         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/SimpleAttributeEditor/SimpleAttributeEditor.js

@@ -78,7 +78,7 @@ var SimpleAttributeEditor = function (_a) {
     var deletedProps = deleted ? { disabled: true } : {};
     return (React.createElement("div", { className: classnames(styles.editor, className) },
         React.createElement(ErrorWrapper, { errorMessage: errorMessage, className: styles.errorWrapper },
-            React.createElement("div", { className: classnames(styles['editor-value'], (_b = {}, _b[styles.deleted] = deleted, _b), (_c = {}, _c[styles['editor-read-only-value']] = !showToEdit, _c)) }, showToEdit ? (React.createElement(DataTypeValueEditor, __assign({ fieldName: attributeUriToSearchUri(attributeType.uri), value: value, dataTypeDefinition: dataTypeDefinition, error: hasError, onChange: pipe(prepareChangeData(attributeValue, attributeType), onChangeAttribute, deactivateError), fullWidth: true }, dependentLookupEditorContext, otherProps, deletedProps))) : (React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: dataTypeDefinition })))),
+            React.createElement("div", { className: classnames(styles['editor-value'], (_b = {}, _b[styles.deleted] = deleted, _b), (_c = {}, _c[styles['editor-read-only-value']] = !showToEdit, _c)), "data-reltio-id": "reltio-attribute-value" }, showToEdit ? (React.createElement(DataTypeValueEditor, __assign({ fieldName: attributeUriToSearchUri(attributeType.uri), value: value, dataTypeDefinition: dataTypeDefinition, error: hasError, onChange: pipe(prepareChangeData(attributeValue, attributeType), onChangeAttribute, deactivateError), fullWidth: true }, dependentLookupEditorContext, otherProps, deletedProps))) : (React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: dataTypeDefinition })))),
         React.createElement("div", { className: styles['editor-actions'] },
             edited && (React.createElement(Typography, { variant: "caption", className: styles.editedLabel },
                 "(",

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

@@ -39,7 +39,7 @@ var Tags = function (_a) {
     var handleDelete = useCallback(function () {
         onDelete({ uri: entityUri, attributeType: EntityAttrTypes.tags });
     }, [entityUri, onDelete]);
-    return (React.createElement("div", { className: styles.container },
+    return (React.createElement("div", { className: styles.container, "data-reltio-id": "reltio-attribute-value" },
         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" }))));
 };

package/esm/components/attributes/readMode/AttributesPager/AttributesPager.js

@@ -46,7 +46,7 @@ var AttributesPager = function (_a) {
                 return (React.createElement(MultiLineRenderer, { values: visibleValues, nonVisibleValues: nonVisibleValues, totalVisibleValues: totalVisibleValues, totalNonVisibleValues: totalNonVisibleValues, attributeType: attributeType, parentUri: parentUri, max: max, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, titleClassName: titleClassName, contentClassName: contentClassName, showNonOv: showNonOv }));
             case RENDERER_TYPES.imageLine:
                 return (React.createElement(React.Fragment, null,
-                    React.createElement(Title, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label }),
+                    React.createElement(Title, { label: attributeType === null || attributeType === void 0 ? void 0 : attributeType.label, "data-reltio-id": "reltio-attribute-label" }),
                     React.createElement(ImageAttributesLine, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, parentUri: parentUri, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv })));
             case RENDERER_TYPES.special:
                 return React.createElement(SpecialRenderer, { values: visibleValues, attributeType: attributeType });

package/esm/components/attributes/readMode/AttributesPager/MultiLineRenderer.js

@@ -34,7 +34,7 @@ var MultiLineRenderer = function (_a) {
     var hiddenValuesCount = totalVisibleValues - visibleValuesCount;
     return (React.createElement("div", { className: styles.wrapper },
         React.createElement("div", { className: styles.titleRow },
-            React.createElement(Title, { label: label, className: classnames(styles.title, titleClassName) }),
+            React.createElement(Title, { label: label, className: classnames(styles.title, titleClassName), "data-reltio-id": "reltio-attribute-label" }),
             React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues })),
         React.createElement("div", { className: styles.attributes }, shownValues.map(function (value) { return (React.createElement(Attribute, { key: value.uri, className: classnames(styles.attribute, contentClassName), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv })); })),
         showMore && (React.createElement(ShowMore, { moreNumber: min(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),

package/esm/components/attributes/readMode/AttributesPager/OneLineRenderer.js

@@ -13,7 +13,7 @@ var OneLineRenderer = function (_a) {
     var label = attributeType.label;
     return (React.createElement("div", { className: classnames(styles.collaborationWrapper, COMMENTS_CONTAINER_VISIBILITY_AREA) },
         React.createElement("div", { className: classnames(styles.titleRow, styles.wrapper) },
-            React.createElement(Title, { label: label, className: classnames(styles.title, titleClassName) }),
+            React.createElement(Title, { label: label, className: classnames(styles.title, titleClassName), "data-reltio-id": "reltio-attribute-label" }),
             React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
             React.createElement(Attribute, { className: classnames(styles.attribute, contentClassName), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, inlined: true })),
         React.createElement(CommentsContainer, { uri: value.uri, relatedObjectUris: createRelatedObjectUris(CollaborationObjectTypes.ENTITY_ATTRIBUTE, {

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

@@ -29,7 +29,7 @@ var SpecialRenderer = function (_a) {
     };
     return (React.createElement("div", { className: classnames(styles.titleRow, styles.wrapper) },
         renderIcon(styles.titleIcon),
-        React.createElement(Title, { label: label, className: styles.title }),
+        React.createElement(Title, { label: label, className: styles.title, "data-reltio-id": "reltio-attribute-label" }),
         renderValue(styles.attribute)));
 };
 export default SpecialRenderer;

package/esm/components/attributes/readMode/ComplexAttribute/ComplexAttribute.js

@@ -24,7 +24,7 @@ var ComplexAttribute = function (_a) {
     return (React.createElement("div", { className: styles.complexContainer },
         React.createElement("div", { className: classnames(styles.labelContainer, COMMENTS_CONTAINER_VISIBILITY_AREA) },
             React.createElement(ArrowExpandButton, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
-            React.createElement(Typography, { component: "span", variant: "body2", classes: { body2: styles.label } }, label),
+            React.createElement(Typography, { component: "span", variant: "body2", classes: { body2: styles.label }, "data-reltio-id": "reltio-attribute-complex-label" }, label),
             React.createElement("div", { className: styles.spacer }),
             React.createElement(CommentsContainer, { uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(CollaborationObjectTypes.ENTITY_ATTRIBUTE, {
                     uri: attributeValue.uri

package/esm/components/attributes/readMode/ImageAttributesLine/ImageAttributesLine.js

@@ -21,7 +21,7 @@ var ImageAttributesLine = function (_a) {
             var historyAttributesClassName = getHistoryAttributeClassName(imageAppearance);
             return (React.createElement("div", { className: classnames(styles.image, (_a = {},
                     _a[styles[historyAttributesClassName + 'Image']] = historyAttributesClassName,
-                    _a)), key: uri },
+                    _a)), key: uri, "data-reltio-id": "reltio-attribute-value" },
                 React.createElement(Image, { onClick: function () { return onOpenImageGalleryDialog(uri); }, className: styles[historyAttributesClassName], src: src, size: { imageWidth: imageSize.imageWidth, imageHeight: imageSize.imageHeight } })));
         };
         return renderImage;

package/esm/components/attributes/readMode/SimpleAttribute/SimpleAttribute.js

@@ -18,9 +18,9 @@ var SimpleAttribute = function (_a) {
     var dataTypeValue = (React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: getAttrDataTypeDefinition(attributeType) }));
     return inlined || historyClassName ? (React.createElement("div", { className: className },
         React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames((_b = {}, _b[styles.multilineAttribute] = !inlined, _b)) },
-            React.createElement("span", { className: styles[historyClassName] }, dataTypeValue)))) : (React.createElement("div", { className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA) },
+            React.createElement("span", { className: styles[historyClassName], "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)))) : (React.createElement("div", { className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA) },
         React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
-            React.createElement("span", { className: styles.attributeValue }, dataTypeValue)),
+            React.createElement("span", { className: styles.attributeValue, "data-reltio-id": "reltio-attribute-value" }, dataTypeValue)),
         React.createElement(CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(CollaborationObjectTypes.ENTITY_ATTRIBUTE, {
                 uri: attributeValue.uri
             }), objectType: CollaborationObjectTypes.ENTITY_ATTRIBUTE })));

package/esm/components/attributes/readMode/SpecialAttributes/Roles/Roles.js

@@ -3,6 +3,6 @@ import SpecialAttributesArray from '../SpecialAttributesArray';
 import Role from './Role';
 var Roles = function (_a) {
     var className = _a.className, values = _a.values;
-    return (React.createElement(SpecialAttributesArray, { values: values, className: className, Component: Role }));
+    return (React.createElement(SpecialAttributesArray, { values: values, className: className, dataReltioId: "reltio-attribute-value", Component: Role }));
 };
 export default Roles;

package/esm/components/attributes/readMode/SpecialAttributes/SpecialAttributesArray.d.ts

@@ -3,6 +3,7 @@ declare type Props = {
     className?: string;
     values: string[];
     Component: React.ElementType;
+    dataReltioId?: string;
 };
-declare const SpecialAttributesArray: ({ className, values, Component }: Props) => JSX.Element;
+declare const SpecialAttributesArray: ({ className, values, Component, dataReltioId }: Props) => JSX.Element;
 export default SpecialAttributesArray;

package/esm/components/attributes/readMode/SpecialAttributes/SpecialAttributesArray.js

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 var SpecialAttributesArray = function (_a) {
-    var className = _a.className, values = _a.values, Component = _a.Component;
-    return (React.createElement("div", { className: className }, values.map(function (value, index) { return (React.createElement(Fragment, { key: value },
+    var className = _a.className, values = _a.values, Component = _a.Component, dataReltioId = _a.dataReltioId;
+    return (React.createElement("div", { className: className, "data-reltio-id": dataReltioId }, values.map(function (value, index) { return (React.createElement(Fragment, { key: value },
         React.createElement(Component, { value: value }),
         index < values.length - 1 && ', ')); })));
 };

package/esm/components/attributes/readMode/SpecialAttributes/Tags/Tags.d.ts

@@ -2,6 +2,7 @@
 declare type Props = {
     className?: string;
     values: string[];
+    dataReltioId?: string;
 };
 declare const Tags: ({ className, values }: Props) => JSX.Element;
 export default Tags;

package/esm/components/attributes/readMode/SpecialAttributes/Tags/Tags.js

@@ -3,6 +3,6 @@ import SpecialAttributesArray from '../SpecialAttributesArray';
 import Tag from './Tag';
 var Tags = function (_a) {
     var className = _a.className, values = _a.values;
-    return (React.createElement(SpecialAttributesArray, { values: values, className: className, Component: Tag }));
+    return (React.createElement(SpecialAttributesArray, { values: values, className: className, dataReltioId: "reltio-attribute-value", Component: Tag }));
 };
 export default Tags;

package/package.json

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