@reltio/components 1.4.2227 → 1.4.2228

package/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
-import { AttributeType, AttributeValue } from '@reltio/mdm-sdk';
+import { AttributeType, AttributeValue, OvDetails } from '@reltio/mdm-sdk';
 type SlotParams<T> = {
     attributeType?: AttributeType;
     attributeValue: T;
 };
+type WrapperParams = {
+    uri: string;
+    children: React.ReactNode;
+};
 type Props = {
     values: AttributeValue[];
     attributeType: AttributeType;
@@ -11,7 +15,11 @@ type Props = {
     valueContainerClassName?: string;
     LabelRenderer?: ({ attributeType, attributeValue }: SlotParams<AttributeValue>) => React.ReactElement;
     RightSlot?: ({ attributeType, attributeValue }: SlotParams<AttributeValue>) => React.ReactElement;
+    FallbackSlot?: ({ ovDetails }: {
+        ovDetails: OvDetails;
+    }) => React.ReactElement;
     showNonOv?: boolean;
+    AttributeValueWrapper?: ({ uri, children }: WrapperParams) => React.ReactElement;
 };
 declare const _default: React.MemoExoticComponent<({ expanded, LabelRenderer, RightSlot, ...props }: Props) => React.JSX.Element>;
 export default _default;

package/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.js

@@ -27,11 +27,11 @@ import { ReadOnlyImageAttributesLine } from '../ReadOnlyImageAttributesLine';
 import { LazyRenderer } from '../LazyRenderer';
 var lazyRendererStyle = { height: '18px' };
 var renderAttributesList = function (_a) {
-    var values = _a.values, valueContainerClassName = _a.valueContainerClassName, props = __rest(_a, ["values", "valueContainerClassName"]);
+    var values = _a.values, valueContainerClassName = _a.valueContainerClassName, AttributeValueWrapper = _a.AttributeValueWrapper, props = __rest(_a, ["values", "valueContainerClassName", "AttributeValueWrapper"]);
     var enabledLazyRendering = (values === null || values === void 0 ? void 0 : values.length) > 20;
     return (React.createElement(React.Fragment, null, (values || []).map(function (attributeValue) { return (React.createElement(LazyRenderer, { key: attributeValue.uri, className: valueContainerClassName, enabled: enabledLazyRendering, style: lazyRendererStyle },
-        React.createElement("div", { className: valueContainerClassName },
-            React.createElement(ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props))))); })));
+        React.createElement("div", { className: valueContainerClassName }, AttributeValueWrapper ? (React.createElement(AttributeValueWrapper, { uri: attributeValue.uri },
+            React.createElement(ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))) : (React.createElement(ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))))); })));
 };
 var ReadOnlyAttributeValuesBlock = function (_a) {
     var expanded = _a.expanded, LabelRenderer = _a.LabelRenderer, RightSlot = _a.RightSlot, props = __rest(_a, ["expanded", "LabelRenderer", "RightSlot"]);

package/SimpleAttribute/SimpleAttribute.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
-import { AttributeType, SimpleAttributeValue } from '@reltio/mdm-sdk';
+import { AttributeType, SimpleAttributeValue, OvDetails } from '@reltio/mdm-sdk';
 type Props = {
     className?: string;
     attributeValue: SimpleAttributeValue;
     attributeType: AttributeType;
     inlined?: boolean;
+    FallbackSlot?: ({ ovDetails }: {
+        ovDetails: OvDetails;
+    }) => React.ReactElement;
 };
-export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined }: Props) => React.JSX.Element;
+export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined, FallbackSlot }: Props) => React.JSX.Element;
 export {};

package/SimpleAttribute/SimpleAttribute.js

@@ -1,7 +1,8 @@
 import React, { useContext, useMemo } from 'react';
-import { getAttrDataTypeDefinition, getHistoryAppearanceByUri, getAttributeValue, createRelatedObjectUris, isOv, getHistoryAttributeClassName, getObjectTypeByAttributeUri } from '@reltio/mdm-sdk';
+import { getAttrDataTypeDefinition, getHistoryAppearanceByUri, getAttributeValue, createRelatedObjectUris, isOv, getHistoryAttributeClassName, getObjectTypeByAttributeUri, HistoryOperations, historyPalettes } from '@reltio/mdm-sdk';
 import classnames from 'classnames';
 import { useMaskedAttribute } from '../hooks/useMaskedAttribute';
+import { useCssVariableStyles } from '../hooks/useCssVariableStyles';
 import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../constants/classnames';
 import { HistoryDiffContext } from '../contexts/HistoryAppearanceContext';
 import { HighlightedValuesContext } from '../contexts/HighlightedValuesContext';
@@ -9,15 +10,21 @@ import { CommentsContainer } from '../CommentsContainer';
 import { DataTypeValue } from '../DataTypeValue';
 import { PivotingTooltip } from '../PivotingTooltip';
 import { MaskingSwitcher } from '../MaskingSwitcher';
