@reltio/components 1.4.2199 → 1.4.2200

package/cjs/features/workflow/AttributesChanges/AttributesChanges.js

@@ -1,64 +1,25 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AttributesChanges = void 0;
-var react_1 = __importStar(require("react"));
-var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var ramda_1 = require("ramda");
-var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var merge_1 = require("./helpers/merge");
+var react_1 = __importDefault(require("react"));
 var ShowMoreLink_1 = require("./components/ShowMoreLink");
 var DCRChangesList_1 = require("./components/DCRChangesList");
 var AttributesChangesContext_1 = require("./AttributesChangesContext");
 var useCollapsibleList_1 = require("./useCollapsibleList");
-var EntityUriLink_1 = require("../../../EntityUriLink");
-var dcr_1 = require("../helpers/dcr");
-var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
-var styles_1 = require("./styles");
+var DCREntityUriLink_1 = require("../DCREntityUriLink/DCREntityUriLink");
+var useChangesList_1 = require("../hooks/useChangesList");
+var AttributesChanges_module_css_1 = __importDefault(require("./AttributesChanges.module.css"));
 var AttributesChanges = function (_a) {
     var changes = _a.changes, dcrUri = _a.dcrUri, objectsInfo = _a.objectsInfo, entityInfo = _a.entityInfo, relationsInfo = _a.relationsInfo, max = _a.max;
-    var styles = (0, styles_1.useStyles)();
-    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
-    var _b = (0, react_1.useMemo)(function () { return (0, merge_1.mergeChanges)(metadata, changes, entityInfo, relationsInfo); }, [metadata, changes, entityInfo, relationsInfo]), mergedEntityChanges = _b[0], mergedRelationsChanges = _b[1];
-    var changesList = (0, react_1.useMemo)(function () {
-        var relationshipTitle = { label: ui_i18n_1.default.text('Relationships') };
-        return mergedRelationsChanges.length > 0
-            ? (0, ramda_1.flatten)([mergedEntityChanges, relationshipTitle, mergedRelationsChanges])
-            : mergedEntityChanges;
-    }, [mergedEntityChanges, mergedRelationsChanges]);
-    var _c = (0, useCollapsibleList_1.useCollapsibleList)(changesList, max), isExpanded = _c.isExpanded, onToggle = _c.onToggle, itemsToShow = _c.itemsToShow, collapsedSuggestionsCount = _c.collapsedSuggestionsCount;
-    var entityUri = (0, ramda_1.ifElse)((0, ramda_1.any)(dcr_1.isCreateEntityOperation), (0, ramda_1.always)((0, dcr_1.getEntityUriForChangeRequest)(dcrUri, entityInfo.uri)), (0, ramda_1.always)((0, mdm_sdk_1.getEntityUriForLink)(entityInfo)))((0, ramda_1.propOr)([], entityInfo.uri, changes));
-    var screen = (0, ramda_1.ifElse)((0, ramda_1.any)(dcr_1.isCreateEntityOperation), (0, ramda_1.always)('dcrReview'), (0, ramda_1.always)('profile'))((0, ramda_1.propOr)([], entityInfo.uri, changes));
+    var changesList = (0, useChangesList_1.useChangesList)({ changes: changes, entityInfo: entityInfo, relationsInfo: relationsInfo });
+    var _b = (0, useCollapsibleList_1.useCollapsibleList)(changesList, max), isExpanded = _b.isExpanded, onToggle = _b.onToggle, itemsToShow = _b.itemsToShow, collapsedSuggestionsCount = _b.collapsedSuggestionsCount;
     return (react_1.default.createElement(AttributesChangesContext_1.AttributesChangesContext.Provider, { value: objectsInfo },
-        react_1.default.createElement("div", { className: styles.container, "data-reltio-id": "changes-container" },
-            react_1.default.createElement(EntityUriLink_1.EntityUriLink, { className: styles.uri, value: entityUri, screen: screen },
-                react_1.default.createElement("div", { className: styles.label }, (0, mdm_sdk_1.getLabel)(entityInfo.label))),
+        react_1.default.createElement("div", { className: AttributesChanges_module_css_1.default.container, "data-reltio-id": "changes-container" },
+            react_1.default.createElement(DCREntityUriLink_1.DCREntityUriLink, { entityInfo: entityInfo, changes: changes, dcrUri: dcrUri }),
             react_1.default.createElement(DCRChangesList_1.DCRChangesList, { changes: itemsToShow }),
-            collapsedSuggestionsCount > 0 && (react_1.default.createElement(ShowMoreLink_1.ShowMoreLink, { onClick: onToggle, suggestionsCount: collapsedSuggestionsCount, isExpanded: isExpanded, className: styles.showMoreLink })))));
+            collapsedSuggestionsCount > 0 && (react_1.default.createElement(ShowMoreLink_1.ShowMoreLink, { onClick: onToggle, suggestionsCount: collapsedSuggestionsCount, isExpanded: isExpanded, className: AttributesChanges_module_css_1.default.showMoreLink })))));
 };
 exports.AttributesChanges = AttributesChanges;