-import { useStyles } from './styles';
+import styles from './SimpleAttribute.module.css';
 export var SimpleAttribute = function (_a) {
     var _b, _c, _d, _e, _f;
-    var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined;
+    var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined, FallbackSlot = _a.FallbackSlot;
     var _h = useMaskedAttribute({
         attributeType: attributeType,
         attributeValue: rawAttributeValue
     }), isUnmaskingNeeded = _h.isUnmaskingNeeded, isMasked = _h.isMasked, toggleMasking = _h.toggleMasking, attributeValue = _h.attributeValue, isUnmasking = _h.isUnmasking;
-    var styles = useStyles();
+    var variableStyles = useCssVariableStyles({
+        '--history-insert-color': historyPalettes[HistoryOperations.insertAttribute].color,
+        '--history-update-backgroundColor': historyPalettes[HistoryOperations.updateAttribute].backgroundColor,
+        '--history-update-color': historyPalettes[HistoryOperations.updateAttribute].color,
+        '--history-delete-backgroundColor': historyPalettes[HistoryOperations.deleteAttribute].backgroundColor,
+        '--history-delete-color': historyPalettes[HistoryOperations.deleteAttribute].color
+    });
     var _j = useContext(HighlightedValuesContext), _k = _j.highlightedValuesUris, highlightedValuesUris = _k === void 0 ? [] : _k, highlightedClassName = _j.highlightedClassName;
     var appearance = useContext(HistoryDiffContext).appearance;
     var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
@@ -25,7 +32,7 @@ export var SimpleAttribute = function (_a) {
     var dataTypeValue = useMemo(function () { return (React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: getAttrDataTypeDefinition(attributeType) })); }, [attributeValue, attributeType]);
     var objectType = getObjectTypeByAttributeUri(attributeValue.uri);
     var unmaskingControl = isUnmaskingNeeded && (React.createElement(MaskingSwitcher, { isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking }));
-    return inlined || historyClassName ? (React.createElement("div", { className: classnames(className, (_b = {},
+    return inlined || historyClassName ? (React.createElement("div", { style: variableStyles, className: classnames(className, (_b = {},
             _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _b)) },
         React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
@@ -33,13 +40,14 @@ export var SimpleAttribute = function (_a) {
                     _d[styles.ovFalse] = !isOv(attributeValue),
                     _d)), "data-reltio-id": "reltio-attribute-value" },
                 dataTypeValue,
-                unmaskingControl)))) : (React.createElement("div", { "data-reltio-id": "comments-container-visibility-area", className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
+                unmaskingControl)))) : (React.createElement("div", { "data-reltio-id": "comments-container-visibility-area", style: variableStyles, className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
             _e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _e)) },
         React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
             React.createElement("span", { className: classnames(styles.attributeValue, (_f = {}, _f[styles.ovFalse] = !isOv(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" },
                 dataTypeValue,
-                unmaskingControl)),
+                unmaskingControl,
+                FallbackSlot && React.createElement(FallbackSlot, { ovDetails: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails }))),
         React.createElement(CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
                 uri: attributeValue.uri
             }), objectType: objectType })));

package/SimpleAttribute/SimpleAttribute.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"SimpleAttribute-root--msTML","commentsContainer":"SimpleAttribute-commentsContainer--kT8wH","attributeValue":"SimpleAttribute-attributeValue--5ESxH","updateAttribute":"SimpleAttribute-updateAttribute--HLqXI","insertAttribute":"SimpleAttribute-insertAttribute--3A5Xi","deleteAttribute":"SimpleAttribute-deleteAttribute--ftsz5","multilineAttribute":"SimpleAttribute-multilineAttribute--xY9V-","ovFalse":"SimpleAttribute-ovFalse--n4JcN"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.SimpleAttribute-root--msTML{align-items:start;display:flex;justify-content:space-between}.SimpleAttribute-commentsContainer--kT8wH{height:15px;margin-right:-4px}.SimpleAttribute-attributeValue--5ESxH{vertical-align:middle;white-space:break-spaces;word-break:break-all}.SimpleAttribute-updateAttribute--HLqXI{background-color:var(--history-update-backgroundColor);color:var(--history-update-color);margin-left:-4px;padding:0 4px;width:fit-content}.SimpleAttribute-updateAttribute--HLqXI>a{color:var(--history-update-color)}.SimpleAttribute-insertAttribute--3A5Xi{color:var(--history-insert-color);width:fit-content}.SimpleAttribute-insertAttribute--3A5Xi>a{color:var(--history-insert-color)}.SimpleAttribute-deleteAttribute--ftsz5{background-color:var(--history-delete-backgroundColor);color:var(--history-delete-color);margin-left:-4px;padding:0 4px;text-decoration:line-through;width:fit-content}.SimpleAttribute-deleteAttribute--ftsz5>a{color:var(--history-delete-color)}.SimpleAttribute-multilineAttribute--xY9V-{width:fit-content}.SimpleAttribute-ovFalse--n4JcN{opacity:var(--mui-inactive-opacity)}`;
+    head.appendChild(style);
+}
+export default styles;

package/cjs/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
-import { AttributeType, AttributeValue } from '@reltio/mdm-sdk';
+import { AttributeType, AttributeValue, OvDetails } from '@reltio/mdm-sdk';
 type SlotParams<T> = {
     attributeType?: AttributeType;
     attributeValue: T;
 };
+type WrapperParams = {
+    uri: string;
+    children: React.ReactNode;
+};
 type Props = {
     values: AttributeValue[];
     attributeType: AttributeType;
@@ -11,7 +15,11 @@ type Props = {
     valueContainerClassName?: string;
     LabelRenderer?: ({ attributeType, attributeValue }: SlotParams<AttributeValue>) => React.ReactElement;
     RightSlot?: ({ attributeType, attributeValue }: SlotParams<AttributeValue>) => React.ReactElement;
+    FallbackSlot?: ({ ovDetails }: {
+        ovDetails: OvDetails;
+    }) => React.ReactElement;
     showNonOv?: boolean;
+    AttributeValueWrapper?: ({ uri, children }: WrapperParams) => React.ReactElement;
 };
 declare const _default: React.MemoExoticComponent<({ expanded, LabelRenderer, RightSlot, ...props }: Props) => React.JSX.Element>;
 export default _default;

package/cjs/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.js

@@ -52,11 +52,11 @@ var ReadOnlyImageAttributesLine_1 = require("../ReadOnlyImageAttributesLine");
 var LazyRenderer_1 = require("../LazyRenderer");
 var lazyRendererStyle = { height: '18px' };
 var renderAttributesList = function (_a) {
-    var values = _a.values, valueContainerClassName = _a.valueContainerClassName, props = __rest(_a, ["values", "valueContainerClassName"]);
+    var values = _a.values, valueContainerClassName = _a.valueContainerClassName, AttributeValueWrapper = _a.AttributeValueWrapper, props = __rest(_a, ["values", "valueContainerClassName", "AttributeValueWrapper"]);
     var enabledLazyRendering = (values === null || values === void 0 ? void 0 : values.length) > 20;
     return (react_1.default.createElement(react_1.default.Fragment, null, (values || []).map(function (attributeValue) { return (react_1.default.createElement(LazyRenderer_1.LazyRenderer, { key: attributeValue.uri, className: valueContainerClassName, enabled: enabledLazyRendering, style: lazyRendererStyle },
-        react_1.default.createElement("div", { className: valueContainerClassName },
-            react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props))))); })));
+        react_1.default.createElement("div", { className: valueContainerClassName }, AttributeValueWrapper ? (react_1.default.createElement(AttributeValueWrapper, { uri: attributeValue.uri },
+            react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))) : (react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))))); })));
 };
 var ReadOnlyAttributeValuesBlock = function (_a) {
     var expanded = _a.expanded, LabelRenderer = _a.LabelRenderer, RightSlot = _a.RightSlot, props = __rest(_a, ["expanded", "LabelRenderer", "RightSlot"]);

package/cjs/SimpleAttribute/SimpleAttribute.d.ts

@@ -1,10 +1,13 @@
 import React from 'react';
-import { AttributeType, SimpleAttributeValue } from '@reltio/mdm-sdk';
+import { AttributeType, SimpleAttributeValue, OvDetails } from '@reltio/mdm-sdk';
 type Props = {
     className?: string;
     attributeValue: SimpleAttributeValue;
     attributeType: AttributeType;
     inlined?: boolean;
+    FallbackSlot?: ({ ovDetails }: {
+        ovDetails: OvDetails;
+    }) => React.ReactElement;
 };
-export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined }: Props) => React.JSX.Element;
+export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined, FallbackSlot }: Props) => React.JSX.Element;
 export {};

package/cjs/SimpleAttribute/SimpleAttribute.js

@@ -31,6 +31,7 @@ var react_1 = __importStar(require("react"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var classnames_1 = __importDefault(require("classnames"));
 var useMaskedAttribute_1 = require("../hooks/useMaskedAttribute");
+var useCssVariableStyles_1 = require("../hooks/useCssVariableStyles");
 var classnames_2 = require("../constants/classnames");
 var HistoryAppearanceContext_1 = require("../contexts/HistoryAppearanceContext");
 var HighlightedValuesContext_1 = require("../contexts/HighlightedValuesContext");
@@ -38,15 +39,21 @@ var CommentsContainer_1 = require("../CommentsContainer");
 var DataTypeValue_1 = require("../DataTypeValue");
 var PivotingTooltip_1 = require("../PivotingTooltip");
 var MaskingSwitcher_1 = require("../MaskingSwitcher");
-var styles_1 = require("./styles");
+var SimpleAttribute_module_css_1 = __importDefault(require("./SimpleAttribute.module.css"));
 var SimpleAttribute = function (_a) {
     var _b, _c, _d, _e, _f;
-    var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined;
+    var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined, FallbackSlot = _a.FallbackSlot;
     var _h = (0, useMaskedAttribute_1.useMaskedAttribute)({
         attributeType: attributeType,
         attributeValue: rawAttributeValue
     }), isUnmaskingNeeded = _h.isUnmaskingNeeded, isMasked = _h.isMasked, toggleMasking = _h.toggleMasking, attributeValue = _h.attributeValue, isUnmasking = _h.isUnmasking;
-    var styles = (0, styles_1.useStyles)();
+    var variableStyles = (0, useCssVariableStyles_1.useCssVariableStyles)({
+        '--history-insert-color': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.insertAttribute].color,
+        '--history-update-backgroundColor': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.updateAttribute].backgroundColor,
+        '--history-update-color': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.updateAttribute].color,
+        '--history-delete-backgroundColor': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.deleteAttribute].backgroundColor,
+        '--history-delete-color': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.deleteAttribute].color
+    });
     var _j = (0, react_1.useContext)(HighlightedValuesContext_1.HighlightedValuesContext), _k = _j.highlightedValuesUris, highlightedValuesUris = _k === void 0 ? [] : _k, highlightedClassName = _j.highlightedClassName;
     var appearance = (0, react_1.useContext)(HistoryAppearanceContext_1.HistoryDiffContext).appearance;
     var attributeAppearance = (0, mdm_sdk_1.getHistoryAppearanceByUri)(attributeValue.uri, appearance);
@@ -54,22 +61,23 @@ var SimpleAttribute = function (_a) {
     var dataTypeValue = (0, react_1.useMemo)(function () { return (react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: (0, mdm_sdk_1.getAttributeValue)(attributeValue), dataTypeDefinition: (0, mdm_sdk_1.getAttrDataTypeDefinition)(attributeType) })); }, [attributeValue, attributeType]);
     var objectType = (0, mdm_sdk_1.getObjectTypeByAttributeUri)(attributeValue.uri);
     var unmaskingControl = isUnmaskingNeeded && (react_1.default.createElement(MaskingSwitcher_1.MaskingSwitcher, { isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking }));
-    return inlined || historyClassName ? (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, (_b = {},
+    return inlined || historyClassName ? (react_1.default.createElement("div", { style: variableStyles, className: (0, classnames_1.default)(className, (_b = {},
             _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _b)) },
-        react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: (0, classnames_1.default)((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
-            react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.attributeValue, styles[historyClassName], (_d = {},
-                    _d[styles.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue),
+        react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: (0, classnames_1.default)((_c = {}, _c[SimpleAttribute_module_css_1.default.multilineAttribute] = !inlined, _c)) },
+            react_1.default.createElement("span", { className: (0, classnames_1.default)(SimpleAttribute_module_css_1.default.attributeValue, SimpleAttribute_module_css_1.default[historyClassName], (_d = {},
+                    _d[SimpleAttribute_module_css_1.default.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue),
                     _d)), "data-reltio-id": "reltio-attribute-value" },
                 dataTypeValue,
-                unmaskingControl)))) : (react_1.default.createElement("div", { "data-reltio-id": "comments-container-visibility-area", className: (0, classnames_1.default)(className, styles.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
+                unmaskingControl)))) : (react_1.default.createElement("div", { "data-reltio-id": "comments-container-visibility-area", style: variableStyles, className: (0, classnames_1.default)(className, SimpleAttribute_module_css_1.default.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
             _e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
             _e)) },
         react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
-            react_1.default.createElement("span", { className: (0, classnames_1.default)(styles.attributeValue, (_f = {}, _f[styles.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" },
+            react_1.default.createElement("span", { className: (0, classnames_1.default)(SimpleAttribute_module_css_1.default.attributeValue, (_f = {}, _f[SimpleAttribute_module_css_1.default.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" },
                 dataTypeValue,
-                unmaskingControl)),
-        react_1.default.createElement(CommentsContainer_1.CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
+                unmaskingControl,
+                FallbackSlot && react_1.default.createElement(FallbackSlot, { ovDetails: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails }))),
+        react_1.default.createElement(CommentsContainer_1.CommentsContainer, { className: SimpleAttribute_module_css_1.default.commentsContainer, uri: attributeValue.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
                 uri: attributeValue.uri
             }), objectType: objectType })));
 };

package/cjs/SimpleAttribute/SimpleAttribute.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"root":"SimpleAttribute-root--msTML","commentsContainer":"SimpleAttribute-commentsContainer--kT8wH","attributeValue":"SimpleAttribute-attributeValue--5ESxH","updateAttribute":"SimpleAttribute-updateAttribute--HLqXI","insertAttribute":"SimpleAttribute-insertAttribute--3A5Xi","deleteAttribute":"SimpleAttribute-deleteAttribute--ftsz5","multilineAttribute":"SimpleAttribute-multilineAttribute--xY9V-","ovFalse":"SimpleAttribute-ovFalse--n4JcN"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.SimpleAttribute-root--msTML{align-items:start;display:flex;justify-content:space-between}.SimpleAttribute-commentsContainer--kT8wH{height:15px;margin-right:-4px}.SimpleAttribute-attributeValue--5ESxH{vertical-align:middle;white-space:break-spaces;word-break:break-all}.SimpleAttribute-updateAttribute--HLqXI{background-color:var(--history-update-backgroundColor);color:var(--history-update-color);margin-left:-4px;padding:0 4px;width:fit-content}.SimpleAttribute-updateAttribute--HLqXI>a{color:var(--history-update-color)}.SimpleAttribute-insertAttribute--3A5Xi{color:var(--history-insert-color);width:fit-content}.SimpleAttribute-insertAttribute--3A5Xi>a{color:var(--history-insert-color)}.SimpleAttribute-deleteAttribute--ftsz5{background-color:var(--history-delete-backgroundColor);color:var(--history-delete-color);margin-left:-4px;padding:0 4px;text-decoration:line-through;width:fit-content}.SimpleAttribute-deleteAttribute--ftsz5>a{color:var(--history-delete-color)}.SimpleAttribute-multilineAttribute--xY9V-{width:fit-content}.SimpleAttribute-ovFalse--n4JcN{opacity:var(--mui-inactive-opacity)}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/features/crosswalks/AttributesTable/AttributesTable.js

@@ -53,6 +53,7 @@ var helpers_1 = require("./helpers");
 var ConfirmEditIgnoredDialog_1 = require("./components/ConfirmEditIgnoredDialog");
 var CommonRowCellRenderer_1 = require("./components/CommonRowCellRenderer");
 var LazyRenderer_1 = require("../../../LazyRenderer");
+var SyncedValueHeightsContext_1 = require("../contexts/SyncedValueHeightsContext");
 var styles_1 = require("./styles");
 var DEFAULT_ROW_HEIGHT = 68;
 var getIdFromRowValue = function (rowValue) { return rowValue.ovValues.attributeType.uri; };
@@ -147,7 +148,8 @@ var AttributesTable = function (_a) {
             react_1.default.createElement(ColumnsSettings_1.ColumnsSettings, { columnsData: helpers_1.COLUMNS_DATA, selectedColumns: visibleColumns, onChangeColumns: onChangeVisibleColumns })),
         react_1.default.createElement("div", { className: styles.tableContent },
             isLoading && react_1.default.createElement(LinearLoadIndicator_1.LinearLoadIndicator, null),
-            react_1.default.createElement(BasicTable_1.BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })),
+            react_1.default.createElement(SyncedValueHeightsContext_1.SyncedValueHeightsProvider, null,
+                react_1.default.createElement(BasicTable_1.BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext }))),
         react_1.default.createElement(ConfirmDeleteDialog_1.ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
         react_1.default.createElement(ConfirmEditIgnoredDialog_1.ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
                 if (pendingIgnoredEditing)

package/cjs/features/crosswalks/AttributesTable/AttributesTable.test-data.d.ts

@@ -1,5 +1,8 @@
 import { Entity, Metadata } from '@reltio/mdm-sdk';
-export declare const createEntity: () => Entity;
+export declare const createEntity: ({ withAppliedSurvivorshipRules }?: {
+    withAppliedSurvivorshipRules?: boolean;
+}) => Entity;
+export declare const createEntityWithoutAppliedRule: () => Entity;
 export declare const createMetadata: () => Metadata;
 export declare const selectedAttributeTypes: ({
     description: string;

package/cjs/features/crosswalks/AttributesTable/AttributesTable.test-data.js

@@ -1,34 +1,48 @@
 "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);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectedAttributeTypes = exports.createMetadata = exports.createEntity = void 0;
-var createEntity = function () {
+exports.selectedAttributeTypes = exports.createMetadata = exports.createEntityWithoutAppliedRule = exports.createEntity = void 0;
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var createEntity = function (_a) {
+    var _b = _a === void 0 ? {} : _a, _c = _b.withAppliedSurvivorshipRules, withAppliedSurvivorshipRules = _c === void 0 ? false : _c;
     return {
         uri: 'entities/01L2n5z',
         type: 'configuration/entityTypes/HCP',
         label: 'entity label',
         attributes: {
             Boolean: [
-                {
-                    ov: true,
-                    type: 'configuration/entityTypes/HCP/attributes/Boolean',
-                    uri: 'entities/01L2n5z/attributes/Boolean/5nmc3Cp',
-                    value: 'true'
-                }
+                __assign({ ov: true, type: 'configuration/entityTypes/HCP/attributes/Boolean', uri: 'entities/01L2n5z/attributes/Boolean/5nmc3Cp', value: 'true' }, (withAppliedSurvivorshipRules && {
+                    ovDetails: {
+                        participationStatus: mdm_sdk_1.ParticipationStatus.Strategy,
+                        appliedSurvivorshipRules: 'Frequency'
+                    }
+                }))
             ],
             TextField: [
-                {
-                    ov: true,
-                    type: 'configuration/entityTypes/HCP/attributes/TextField',
-                    uri: 'entities/01L2n5z/attributes/TextField/5noU1aB',
-                    value: 'text field value'
-                },
-                {
-                    ov: false,
-                    type: 'configuration/entityTypes/HCP/attributes/TextField',
-                    uri: 'entities/01L2n5z/attributes/TextField/5noU1aB',
-                    value: 'another text value',
-                    ignored: true
-                }
+                __assign({ ov: true, type: 'configuration/entityTypes/HCP/attributes/TextField', uri: 'entities/01L2n5z/attributes/TextField/5noU1aB', value: 'text field value' }, (withAppliedSurvivorshipRules && {
+                    ovDetails: {
+                        participationStatus: mdm_sdk_1.ParticipationStatus.Strategy,
+                        appliedSurvivorshipRules: { SRC_SYS: [{ SRC_SYS: ['SRC_SYS', 'Aggregation'] }, 'Frequency'] }
+                    }
+                })),
+                __assign({ ov: false, type: 'configuration/entityTypes/HCP/attributes/TextField', uri: 'entities/01L2n5z/attributes/TextField/5noU1aB', value: 'another text value', ignored: true }, (withAppliedSurvivorshipRules && {
+                    ovDetails: {
+                        participationStatus: mdm_sdk_1.ParticipationStatus.Strategy,
+                        appliedSurvivorshipRules: {
+                            SRC_SYS: [{ SRC_SYS: ['SRC_SYS', 'SRC_SYS'] }, { SRC_SYS: ['SRC_SYS'] }, 'LUD']
+                        }
+                    }
+                }))
             ],
             DeepNested: [
                 {
@@ -107,6 +121,22 @@ var createEntity = function () {
     };
 };
 exports.createEntity = createEntity;
+var createEntityWithoutAppliedRule = function () {
+    var entity = (0, exports.createEntity)({ withAppliedSurvivorshipRules: true });
+    return __assign(__assign({}, entity), { attributes: __assign(__assign({}, entity.attributes), { Boolean: [
+                {
+                    ov: true,
+                    type: 'configuration/entityTypes/HCP/attributes/Boolean',
+                    uri: 'entities/01L2n5z/attributes/Boolean/5nmc3CpPinned',
+                    value: 'false',
+                    ovDetails: {
+                        participationStatus: mdm_sdk_1.ParticipationStatus.Pinned,
+                        appliedSurvivorshipRules: 'N/A'
+                    }
+                }
+            ] }) });
+};
+exports.createEntityWithoutAppliedRule = createEntityWithoutAppliedRule;
 var createMetadata = function () {
     return {
         entityTypes: [

package/cjs/features/crosswalks/AttributesTable/AttributesTable.test.js

@@ -451,6 +451,62 @@ describe('attribute table tests', function () {
             }
         });
     }); });
+    it('should render rule type column and fallback icons correctly according to applied survivorship rules', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, entity, user, ruleTypeColumns, ovValuesColumns, fallbackIcon, tooltip;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    unmockTableSizing = (0, test_utils_1.mockBasicTableSizing)();
+                    entity = (0, AttributesTable_test_data_1.createEntity)({ withAppliedSurvivorshipRules: true });
+                    user = setUp(__assign(__assign({}, defaultProps), { visibleColumns: undefined, entity: entity })).user;
+                    expect(react_2.screen.getByText('Rule type')).toBeInTheDocument();
+                    ruleTypeColumns = react_2.screen.getAllByTestId('column-name-ruleType');
+                    expect((0, react_2.within)(ruleTypeColumns[0]).getByText('Frequency')).toBeInTheDocument();
+                    ovValuesColumns = react_2.screen.getAllByTestId('column-name-ovValues');
+                    fallbackIcon = (0, test_utils_1.getMuiIconByName)('Info', ovValuesColumns[0]);
+                    return [4 /*yield*/, user.hover(fallbackIcon)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, react_2.screen.findByRole('tooltip')];
+                case 2:
+                    tooltip = _a.sent();
+                    expect((0, react_2.within)(tooltip).getByText('OV decision path')).toBeInTheDocument();
+                    expect((0, react_2.within)(tooltip).getAllByText('Source system').length).toBe(3);
+                    expect((0, react_2.within)(tooltip).getByText('Aggregation')).toBeInTheDocument();
+                    expect((0, react_2.within)(tooltip).getByText('Frequency')).toBeInTheDocument();
+                    expect((0, test_utils_1.getMuiIconsByName)('CancelOutlined', tooltip).length).toBe(4);
+                    expect((0, test_utils_1.getMuiIconByName)('CheckCircle', tooltip)).toBeInTheDocument();
+                    expect((0, react_2.within)(ruleTypeColumns[1]).getByText('Frequency')).toBeInTheDocument();
+                    expect((0, test_utils_1.getMuiIconByName)('Info', ovValuesColumns[1])).not.toBeInTheDocument();
+                    unmockTableSizing();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    it('should render N/A rule type and show tooltip in case of not participating value', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, entity, user, ruleTypeColumns, infoIcon, tooltip;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    unmockTableSizing = (0, test_utils_1.mockBasicTableSizing)();
+                    entity = (0, AttributesTable_test_data_1.createEntityWithoutAppliedRule)();
+                    user = setUp(__assign(__assign({}, defaultProps), { visibleColumns: undefined, entity: entity })).user;
+                    ruleTypeColumns = react_2.screen.getAllByTestId('column-name-ruleType');
+                    expect((0, react_2.within)(ruleTypeColumns[1]).getByText('N/A')).toBeInTheDocument();
+                    infoIcon = (0, test_utils_1.getMuiIconByName)('Info', ruleTypeColumns[1]);
+                    expect(infoIcon).toBeInTheDocument();
+                    return [4 /*yield*/, user.hover(infoIcon)];
+                case 1:
+                    _a.sent();
+                    return [4 /*yield*/, react_2.screen.findByRole('tooltip')];
+                case 2:
+                    tooltip = _a.sent();
+                    expect((0, react_2.within)(tooltip).getByText("Value survives because 'pin' flag is set. Survivorship not evaluated")).toBeInTheDocument();
+                    unmockTableSizing();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     describe('Edit attributes', function () {
         it('should edit attributes', function () { return __awaiter(void 0, void 0, void 0, function () {
             var unmockTableSizing, entity, onEdit, props, user;

package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { OvDetails } from '@reltio/mdm-sdk';
+type Props = {
+    ovDetails: OvDetails;
+};
+export declare const FallbackIndicator: ({ ovDetails }: Props) => React.JSX.Element;
+export {};

package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FallbackIndicator = 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 CheckCircle_1 = __importDefault(require("@mui/icons-material/CheckCircle"));
+var CancelOutlined_1 = __importDefault(require("@mui/icons-material/CancelOutlined"));
+var Info_1 = __importDefault(require("@mui/icons-material/Info"));
+var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
+var helpers_1 = require("../../helpers");
+var withTooltip_1 = require("../../../../../HOCs/withTooltip");
+var FallbackIndicator_module_css_1 = __importDefault(require("./FallbackIndicator.module.css"));
+var InfoIconWithTooltip = (0, withTooltip_1.withTooltip)(Info_1.default);
+var FallbackIndicator = function (_a) {
+    var ovDetails = _a.ovDetails;
+    var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
+    var fallbackLabels = (0, helpers_1.getFallbackLabels)(metadata, ovDetails);
+    var renderTooltip = function () {
+        return (react_1.default.createElement("div", { className: FallbackIndicator_module_css_1.default.fallbackList },
+            react_1.default.createElement(Typography_1.default, { variant: "caption", className: FallbackIndicator_module_css_1.default.fallbackTitle }, ui_i18n_1.default.text('OV decision path')),
+            fallbackLabels.map(function (label, index) { return (react_1.default.createElement("div", { key: index, className: FallbackIndicator_module_css_1.default.fallbackItem },
+                index === fallbackLabels.length - 1 ? (react_1.default.createElement(CheckCircle_1.default, { className: FallbackIndicator_module_css_1.default.fallbackItemIcon })) : (react_1.default.createElement(CancelOutlined_1.default, { className: FallbackIndicator_module_css_1.default.fallbackItemIcon })),
+                react_1.default.createElement(Typography_1.default, { variant: "caption" }, label))); })));
+    };
+    return fallbackLabels.length > 0 ? (react_1.default.createElement(InfoIconWithTooltip, { tooltipTitle: renderTooltip(), className: FallbackIndicator_module_css_1.default.fallbackIcon })) : null;
+};
+exports.FallbackIndicator = FallbackIndicator;

package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.module.css.js

@@ -0,0 +1,9 @@
+const styles = {"fallbackItem":"FallbackIndicator-fallbackItem--6CBy-","fallbackItemIcon":"FallbackIndicator-fallbackItemIcon--8HsII","fallbackList":"FallbackIndicator-fallbackList--3JCCL","fallbackTitle":"FallbackIndicator-fallbackTitle--abWeO","fallbackIcon":"FallbackIndicator-fallbackIcon--ox4Ec"};
+if (typeof document !== 'undefined') {
+    const head = document.head || document.getElementsByTagName('head')[0]
+    const style = document.createElement('style');
+    style.type = 'text/css'
+    style.innerHTML = `.FallbackIndicator-fallbackItem--6CBy-{align-items:center;color:hsla(0,0%,100%,.6);display:flex;font-size:13px;padding-top:8px;position:relative}.FallbackIndicator-fallbackItem--6CBy-:last-child{color:#fff}.FallbackIndicator-fallbackItem--6CBy-:not(:last-child):after{background:hsla(0,0%,100%,.6);content:"";height:8px;left:7px;position:absolute;top:28px;width:2px}.FallbackIndicator-fallbackItemIcon--8HsII{height:16px;margin-right:4px;width:16px}.FallbackIndicator-fallbackList--3JCCL{min-width:150px;padding-bottom:8px;padding-top:8px}.FallbackIndicator-fallbackTitle--abWeO{font-weight:500;padding-bottom:4px}.FallbackIndicator-fallbackIcon--ox4Ec{color:var(--mui-palette-text-secondary);height:16px;margin-left:4px;vertical-align:middle;width:16px}`;
+    head.appendChild(style);
+}
+module.exports = styles;