package/cjs/features/workflow/AttributesChanges/AttributesChanges.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"container":"AttributesChanges-container--bxfyh","showMoreLink":"AttributesChanges-showMoreLink--vgdjF"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.AttributesChanges-container--bxfyh{background-color:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.03);border-radius:3px;box-sizing:border-box;margin:12px 16px 12px 0;padding:10px}.AttributesChanges-showMoreLink--vgdjF{margin-top:8px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/features/workflow/AttributesChanges/components/ChangeView/ChangeView.js

@@ -8,22 +8,20 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var ramda_1 = require("ramda");
 var ArrowRightAlt_1 = __importDefault(require("@mui/icons-material/ArrowRightAlt"));
-var Chip_1 = __importDefault(require("@mui/material/Chip"));
-var common_1 = require("../../../helpers/common");
-var styles_1 = require("./styles");
+var OperationChip_1 = require("../../../OperationChip");
+var ChangeView_module_css_1 = __importDefault(require("./ChangeView.module.css"));
 var ChangeView = function (_a) {
     var label = _a.label, oldValue = _a.oldValue, newValue = _a.newValue, operation = _a.operation, className = _a.className;
-    var styles = (0, styles_1.useStyles)();
     var value = oldValue || newValue;
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.field, className) },
-        react_1.default.createElement("span", { className: styles.fieldName },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(ChangeView_module_css_1.default.field, className) },
+        react_1.default.createElement("span", { className: ChangeView_module_css_1.default.fieldName },
             label,
             ":"),
-        !(0, ramda_1.isNil)(value) && (react_1.default.createElement("span", { className: styles.difference },
+        !(0, ramda_1.isNil)(value) && (react_1.default.createElement("span", { className: ChangeView_module_css_1.default.difference },
             value,
             newValue && oldValue && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(ArrowRightAlt_1.default, { "data-reltio-id": "arrow-right", className: styles.arrow }),
+                react_1.default.createElement(ArrowRightAlt_1.default, { "data-reltio-id": "arrow-right", className: ChangeView_module_css_1.default.arrow }),
                 newValue)))),
-        operation && (react_1.default.createElement(Chip_1.default, { variant: "outlined", label: (0, common_1.getOperationLabel)(operation), className: (0, classnames_1.default)(styles.chip, operation) }))));
+        operation && react_1.default.createElement(OperationChip_1.OperationChip, { operation: operation })));
 };
 exports.ChangeView = ChangeView;

package/cjs/features/workflow/AttributesChanges/components/ChangeView/ChangeView.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"field":"ChangeView-field--HIW58","fieldName":"ChangeView-fieldName--jsab0","difference":"ChangeView-difference--dJqx0","arrow":"ChangeView-arrow--0Lel-"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ChangeView-field--HIW58{color:var(--mui-palette-text-primary);font-size:12px;line-height:20px;margin-top:6px;overflow:hidden;word-break:break-word}.ChangeView-fieldName--jsab0{color:var(--mui-palette-text-secondary);margin-right:8px}.ChangeView-difference--dJqx0{margin-right:8px}.ChangeView-arrow--0Lel-{color:var(--mui-palette-text-primary);font-size:12px;margin:0 4px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/features/workflow/AttributesChanges/components/DCRChangesList/DCRChangesList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Diff, Title } from '../../types';
+import { Diff, Title } from '../../../types';
 type Props = {
     changes: (Diff | Title)[];
 };

package/cjs/features/workflow/AttributesChanges/components/DiffRenderer/DiffRenderer.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { Diff } from '../../types';
-export declare const DiffRenderer: ({ label, level, attributeType, attributeValue, oldValue, newValue, operation }: Diff) => React.JSX.Element;
+import { Diff } from '../../../types';
+export declare const DiffRenderer: ({ label, level, attributeType, relationType, attributeValue, oldValue, newValue, operation }: Diff) => React.JSX.Element;

package/cjs/features/workflow/AttributesChanges/components/DiffRenderer/DiffRenderer.js

@@ -28,55 +28,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DiffRenderer = void 0;
 var react_1 = __importStar(require("react"));
-var ramda_1 = require("ramda");
-var classnames_1 = __importDefault(require("classnames"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var ChangeView_1 = require("../ChangeView");
-var AttributesChangesContext_1 = require("../../AttributesChangesContext");
 var common_1 = require("../../../helpers/common");
-var DataTypeValue_1 = require("../../../../../DataTypeValue");
-var EntityUriLink_1 = require("../../../../../EntityUriLink");
+var useCssVariableStyles_1 = require("../../../../../hooks/useCssVariableStyles");
 var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
-var styles_1 = require("./styles");
+var DataTypeValue_1 = require("../../../../../DataTypeValue");
+var RelationEntityLink_1 = require("../../../RelationEntityLink");
+var DiffRenderer_module_css_1 = __importDefault(require("./DiffRenderer.module.css"));
 var DiffRenderer = function (_a) {
-    var label = _a.label, level = _a.level, attributeType = _a.attributeType, attributeValue = _a.attributeValue, oldValue = _a.oldValue, newValue = _a.newValue, operation = _a.operation;
-    var styles = (0, styles_1.useStyles)({ level: level });
-    var objectsInfo = (0, react_1.useContext)(AttributesChangesContext_1.AttributesChangesContext);
-    var entityUri = (0, MdmModuleContext_1.useMdmEntityUri)();
-    var getLinkDescription = (0, react_1.useCallback)(function () {
-        var _a, _b, _c;
-        if ((0, mdm_sdk_1.isReference)(attributeType)) {
-            var value = (_b = (_a = attributeValue.value) === null || _a === void 0 ? void 0 : _a.newValue) !== null && _b !== void 0 ? _b : (_c = attributeValue.value) === null || _c === void 0 ? void 0 : _c.oldValue;
-            return (0, common_1.getAttributeDescription)(attributeType, value || attributeValue, entityUri, objectsInfo);
-        }
-        else if ('endObject' in attributeType) {
-            var _d = attributeValue, endObjectUri = _d.endObjectUri, endObjectLabel = _d.endObjectLabel;
-            return {
-                objectUri: endObjectUri,
-                objectLabel: endObjectLabel
-            };
-        }
-    }, [attributeType, attributeValue, entityUri, objectsInfo]);
-    var renderLink = (0, react_1.useCallback)(function () {
-        var _a, _b;
-        var _c;
-        var _d = getLinkDescription() || {}, objectUri = _d.objectUri, objectLabel = _d.objectLabel;
-        if (!(0, ramda_1.isNil)(objectUri) && !(0, ramda_1.isNil)(objectLabel)) {
-            var isNotExist = ((_c = objectsInfo[objectUri]) === null || _c === void 0 ? void 0 : _c.isExist) === false;
-            return (react_1.default.createElement(EntityUriLink_1.EntityUriLink, { value: objectUri, className: (0, classnames_1.default)(styles.linkContainer, (_a = {}, _a[styles.disabledLink] = isNotExist, _a)) },
-                react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.linkLabel, (_b = {}, _b[styles.label] = isNotExist, _b)) }, (0, mdm_sdk_1.getLabel)(objectLabel))));
-        }
-        return null;
-    }, [getLinkDescription, objectsInfo, styles]);
+    var label = _a.label, level = _a.level, attributeType = _a.attributeType, relationType = _a.relationType, attributeValue = _a.attributeValue, oldValue = _a.oldValue, newValue = _a.newValue, operation = _a.operation;
+    var variableStyles = (0, useCssVariableStyles_1.useCssVariableStyles)({
+        '--level': level
+    });
+    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     var changeLabel = (0, react_1.useMemo)(function () {
         return (react_1.default.createElement("span", null,
             label,
-            renderLink()));
-    }, [label, renderLink]);
+            react_1.default.createElement(RelationEntityLink_1.RelationEntityLink, { attributeOrRelationType: attributeType || relationType, attributeValue: attributeValue })));
+    }, [label, attributeType, relationType, attributeValue]);
     var renderValue = (0, react_1.useCallback)(function (value) {
         var attrValue = (0, mdm_sdk_1.getAttributeValue)(value);
-        return (react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: attrValue, dataTypeDefinition: (0, common_1.getDataTypeDefinition)(attributeType, attrValue) }));
-    }, [attributeType]);
-    return (react_1.default.createElement(ChangeView_1.ChangeView, { className: styles.change, label: changeLabel, oldValue: oldValue && renderValue(oldValue), newValue: newValue && renderValue(newValue), operation: operation }));
+        var isRolesOrTags = attributeType.uri === mdm_sdk_1.EntityAttrTypes.roles.uri || attributeType.uri === mdm_sdk_1.EntityAttrTypes.tags.uri;
+        var preparedValue = isRolesOrTags
+            ? (0, common_1.prepareRolesOrTagsValue)(metadata, attrValue, attributeType.uri)
+            : attrValue;
+        return (react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: preparedValue, dataTypeDefinition: (0, common_1.getDataTypeDefinition)(attributeType, attrValue) }));
+    }, [attributeType, metadata]);
+    return (react_1.default.createElement("div", { className: DiffRenderer_module_css_1.default.change, style: variableStyles },
+        react_1.default.createElement(ChangeView_1.ChangeView, { label: changeLabel, oldValue: oldValue && renderValue(oldValue), newValue: newValue && renderValue(newValue), operation: operation })));
 };
 exports.DiffRenderer = DiffRenderer;