package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/index.d.ts

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

package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FallbackIndicator = void 0;
+var FallbackIndicator_1 = require("./FallbackIndicator");
+Object.defineProperty(exports, "FallbackIndicator", { enumerable: true, get: function () { return FallbackIndicator_1.FallbackIndicator; } });

package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.js

@@ -22,7 +22,9 @@ var ReadOnlyAttributeValuesBlock_1 = require("../../../../../ReadOnlyAttributeVa
 var AttributeTitle_1 = require("../../../../../AttributeTitle");
 var EntityContext_1 = require("../../../../../contexts/EntityContext");
 var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
+var FallbackIndicator_1 = require("../FallbackIndicator");
 var styles_1 = require("../../styles");
+var SyncedValueHeight_1 = require("../SyncedValueHeight");
 var styles_2 = require("./styles");
 var OvValuesRenderer = function (_a) {
     var _b = _a.value, values = _b.values, attributeType = _b.attributeType, someRowIsDragging = _a.someRowIsDragging, draggableProps = _a.draggableProps;
@@ -34,6 +36,6 @@ var OvValuesRenderer = function (_a) {
             react_1.default.createElement(DragIndicator_1.default, { className: styles.dragIndicatorIcon })),
         react_1.default.createElement(AttributeTitle_1.AttributeTitle, { className: styles.attributeTitle, label: attributeType.label }),
         !someRowIsDragging && (react_1.default.createElement(EntityContext_1.EntityContext.Provider, { value: entity },
-            react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.ReadOnlyAttributeValuesBlock, { values: values, attributeType: attributeType, valueContainerClassName: styles.ovValue })))));
+            react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.ReadOnlyAttributeValuesBlock, { values: values, attributeType: attributeType, valueContainerClassName: styles.ovValue, AttributeValueWrapper: SyncedValueHeight_1.ValueHeightReporter, FallbackSlot: FallbackIndicator_1.FallbackIndicator })))));
 };
 exports.OvValuesRenderer = OvValuesRenderer;