package/cjs/features/workflow/AttributesChanges/components/DiffRenderer/DiffRenderer.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"change":"DiffRenderer-change--ep0bt"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.DiffRenderer-change--ep0bt{margin-left:calc(var(--level, 0)*16px)}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/features/workflow/AttributesChanges/useCollapsibleList.d.ts

@@ -1,4 +1,4 @@
-import { Diff, Title } from './types';
+import { Diff, Title } from '../types';
 export declare const useCollapsibleList: (items: (Diff | Title)[], limit?: number) => {
     isExpanded: boolean;
     onToggle: () => void;

package/cjs/features/workflow/ChangeRequestEditor/ChangeRequestEditor.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
-import { ChangeRequest, WorkflowTaskData } from '@reltio/mdm-sdk';
+import { ChangeRequest, WorkflowTaskData, GroupedObjectsInfo } from '@reltio/mdm-sdk';
 type Props = {
     dcr: ChangeRequest;
     task: WorkflowTaskData;
+    groupedObjects: GroupedObjectsInfo[];
 };
-export declare const ChangeRequestEditor: ({ dcr, task: _task }: Props) => React.JSX.Element;
+export declare const ChangeRequestEditor: ({ dcr, task, groupedObjects }: Props) => React.JSX.Element;
 export {};

package/cjs/features/workflow/ChangeRequestEditor/ChangeRequestEditor.js

@@ -6,13 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ChangeRequestEditor = void 0;
 var react_1 = __importDefault(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
+var Typography_1 = __importDefault(require("@mui/material/Typography"));
+var SuggestedChanges_1 = __importDefault(require("../../../icons/SuggestedChanges"));
+var EntityChangesGroup_1 = require("./components/EntityChangesGroup");
 var ChangeRequestEditor_module_css_1 = __importDefault(require("./ChangeRequestEditor.module.css"));
 var ChangeRequestEditor = function (_a) {
-    var dcr = _a.dcr, _task = _a.task;
-    var dcrLoaded = !!dcr;
-    if (!dcrLoaded) {
-        return null;
-    }
-    return react_1.default.createElement("div", { className: ChangeRequestEditor_module_css_1.default.container }, ui_i18n_1.default.text('DCR changes'));
+    var dcr = _a.dcr, task = _a.task, groupedObjects = _a.groupedObjects;
+    var dcrLoaded = !!dcr && groupedObjects.length > 0;
+    return (react_1.default.createElement("div", { className: ChangeRequestEditor_module_css_1.default.container },
+        react_1.default.createElement("div", { className: ChangeRequestEditor_module_css_1.default.header },
+            react_1.default.createElement("div", { className: ChangeRequestEditor_module_css_1.default.suggestedChangesIcon },
+                react_1.default.createElement(SuggestedChanges_1.default, null)),
+            react_1.default.createElement(Typography_1.default, { variant: "h6", className: ChangeRequestEditor_module_css_1.default.suggestedChangesTitle }, ui_i18n_1.default.text('Suggested changes'))),
+        dcrLoaded ? (groupedObjects.map(function (object, index) { return (react_1.default.createElement(EntityChangesGroup_1.EntityChangesGroup, { key: "entity-".concat(index), entityInfo: object.entity, relationsInfo: object.relations, task: task, dcr: dcr })); })) : (react_1.default.createElement(EntityChangesGroup_1.SkeletonEntityChangesGroupLoader, null))));
 };
 exports.ChangeRequestEditor = ChangeRequestEditor;

package/cjs/features/workflow/ChangeRequestEditor/ChangeRequestEditor.module.css.js

@@ -1,9 +1,9 @@
-const styles = {"container":"ChangeRequestEditor-container--pOvfN"};
+const styles = {"container":"ChangeRequestEditor-container--pOvfN","suggestedChangesTitle":"ChangeRequestEditor-suggestedChangesTitle--Vln-y","header":"ChangeRequestEditor-header--ZS-Cs","showBorderOnScroll":"ChangeRequestEditor-showBorderOnScroll--CiFhA","suggestedChangesIcon":"ChangeRequestEditor-suggestedChangesIcon--pIDL-"};
 if (typeof document !== 'undefined') {
     const head = document.head || document.getElementsByTagName('head')[0]
     const style = document.createElement('style');
     style.type = 'text/css'
-    style.innerHTML = `.ChangeRequestEditor-container--pOvfN{border:1px solid rgba(0,0,0,.03);border-radius:8px;padding:16px}`;
+    style.innerHTML = `.ChangeRequestEditor-container--pOvfN{background-color:#fff;border:1px solid rgba(0,0,0,.12);border-radius:8px;bottom:0;display:flex;flex-direction:column;gap:16px;left:0;overflow:auto;padding-bottom:16px;position:absolute;right:0;top:0;scroll-timeline-name:--changes-scroll;scroll-timeline-axis:block}.ChangeRequestEditor-suggestedChangesTitle--Vln-y{color:var(--mui-palette-text-primary);font-size:16px;font-weight:500}.ChangeRequestEditor-header--ZS-Cs{align-items:center;animation:ChangeRequestEditor-showBorderOnScroll--CiFhA 1s linear both;background:#fff;border-bottom:1px solid transparent;box-shadow:none;display:flex;gap:16px;margin-bottom:-16px;padding:16px;position:sticky;top:0;z-index:1;animation-timeline:--changes-scroll;animation-range:0 16px}.ChangeRequestEditor-suggestedChangesIcon--pIDL-{height:32px;width:32px}@keyframes ChangeRequestEditor-showBorderOnScroll--CiFhA{0%{border-bottom-color:transparent;box-shadow:none}to{border-bottom-color:rgba(0,0,0,.12);box-shadow:0 2px 6px rgba(0,0,0,.06)}}`;
     head.appendChild(style);
 }
 module.exports = styles;

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemEditor.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DCRValue } from '@reltio/mdm-sdk';
+import { Diff } from '../../../types';
+type Props = {
+    change: Diff;
+    onValueChange: (id: string, newValue: DCRValue) => void;
+    editable?: boolean;
+};
+export declare const ChangeItemEditor: ({ change, onValueChange, editable }: Props) => React.JSX.Element;
+export {};

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemEditor.js

@@ -0,0 +1,72 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeItemEditor = void 0;
+var react_1 = __importStar(require("react"));
+var ramda_1 = require("ramda");
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var common_1 = require("../../../helpers/common");
+var OperationChip_1 = require("../../../OperationChip");
+var DataTypeValue_1 = require("../../../../../DataTypeValue");
+var RelationEntityLink_1 = require("../../../RelationEntityLink");
+var ChangeItemLabel_1 = require("./ChangeItemLabel");
+var DCRValueEditor_1 = require("./DCRValueEditor");
+var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
+var ChangeItemEditor_module_css_1 = __importDefault(require("./ChangeItemEditor.module.css"));
+var ChangeItemEditor = function (_a) {
+    var _b, _c, _d;
+    var change = _a.change, onValueChange = _a.onValueChange, _e = _a.editable, editable = _e === void 0 ? true : _e;
+    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
+    var isUpdateOperation = change.operation === mdm_sdk_1.DCROperationTypes.EDITED;
+    var isAddOperation = change.operation === mdm_sdk_1.DCROperationTypes.ADDED;
+    var hasAnyValue = Boolean(change.oldValue || change.newValue);
+    var oldValue = (0, mdm_sdk_1.getAttributeValue)(change.oldValue);
+    var newValue = (0, mdm_sdk_1.getAttributeValue)(change.newValue);
+    var hasNewValue = !(0, ramda_1.isNil)(newValue);
+    var dataTypeDefinition = (0, react_1.useMemo)(function () {
+        return change.attributeType && (0, common_1.getDataTypeDefinition)(change.attributeType, newValue || oldValue);
+    }, [change.attributeType, newValue, oldValue]);
+    var shouldShowValueEditor = (isUpdateOperation || isAddOperation) && editable;
+    var shouldShowOperationChip = hasAnyValue && change.operation;
+    var isRolesOrTags = ((_b = change === null || change === void 0 ? void 0 : change.attributeType) === null || _b === void 0 ? void 0 : _b.uri) === mdm_sdk_1.EntityAttrTypes.roles.uri ||
+        ((_c = change === null || change === void 0 ? void 0 : change.attributeType) === null || _c === void 0 ? void 0 : _c.uri) === mdm_sdk_1.EntityAttrTypes.tags.uri;
+    var preparedValue = (0, react_1.useMemo)(function () {
+        return isRolesOrTags
+            ? (0, common_1.prepareRolesOrTagsValue)(metadata, newValue, change.attributeType.uri)
+            : newValue;
+    }, [isRolesOrTags, metadata, newValue, (_d = change.attributeType) === null || _d === void 0 ? void 0 : _d.uri]);
+    return (react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.attributeRow },
+        react_1.default.createElement(ChangeItemLabel_1.ChangeItemLabel, { change: change, className: ChangeItemEditor_module_css_1.default.labelColumn, showLabel: !isUpdateOperation }),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.valueColumn },
+            react_1.default.createElement(RelationEntityLink_1.RelationEntityLink, { attributeOrRelationType: change.attributeType || change.relationType, attributeValue: change.attributeValue, className: ChangeItemEditor_module_css_1.default.relationEntityLink }),
+            shouldShowValueEditor ? (react_1.default.createElement(DCRValueEditor_1.DCRValueEditor, { attributeType: change.attributeType, value: change.newValue, onChange: onValueChange })) : (hasNewValue && (react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.value },
+                react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: preparedValue, dataTypeDefinition: dataTypeDefinition }))))),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.revertColumn }),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.operationColumn }, shouldShowOperationChip && (react_1.default.createElement(OperationChip_1.OperationChip, { operation: change.operation, size: "small", variant: "outlined" })))));
+};
+exports.ChangeItemEditor = ChangeItemEditor;

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemEditor.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"attributeRow":"ChangeItemEditor-attributeRow--bITG5","labelColumn":"ChangeItemEditor-labelColumn--6B4w4","changeLabel":"ChangeItemEditor-changeLabel--C7s6T","valueColumn":"ChangeItemEditor-valueColumn--q9456","revertColumn":"ChangeItemEditor-revertColumn--T5mVE","operationColumn":"ChangeItemEditor-operationColumn--me-4D","previousValue":"ChangeItemEditor-previousValue--lTOVp","previousValueText":"ChangeItemEditor-previousValueText--gAnge","editor":"ChangeItemEditor-editor--hyLPa","arrow":"ChangeItemEditor-arrow--IXZ6i","value":"ChangeItemEditor-value--GxSUf","columnSkeleton":"ChangeItemEditor-columnSkeleton---iGmr","relationEntityLink":"ChangeItemEditor-relationEntityLink--Vr7Z-"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.ChangeItemEditor-attributeRow--bITG5{align-items:center;display:flex;font-size:16px;gap:16px}.ChangeItemEditor-labelColumn--6B4w4{box-sizing:border-box;min-height:21px;width:170px}.ChangeItemEditor-changeLabel--C7s6T{color:var(--mui-palette-text-secondary);font-size:14px;font-weight:400;letter-spacing:.24px;padding-left:calc(var(--level, 0)*16px)}.ChangeItemEditor-valueColumn--q9456{display:flex;flex:1;flex-direction:column;gap:4px}.ChangeItemEditor-revertColumn--T5mVE{margin-left:-9px;width:24px}.ChangeItemEditor-operationColumn--me-4D{width:145px}.ChangeItemEditor-previousValue--lTOVp{align-items:center;display:flex;line-height:16px;padding:6px 12px 7px}.ChangeItemEditor-previousValueText--gAnge{color:var(--mui-palette-text-primary);letter-spacing:.24px}.ChangeItemEditor-editor--hyLPa{min-height:40px}.ChangeItemEditor-arrow--IXZ6i{color:var(--mui-palette-text-secondary);font-weight:700;margin:0 5px}.ChangeItemEditor-value--GxSUf{font-size:16px;padding:8px}.ChangeItemEditor-columnSkeleton---iGmr{transform:none}.ChangeItemEditor-relationEntityLink--Vr7Z-{font-size:16px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemLabel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Diff } from '../../../types';
+type Props = {
+    change: Diff;
+    showLabel?: boolean;
+    className?: string;
+};
+export declare const ChangeItemLabel: ({ change, className, showLabel }: Props) => React.JSX.Element;
+export {};

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemLabel.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeItemLabel = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var useCssVariableStyles_1 = require("../../../../../hooks/useCssVariableStyles");
+var ChangeItemEditor_module_css_1 = __importDefault(require("./ChangeItemEditor.module.css"));
+var ChangeItemLabel = function (_a) {
+    var change = _a.change, className = _a.className, _b = _a.showLabel, showLabel = _b === void 0 ? true : _b;
+    var _c = change.level, level = _c === void 0 ? 0 : _c, label = change.label;
+    var variableStyles = (0, useCssVariableStyles_1.useCssVariableStyles)({
+        '--level': level
+    });
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(ChangeItemEditor_module_css_1.default.changeLabel, className), style: variableStyles }, showLabel && label));
+};
+exports.ChangeItemLabel = ChangeItemLabel;

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemOldValue.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Diff } from '../../../types';
+type Props = {
+    change: Diff;
+};
+export declare const ChangeItemOldValue: ({ change }: Props) => React.JSX.Element;
+export {};

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/ChangeItemOldValue.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangeItemOldValue = void 0;
+var react_1 = __importDefault(require("react"));
+var ramda_1 = require("ramda");
+var East_1 = __importDefault(require("@mui/icons-material/East"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var common_1 = require("../../../helpers/common");
+var DataTypeValue_1 = require("../../../../../DataTypeValue");
+var ChangeItemLabel_1 = require("./ChangeItemLabel");
+var ChangeItemEditor_module_css_1 = __importDefault(require("./ChangeItemEditor.module.css"));
+var ChangeItemOldValue = function (_a) {
+    var change = _a.change;
+    var isUpdateOperation = change.operation === mdm_sdk_1.DCROperationTypes.EDITED;
+    var oldValue = (0, mdm_sdk_1.getAttributeValue)(change.oldValue);
+    var newValue = (0, mdm_sdk_1.getAttributeValue)(change.newValue);
+    var dataTypeDefinition = change.attributeType && (0, common_1.getDataTypeDefinition)(change.attributeType, newValue !== null && newValue !== void 0 ? newValue : oldValue);
+    var hasOldValue = !(0, ramda_1.isNil)(oldValue);
+    return (react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.attributeRow },
+        react_1.default.createElement(ChangeItemLabel_1.ChangeItemLabel, { change: change, className: ChangeItemEditor_module_css_1.default.labelColumn }),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.valueColumn }, isUpdateOperation && hasOldValue && (react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.previousValue },
+            react_1.default.createElement("span", { className: ChangeItemEditor_module_css_1.default.previousValueText },
+                react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: oldValue, dataTypeDefinition: dataTypeDefinition })),
+            react_1.default.createElement("span", { className: ChangeItemEditor_module_css_1.default.arrow },
+                react_1.default.createElement(East_1.default, null))))),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.revertColumn }),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.operationColumn })));
+};
+exports.ChangeItemOldValue = ChangeItemOldValue;

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/DCRValueEditor.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { AttributeType, DCRValue, ChangeValue } from '@reltio/mdm-sdk';
+type Props = {
+    attributeType: AttributeType;
+    value: ChangeValue;
+    onChange: (id: string, newValue: DCRValue) => void;
+};
+export declare const DCRValueEditor: ({ attributeType, value, onChange }: Props) => React.JSX.Element;
+export {};

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/DCRValueEditor.js

@@ -0,0 +1,44 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DCRValueEditor = void 0;
+var react_1 = __importStar(require("react"));
+var DCRValueEditorFactory_1 = require("./DCRValueEditorFactory");
+var ChangeItemEditor_module_css_1 = __importDefault(require("./ChangeItemEditor.module.css"));
+var DCRValueEditor = function (_a) {
+    var attributeType = _a.attributeType, value = _a.value, onChange = _a.onChange;
+    var handleChange = (0, react_1.useCallback)(function (updatedValue) {
+        onChange(attributeType.uri, updatedValue);
+    }, [attributeType.uri, onChange]);
+    return (react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.editor }, DCRValueEditorFactory_1.DCRValueEditorFactory.build({
+        attributeType: attributeType,
+        value: value,
+        onChange: handleChange
+    })));
+};
+exports.DCRValueEditor = DCRValueEditor;

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/DCRValueEditorFactory.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AttributeType, DCRValue, DataTypeDefinition, ChangeValue } from '@reltio/mdm-sdk';
+type Props = {
+    attributeType: AttributeType;
+    value: ChangeValue;
+    onChange: (value: DCRValue) => void;
+    dataTypeDefinition?: DataTypeDefinition;
+};
+export declare class DCRValueEditorFactory {
+    static build({ attributeType, value, onChange }: Props): React.JSX.Element;
+}
+export {};

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/DCRValueEditorFactory.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DCRValueEditorFactory = void 0;
+var react_1 = __importDefault(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var DataTypeValueEditor_1 = require("../../../../../DataTypeValueEditor");
+var attributesView_1 = require("../../../../../helpers/attributesView");
+var common_1 = require("../../../helpers/common");
+var RolesInput_1 = require("../../../../../RolesInput/RolesInput");
+var TagsInput_1 = require("../../../../../TagsInput/TagsInput");
+var DCRValueEditorFactory = /** @class */ (function () {
+    function DCRValueEditorFactory() {
+    }
+    DCRValueEditorFactory.build = function (_a) {
+        var attributeType = _a.attributeType, value = _a.value, onChange = _a.onChange;
+        var dcrValue = (0, mdm_sdk_1.getAttributeValue)(value);
+        switch (attributeType.uri) {
+            case mdm_sdk_1.EntityAttrTypes.roles.uri: {
+                return react_1.default.createElement(RolesInput_1.RolesInput, { value: (0, mdm_sdk_1.wrapInArrayIfNeeded)(dcrValue), onChange: onChange });
+            }
+            case mdm_sdk_1.EntityAttrTypes.tags.uri: {
+                return react_1.default.createElement(TagsInput_1.TagsInput, { value: (0, mdm_sdk_1.wrapInArrayIfNeeded)(dcrValue), onChange: onChange });
+            }
+            default: {
+                var dataTypeDefinition = (0, common_1.getDataTypeDefinition)(attributeType, dcrValue);
+                var editorValue = value && dataTypeDefinition
+                    ? (0, attributesView_1.attributeValueToEditorValue)(value, dataTypeDefinition)
+                    : null;
+                return (react_1.default.createElement(DataTypeValueEditor_1.DataTypeValueEditor, { fieldName: attributeType.uri, value: editorValue, dataTypeDefinition: dataTypeDefinition, onChange: onChange, fullWidth: true }));
+            }
+        }
+    };
+    return DCRValueEditorFactory;
+}());
+exports.DCRValueEditorFactory = DCRValueEditorFactory;

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/SkeletonChangeItemEditorLoader.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SkeletonChangeItemEditorLoader: () => React.JSX.Element;

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/SkeletonChangeItemEditorLoader.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SkeletonChangeItemEditorLoader = void 0;
+var react_1 = __importDefault(require("react"));
+var Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
+var ChangeItemEditor_module_css_1 = __importDefault(require("./ChangeItemEditor.module.css"));
+var SkeletonChangeItemEditorLoader = function () {
+    return (react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.attributeRow },
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.labelColumn },
+            react_1.default.createElement(Skeleton_1.default, { variant: "text", width: "90%", height: 18, className: ChangeItemEditor_module_css_1.default.columnSkeleton })),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.valueColumn },
+            react_1.default.createElement(Skeleton_1.default, { variant: "text", height: 40, className: ChangeItemEditor_module_css_1.default.columnSkeleton })),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.revertColumn }),
+        react_1.default.createElement("div", { className: ChangeItemEditor_module_css_1.default.operationColumn },
+            react_1.default.createElement(Skeleton_1.default, { variant: "rectangular", width: 60, height: 20, className: ChangeItemEditor_module_css_1.default.columnSkeleton }))));
+};
+exports.SkeletonChangeItemEditorLoader = SkeletonChangeItemEditorLoader;

package/cjs/features/workflow/ChangeRequestEditor/components/ChangeItemEditor/index.d.ts

@@ -0,0 +1,3 @@
+export { ChangeItemEditor } from './ChangeItemEditor';
+export { ChangeItemOldValue } from './ChangeItemOldValue';
+export { SkeletonChangeItemEditorLoader } from './SkeletonChangeItemEditorLoader';