package/cjs/features/crosswalks/AttributesTable/components/RuleTypeInfoButton/RuleTypeInfoButton.js

@@ -93,7 +93,7 @@ var RuleTypeInfoButton = function (_a) {
     var openPopup = function (event) { return setAnchorEl(event.currentTarget); };
     var closePopup = function () { return setAnchorEl(null); };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: Info_1.default, tooltipTitle: ui_i18n_1.default.text('View details'), size: 'XS', onClick: openPopup }),
+        react_1.default.createElement(SmallIconButton_1.SmallIconButtonWithTooltip, { icon: Info_1.default, tooltipTitle: ui_i18n_1.default.text('View details'), size: 'XXS', onClick: openPopup }),
         react_1.default.createElement(Popover_1.default, { classes: { paper: styles.rulePopup }, open: !!anchorEl, anchorEl: anchorEl, onClose: closePopup, anchorOrigin: {
                 vertical: 'bottom',
                 horizontal: 'right'

package/cjs/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.d.ts

@@ -3,5 +3,5 @@ import { RuleTypeValues } from '../../types';
 type Props = {
     value: RuleTypeValues;
 };
-export declare const RuleTypeRenderer: ({ value: { ruleType, sourcesUriOrder, primaryAttributeUri, comparisonAttributeUri } }: Props) => React.JSX.Element;
+export declare const RuleTypeRenderer: ({ value: { ruleTypes } }: Props) => React.JSX.Element;
 export {};