@reltio/components 1.4.2231 → 1.4.2232

package/cjs/ReadOnlyAttributesPager/components/MultiLineRenderer/MultiLineRenderer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AttributeType, NestedAttributeValue, ReferenceAttributeValue, SimpleAttributeValue, RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-sdk';
+import { AttributeType, NestedAttributeValue, ReferenceAttributeValue, SimpleAttributeValue, RequestNextPageOfAttributeValuesPayload, OvDetails } from '@reltio/mdm-sdk';
 import { ReadOnlyAttributeClasses } from '../../../types';
 type Props = {
     max: number;
@@ -12,6 +12,9 @@ type Props = {
     requestNextPageOfAttributeValues: (payload: RequestNextPageOfAttributeValuesPayload) => void;
     showNonOv: boolean;
     classes?: ReadOnlyAttributeClasses;
+    FallbackSlot?: ({ ovDetails }: {
+        ovDetails: OvDetails;
+    }) => React.ReactElement;
 };
-export declare const MultiLineRenderer: ({ max, values, nonVisibleValues, totalVisibleValues, attributeType, parentUri, requestNextPageOfAttributeValues, showNonOv, totalNonVisibleValues, classes }: Props) => React.JSX.Element;
+export declare const MultiLineRenderer: ({ max, values, nonVisibleValues, totalVisibleValues, attributeType, parentUri, requestNextPageOfAttributeValues, showNonOv, totalNonVisibleValues, classes, FallbackSlot }: Props) => React.JSX.Element;
 export {};

package/cjs/ReadOnlyAttributesPager/components/MultiLineRenderer/MultiLineRenderer.js

@@ -42,9 +42,10 @@ var ControlAttributeIcon_1 = require("../../../ControlAttributeIcon");
 var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
 var AttributesVerificationContext_1 = require("../../../contexts/AttributesVerificationContext");
 var VerificationButton_1 = require("../../../VerificationButton/VerificationButton");
+var SyncedValueHeight_1 = require("../../../SyncedValueHeight");
 var styles_1 = require("../../styles");
 var MultiLineRenderer = function (_a) {
-    var max = _a.max, values = _a.values, nonVisibleValues = _a.nonVisibleValues, totalVisibleValues = _a.totalVisibleValues, attributeType = _a.attributeType, parentUri = _a.parentUri, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, showNonOv = _a.showNonOv, totalNonVisibleValues = _a.totalNonVisibleValues, classes = _a.classes;
+    var max = _a.max, values = _a.values, nonVisibleValues = _a.nonVisibleValues, totalVisibleValues = _a.totalVisibleValues, attributeType = _a.attributeType, parentUri = _a.parentUri, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, showNonOv = _a.showNonOv, totalNonVisibleValues = _a.totalNonVisibleValues, classes = _a.classes, FallbackSlot = _a.FallbackSlot;
     var styles = (0, styles_1.useMultiLineStyles)();
     var _b = (0, react_1.useState)(max), visibleValuesCount = _b[0], setVisibleValuesCount = _b[1];
     var isVerificationAttribute = (0, react_context_selector_1.useContextSelector)(AttributesVerificationContext_1.AttributesVerificationContext, function (context) { return (context === null || context === void 0 ? void 0 : context.isVerificationAttribute) || ramda_1.F; });
@@ -79,15 +80,18 @@ var MultiLineRenderer = function (_a) {
     var shownValues = values.slice(0, visibleValuesCount);
     var hiddenValuesCount = totalVisibleValues - visibleValuesCount;
     var showVerificationButton = isVerificationAttribute(attributeType);
-    return (react_1.default.createElement("div", { "data-reltio-id": "multi-line-renderer", className: styles.wrapper },
-        react_1.default.createElement("div", { className: styles.titleRow },
-            react_1.default.createElement(AttributeTitle_1.AttributeTitle, { label: label, className: (0, classnames_1.default)(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
-            react_1.default.createElement(DescriptionIcon_1.DescriptionIcon, { description: description }),
-            isControlAttribute && react_1.default.createElement(ControlAttributeIcon_1.ControlAttributeIcon, null),
-            react_1.default.createElement(OvIcon_1.OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
-            showVerificationButton && react_1.default.createElement(VerificationButton_1.VerificationButton, { attributeType: attributeType })),
-        react_1.default.createElement("div", { className: styles.attributes }, shownValues.map(function (value) { return (react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, { key: value.uri, className: (0, classnames_1.default)(styles.attribute, classes === null || classes === void 0 ? void 0 : classes.content), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, classes: classes })); })),
-        showMore && (react_1.default.createElement(ShowMore_1.ShowMore, { moreNumber: (0, ramda_1.min)(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),
-        showLess && react_1.default.createElement(ShowLess_1.ShowLess, { onClick: onShowLess })));
+    var blockUri = parentUri ? "".concat(parentUri, "/").concat(attributeType.uri) : attributeType.uri;
+    return (react_1.default.createElement(SyncedValueHeight_1.ValueHeightReporter, { uri: blockUri },
+        react_1.default.createElement("div", { "data-reltio-id": "multi-line-renderer", className: styles.wrapper },
+            react_1.default.createElement("div", { className: styles.titleRow },
+                react_1.default.createElement(AttributeTitle_1.AttributeTitle, { label: label, className: (0, classnames_1.default)(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
+                react_1.default.createElement(DescriptionIcon_1.DescriptionIcon, { description: description }),
+                isControlAttribute && react_1.default.createElement(ControlAttributeIcon_1.ControlAttributeIcon, null),
+                react_1.default.createElement(OvIcon_1.OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
+                showVerificationButton && react_1.default.createElement(VerificationButton_1.VerificationButton, { attributeType: attributeType })),
+            react_1.default.createElement("div", { className: styles.attributes }, shownValues.map(function (value) { return (react_1.default.createElement(SyncedValueHeight_1.ValueHeightReporter, { key: value.uri, uri: value.uri },
+                react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, { className: (0, classnames_1.default)(styles.attribute, classes === null || classes === void 0 ? void 0 : classes.content), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, classes: classes, FallbackSlot: FallbackSlot }))); })),
+            showMore && (react_1.default.createElement(ShowMore_1.ShowMore, { moreNumber: (0, ramda_1.min)(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),
+            showLess && react_1.default.createElement(ShowLess_1.ShowLess, { onClick: onShowLess }))));
 };
 exports.MultiLineRenderer = MultiLineRenderer;

package/cjs/ReadOnlyAttributesPager/components/OneLineRenderer/OneLineRenderer.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AttributeType, AttributeValue } from '@reltio/mdm-sdk';
+import { AttributeType, AttributeValue, OvDetails } from '@reltio/mdm-sdk';
 import { ReadOnlyAttributeClasses } from '../../..';
 type Props = {
     value: AttributeValue;
@@ -8,6 +8,9 @@ type Props = {
     showNonOv?: boolean;
     totalNonVisibleValues: number;
     classes?: ReadOnlyAttributeClasses;
+    FallbackSlot?: ({ ovDetails }: {
+        ovDetails: OvDetails;
+    }) => React.ReactElement;
 };
-export declare const OneLineRenderer: ({ value, nonVisibleValues, attributeType, showNonOv, totalNonVisibleValues, classes }: Props) => React.JSX.Element;
+export declare const OneLineRenderer: ({ value, nonVisibleValues, attributeType, showNonOv, totalNonVisibleValues, classes, FallbackSlot }: Props) => React.JSX.Element;
 export {};

package/cjs/ReadOnlyAttributesPager/components/OneLineRenderer/OneLineRenderer.js

@@ -38,23 +38,25 @@ var DescriptionIcon_1 = require("../../../DescriptionIcon");
 var ReadOnlyAttributesFactory_1 = require("../../../ReadOnlyAttributesFactory");
 var ControlAttributeIcon_1 = require("../../../ControlAttributeIcon");
 var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var SyncedValueHeight_1 = require("../../../SyncedValueHeight");
 var styles_1 = require("../../styles");
 var OneLineRenderer = function (_a) {
-    var value = _a.value, nonVisibleValues = _a.nonVisibleValues, attributeType = _a.attributeType, showNonOv = _a.showNonOv, totalNonVisibleValues = _a.totalNonVisibleValues, classes = _a.classes;
+    var value = _a.value, nonVisibleValues = _a.nonVisibleValues, attributeType = _a.attributeType, showNonOv = _a.showNonOv, totalNonVisibleValues = _a.totalNonVisibleValues, classes = _a.classes, FallbackSlot = _a.FallbackSlot;
     var styles = (0, styles_1.useOneLineStyles)();
     var label = attributeType.label, description = attributeType.description;
     var controlAttributes = (0, MdmModuleContext_1.useMdmControlAttributes)();
     var isControlAttribute = (0, react_1.useMemo)(function () { return controlAttributes.includes(attributeType.uri); }, [controlAttributes, attributeType.uri]);
     var objectType = (0, mdm_sdk_1.getObjectTypeByAttributeUri)(value.uri);
-    return (react_1.default.createElement("div", { "data-reltio-id": "one-line-renderer", className: (0, classnames_1.default)(styles.collaborationWrapper, constants_1.COMMENTS_CONTAINER_VISIBILITY_AREA) },
-        react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.titleRow, styles.wrapper) },
-            react_1.default.createElement(AttributeTitle_1.AttributeTitle, { label: label, className: (0, classnames_1.default)(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
-            react_1.default.createElement(DescriptionIcon_1.DescriptionIcon, { description: description, className: styles.descriptionIcon }),
-            isControlAttribute && react_1.default.createElement(ControlAttributeIcon_1.ControlAttributeIcon, null),
-            react_1.default.createElement(OvIcon_1.OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
-            react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, { className: (0, classnames_1.default)(styles.attribute, classes === null || classes === void 0 ? void 0 : classes.content), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, inlined: true, classes: classes })),
-        react_1.default.createElement(CommentsContainer_1.CommentsContainer, { uri: value.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
-                uri: value.uri
-            }), objectType: objectType })));
+    return (react_1.default.createElement(SyncedValueHeight_1.ValueHeightReporter, { uri: value.uri },
+        react_1.default.createElement("div", { "data-reltio-id": "one-line-renderer", className: (0, classnames_1.default)(styles.collaborationWrapper, constants_1.COMMENTS_CONTAINER_VISIBILITY_AREA) },
+            react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.titleRow, styles.wrapper) },
+                react_1.default.createElement(AttributeTitle_1.AttributeTitle, { label: label, className: (0, classnames_1.default)(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
+                react_1.default.createElement(DescriptionIcon_1.DescriptionIcon, { description: description, className: styles.descriptionIcon }),
+                isControlAttribute && react_1.default.createElement(ControlAttributeIcon_1.ControlAttributeIcon, null),
+                react_1.default.createElement(OvIcon_1.OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
+                react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, { className: (0, classnames_1.default)(styles.attribute, classes === null || classes === void 0 ? void 0 : classes.content), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, inlined: true, classes: classes, FallbackSlot: FallbackSlot })),
+            react_1.default.createElement(CommentsContainer_1.CommentsContainer, { uri: value.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
+                    uri: value.uri
+                }), objectType: objectType }))));
 };
 exports.OneLineRenderer = OneLineRenderer;

package/cjs/ReadOnlyComplexAttribute/ReadOnlyComplexAttribute.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactElement, ReactNode } from 'react';
-import { AttributeType, ComplexAttributeValue } from '@reltio/mdm-sdk';
+import { AttributeType, ComplexAttributeValue, OvDetails } from '@reltio/mdm-sdk';
 import { AdditionalControlsRenderer, ReadOnlyAttributeClasses } from '../types';
 export type ReadOnlyComplexAttributeProps<T> = {
     attributeTypesList?: AttributeType[];
@@ -12,5 +12,8 @@ export type ReadOnlyComplexAttributeProps<T> = {
     classes?: ReadOnlyAttributeClasses;
     LabelRenderer?: (props: AdditionalControlsRenderer<ComplexAttributeValue>) => ReactElement;
     RightSlot?: (props: AdditionalControlsRenderer<ComplexAttributeValue>) => ReactElement;
+    FallbackSlot?: ({ ovDetails }: {
+        ovDetails: OvDetails;
+    }) => ReactElement;
 };
-export declare const ReadOnlyComplexAttribute: <T extends ComplexAttributeValue>({ attributeTypesList, attributeValue, label, expanded: expandedProp, children, showNonOv, attributeType, classes, LabelRenderer, RightSlot }: ReadOnlyComplexAttributeProps<T>) => React.JSX.Element;
+export declare const ReadOnlyComplexAttribute: <T extends ComplexAttributeValue>({ attributeTypesList, attributeValue, label, expanded: expandedProp, children, showNonOv, attributeType, classes, LabelRenderer, RightSlot, FallbackSlot }: ReadOnlyComplexAttributeProps<T>) => React.JSX.Element;

package/cjs/ReadOnlyComplexAttribute/ReadOnlyComplexAttribute.js

@@ -51,36 +51,48 @@ var HighlightedValuesContext_1 = require("../contexts/HighlightedValuesContext")
 var AttributesVerificationContext_1 = require("../contexts/AttributesVerificationContext");
 var classnames_2 = require("../constants/classnames");
 var AttributeVerificationStatus_1 = require("../AttributeVerificationStatus/AttributeVerificationStatus");
+var SyncedExpandedAttributesContext_1 = require("../contexts/SyncedExpandedAttributesContext");
 var ReadOnlyComplexAttribute_module_css_1 = __importDefault(require("./ReadOnlyComplexAttribute.module.css"));
 var ReadOnlyComplexAttribute = function (_a) {
     var _b;
-    var attributeTypesList = _a.attributeTypesList, attributeValue = _a.attributeValue, label = _a.label, _c = _a.expanded, expandedProp = _c === void 0 ? false : _c, children = _a.children, showNonOv = _a.showNonOv, attributeType = _a.attributeType, classes = _a.classes, LabelRenderer = _a.LabelRenderer, RightSlot = _a.RightSlot;
+    var attributeTypesList = _a.attributeTypesList, attributeValue = _a.attributeValue, label = _a.label, _c = _a.expanded, expandedProp = _c === void 0 ? false : _c, children = _a.children, showNonOv = _a.showNonOv, attributeType = _a.attributeType, classes = _a.classes, LabelRenderer = _a.LabelRenderer, RightSlot = _a.RightSlot, FallbackSlot = _a.FallbackSlot;
     var uri = attributeValue.uri;
     var _d = (0, react_1.useState)(false), expanded = _d[0], setExpanded = _d[1];
     var _e = (0, react_1.useContext)(HighlightedValuesContext_1.HighlightedValuesContext), _f = _e.highlightedValuesUris, highlightedValuesUris = _f === void 0 ? [] : _f, highlightedClassName = _e.highlightedClassName;
+    var expandedContext = (0, SyncedExpandedAttributesContext_1.useSyncedExpandedAttributes)();
     (0, react_1.useEffect)(function () {
-        setExpanded(expandedProp);
-    }, [expandedProp]);
+        if (!expandedContext) {
+            setExpanded(expandedProp);
+        }
+    }, [expandedProp, expandedContext]);
     var hasAnalyticValue = (attributeTypesList || []).some(function (attributeType) { return (0, mdm_sdk_1.isAnalyticAttribute)(attributeType); });
     var attributeListEntity = (0, react_1.useMemo)(function () { return (__assign({ attributes: hasAnalyticValue ? null : attributeValue.value, analyticsAttributes: hasAnalyticValue ? attributeValue.value : null }, ((0, mdm_sdk_1.isSpecialAttribute)(attributeType) ? attributeValue.value : {}))); }, [attributeValue, hasAnalyticValue, attributeType]);
     var isVerificationAttribute = (0, react_context_selector_1.useContextSelector)(AttributesVerificationContext_1.AttributesVerificationContext, function (context) { return (context === null || context === void 0 ? void 0 : context.isVerificationAttribute) || ramda_1.F; });
-    var objectType = (0, mdm_sdk_1.getObjectTypeByAttributeUri)(attributeValue.uri);
+    var objectType = (0, mdm_sdk_1.getObjectTypeByAttributeUri)(uri);
     var showVerificationStatus = isVerificationAttribute(attributeType);
+    var actualExpanded = expandedContext ? expandedContext.isExpanded(uri) : expanded;
+    var handleToggle = (0, react_1.useCallback)(function () {
+        if (expandedContext) {
+            expandedContext.toggle(uri);
+        }
+        else {
+            setExpanded(function (value) { return !value; });
+        }
+    }, [expandedContext, uri]);
     return (react_1.default.createElement("div", { className: ReadOnlyComplexAttribute_module_css_1.default.complexContainer },
         react_1.default.createElement("div", { className: (0, classnames_1.default)(ReadOnlyComplexAttribute_module_css_1.default.labelContainer, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA) },
-            react_1.default.createElement(ArrowExpandButton_1.ArrowExpandButton, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
+            react_1.default.createElement(ArrowExpandButton_1.ArrowExpandButton, { onClick: handleToggle, expanded: actualExpanded }),
             LabelRenderer ? (react_1.default.createElement(LabelRenderer, { attributeType: attributeType, attributeValue: attributeValue })) : (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(Typography_1.default, { component: "span", variant: "body2", classes: { body2: ReadOnlyComplexAttribute_module_css_1.default.label }, className: (0, classnames_1.default)((_b = {},
-                        _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
+                        _b[highlightedClassName] = highlightedValuesUris.includes(uri),
                         _b[ReadOnlyComplexAttribute_module_css_1.default.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue),
                         _b)), "data-reltio-id": "reltio-attribute-complex-label" },
                     label,
-                    showVerificationStatus && (react_1.default.createElement(AttributeVerificationStatus_1.AttributeVerificationStatus, { attributeType: attributeType, attributeValue: attributeValue }))),
+                    showVerificationStatus && (react_1.default.createElement(AttributeVerificationStatus_1.AttributeVerificationStatus, { attributeType: attributeType, attributeValue: attributeValue })),
+                    FallbackSlot && (attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails) && (react_1.default.createElement(FallbackSlot, { ovDetails: attributeValue.ovDetails }))),
                 react_1.default.createElement("div", { className: ReadOnlyComplexAttribute_module_css_1.default.spacer }),
                 RightSlot && react_1.default.createElement(RightSlot, { attributeType: attributeType, attributeValue: attributeValue }),
-                react_1.default.createElement(CommentsContainer_1.CommentsContainer, { uri: attributeValue.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
-                        uri: attributeValue.uri
-                    }), objectType: objectType })))),
-        expanded && (react_1.default.createElement(ReadOnlyAttributesList_1.ReadOnlyAttributesList, { attrTypes: attributeTypesList, entity: attributeListEntity, drawLines: true, parentUri: uri, showNonOv: showNonOv, classes: classes }, children))));
+                react_1.default.createElement(CommentsContainer_1.CommentsContainer, { uri: uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, { uri: uri }), objectType: objectType })))),
+        actualExpanded && (react_1.default.createElement(ReadOnlyAttributesList_1.ReadOnlyAttributesList, { attrTypes: attributeTypesList, entity: attributeListEntity, drawLines: true, parentUri: uri, showNonOv: showNonOv, classes: classes, FallbackSlot: FallbackSlot }, children))));
 };
 exports.ReadOnlyComplexAttribute = ReadOnlyComplexAttribute;

package/cjs/SimpleAttribute/SimpleAttribute.js

@@ -69,14 +69,15 @@ var SimpleAttribute = function (_a) {
                     _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", style: variableStyles, className: (0, classnames_1.default)(className, SimpleAttribute_module_css_1.default.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
+                unmaskingControl,
+                FallbackSlot && (attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails) && react_1.default.createElement(FallbackSlot, { ovDetails: attributeValue.ovDetails }))))) : (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)(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,
-                FallbackSlot && react_1.default.createElement(FallbackSlot, { ovDetails: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails }))),
+                FallbackSlot && (attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails) && react_1.default.createElement(FallbackSlot, { ovDetails: 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/SyncedValueHeight/ValueHeightConsumer.js

@@ -0,0 +1,39 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValueHeightConsumer = void 0;
+var react_1 = __importStar(require("react"));
+var SyncedValueHeightsContext_1 = require("../contexts/SyncedValueHeightsContext");
+var ValueHeightConsumer = function (_a) {
+    var uri = _a.uri, children = _a.children;
+    var context = (0, react_1.useContext)(SyncedValueHeightsContext_1.SyncedValueHeightsContext);
+    if (!context) {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+    var getHeight = context.getHeight;
+    var height = getHeight(uri);
+    return react_1.default.createElement("div", { style: height !== undefined ? { height: height } : undefined }, children);
+};
+exports.ValueHeightConsumer = ValueHeightConsumer;

package/cjs/{features/crosswalks/AttributesTable/components/SyncedValueHeight → SyncedValueHeight}/ValueHeightReporter.js

@@ -29,25 +29,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ValueHeightReporter = void 0;
 var react_1 = __importStar(require("react"));
 var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
-var SyncedValueHeightsContext_1 = require("../../../contexts/SyncedValueHeightsContext");
+var SyncedValueHeightsContext_1 = require("../contexts/SyncedValueHeightsContext");
 var ValueHeightReporter = function (_a) {
     var uri = _a.uri, children = _a.children;
-    var reportHeight = (0, SyncedValueHeightsContext_1.useSyncedValueHeights)().reportHeight;
+    var context = (0, react_1.useContext)(SyncedValueHeightsContext_1.SyncedValueHeightsContext);
+    var reportHeight = context === null || context === void 0 ? void 0 : context.reportHeight;
     var contentRef = (0, react_1.useRef)(null);
     var lastHeightRef = (0, react_1.useRef)();
     var report = (0, react_1.useCallback)(function () {
         var _a;
+        if (!reportHeight)
+            return;
         var height = (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
-        if (!height || height === lastHeightRef.current)
+        if (height === undefined || height === lastHeightRef.current)
             return;
         lastHeightRef.current = height;
         reportHeight(uri, height);
-    }, [reportHeight, uri, lastHeightRef]);
+    }, [reportHeight, uri]);
     (0, react_1.useLayoutEffect)(function () {
         report();
     }, [report]);
+    if (!context) {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
     return (react_1.default.createElement("div", { ref: contentRef },
-        react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, onResize: report }),
+        react_1.default.createElement(react_resize_detector_1.default, { handleHeight: true, targetRef: contentRef, onResize: report }),
         children));
 };
 exports.ValueHeightReporter = ValueHeightReporter;

package/cjs/contexts/AutoExpandedAttributesContext/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type ProviderProps = {
+    children: React.ReactNode;
+    attributeUris: string[];
+};
+export declare const AutoExpandedAttributesProvider: ({ children, attributeUris }: ProviderProps) => React.JSX.Element;
+export declare const useAttributeAutoExpanded: (attributeUri: string) => any;
+export {};

package/cjs/contexts/{ExpandedAttributesContext → AutoExpandedAttributesContext}/index.js

@@ -23,17 +23,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAttributeExpanded = exports.ExpandedAttributesProvider = void 0;
+exports.useAttributeAutoExpanded = exports.AutoExpandedAttributesProvider = void 0;
 var react_1 = __importStar(require("react"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-var ExpandedAttributesContext = (0, react_1.createContext)(null);
-var ExpandedAttributesProvider = function (_a) {
+var AutoExpandedAttributesContext = (0, react_1.createContext)(null);
+var AutoExpandedAttributesProvider = function (_a) {
     var children = _a.children, attributeUris = _a.attributeUris;
-    return react_1.default.createElement(ExpandedAttributesContext.Provider, { value: attributeUris }, children);
+    return (react_1.default.createElement(AutoExpandedAttributesContext.Provider, { value: attributeUris }, children));
 };
-exports.ExpandedAttributesProvider = ExpandedAttributesProvider;
-var useAttributeExpanded = function (attributeUri) {
-    var expandedAttributes = (0, react_1.useContext)(ExpandedAttributesContext) || [];
+exports.AutoExpandedAttributesProvider = AutoExpandedAttributesProvider;
+var useAttributeAutoExpanded = function (attributeUri) {
+    var expandedAttributes = (0, react_1.useContext)(AutoExpandedAttributesContext) || [];
     return expandedAttributes.some(function (uri) { return (0, mdm_sdk_1.areOneHierarchyUris)(uri, attributeUri); });
 };
-exports.useAttributeExpanded = useAttributeExpanded;
+exports.useAttributeAutoExpanded = useAttributeAutoExpanded;

package/cjs/contexts/{ExpandedAttributesContext/useAttributeExpanded.test.js → AutoExpandedAttributesContext/useAttributeAutoExpanded.test.js}

@@ -9,11 +9,11 @@ var index_1 = require("./index");
 var setUp = function (attributeUri, attributeUris) {
     var DefaultProviders = function (_a) {
         var children = _a.children;
-        return (react_1.default.createElement(index_1.ExpandedAttributesProvider, { attributeUris: attributeUris }, children));
+        return (react_1.default.createElement(index_1.AutoExpandedAttributesProvider, { attributeUris: attributeUris }, children));
     };
     return (0, react_hooks_1.renderHook)(function (_a) {
         var attributeUri = _a.attributeUri;
-        return (0, index_1.useAttributeExpanded)(attributeUri);
+        return (0, index_1.useAttributeAutoExpanded)(attributeUri);
     }, {
         initialProps: { attributeUri: attributeUri },
         wrapper: attributeUris ? DefaultProviders : function (_a) {
@@ -22,7 +22,7 @@ var setUp = function (attributeUri, attributeUris) {
         }
     });
 };
-describe('useAttributeExpanded tests', function () {
+describe('useAttributeAutoExpanded tests', function () {
     it('should return false if no expanded context present', function () {
         var result = setUp('entities/1/attributes/Simple/1').result;
         expect(result.current).toBe(false);

package/cjs/contexts/SyncedExpandedAttributesContext/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type SyncedExpandedAttributesContextValue = {
+    isExpanded: (attributeUri: string) => boolean;
+    toggle: (attributeUri: string) => void;
+};
+export declare const SyncedExpandedAttributesContext: React.Context<SyncedExpandedAttributesContextValue>;
+type Props = {
+    children: React.ReactNode;
+};
+export declare const SyncedExpandedAttributesProvider: ({ children }: Props) => React.JSX.Element;
+export declare const useSyncedExpandedAttributes: () => SyncedExpandedAttributesContextValue;
+export {};

package/cjs/contexts/SyncedExpandedAttributesContext/index.js

@@ -0,0 +1,56 @@
+"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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSyncedExpandedAttributes = exports.SyncedExpandedAttributesProvider = exports.SyncedExpandedAttributesContext = void 0;
+var react_1 = __importStar(require("react"));
+var mdm_sdk_1 = require("@reltio/mdm-sdk");
+exports.SyncedExpandedAttributesContext = (0, react_1.createContext)(null);
+var SyncedExpandedAttributesProvider = function (_a) {
+    var children = _a.children;
+    var _b = (0, react_1.useState)([]), expandedAttributes = _b[0], setExpandedAttributes = _b[1];
+    var isExpanded = (0, react_1.useCallback)(function (attributeUri) { return expandedAttributes.includes(attributeUri); }, [expandedAttributes]);
+    var toggle = (0, react_1.useCallback)(function (attributeUri) {
+        setExpandedAttributes(function (prev) {
+            if (prev.includes(attributeUri)) {
+                return prev.filter(function (uri) { return !(0, mdm_sdk_1.areOneHierarchyUris)(uri, attributeUri); });
+            }
+            return __spreadArray(__spreadArray([], prev, true), [attributeUri], false);
+        });
+    }, []);
+    var value = (0, react_1.useMemo)(function () { return ({ isExpanded: isExpanded, toggle: toggle }); }, [isExpanded, toggle]);
+    return (react_1.default.createElement(exports.SyncedExpandedAttributesContext.Provider, { value: value }, children));
+};
+exports.SyncedExpandedAttributesProvider = SyncedExpandedAttributesProvider;
+var useSyncedExpandedAttributes = function () { return (0, react_1.useContext)(exports.SyncedExpandedAttributesContext); };
+exports.useSyncedExpandedAttributes = useSyncedExpandedAttributes;

package/{features/crosswalks/contexts/SyncedValueHeightsContext.d.ts → cjs/contexts/SyncedValueHeightsContext/index.d.ts}

@@ -1,11 +1,11 @@
 import React from 'react';
 type Props = {
     reportHeight: (uri: string, height: number) => void;
-    getHeight: (key: string) => number | undefined;
+    getHeight: (uri: string) => number | undefined;
     clear: () => void;
 };
+export declare const SyncedValueHeightsContext: React.Context<Props>;
 export declare const SyncedValueHeightsProvider: ({ children }: {
     children: React.ReactNode;
 }) => React.JSX.Element;
-export declare const useSyncedValueHeights: () => Props;
 export {};

package/cjs/{features/crosswalks/contexts/SyncedValueHeightsContext.js → contexts/SyncedValueHeightsContext/index.js}

@@ -34,33 +34,28 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSyncedValueHeights = exports.SyncedValueHeightsProvider = void 0;
+exports.SyncedValueHeightsProvider = exports.SyncedValueHeightsContext = void 0;
 var react_1 = __importStar(require("react"));
-var SyncedValueHeightsContext = (0, react_1.createContext)(null);
+var ramda_1 = require("ramda");
+exports.SyncedValueHeightsContext = (0, react_1.createContext)(null);
 var SyncedValueHeightsProvider = function (_a) {
     var children = _a.children;
     var _b = (0, react_1.useState)({}), heights = _b[0], setHeights = _b[1];
     var reportHeight = (0, react_1.useCallback)(function (uri, height) {
-        if (!uri || !height || heights[uri] === height)
+        if (!uri || (0, ramda_1.isNil)(height))
             return;
         setHeights(function (prev) {
             var _a;
-            return (__assign(__assign({}, prev), (_a = {}, _a[uri] = height, _a)));
+            if (prev[uri] === height)
+                return prev;
+            return __assign(__assign({}, prev), (_a = {}, _a[uri] = height, _a));
         });
-    }, [heights]);
-    var getHeight = (0, react_1.useCallback)(function (uri) { return (uri ? heights[uri] : 0); }, [heights]);
+    }, []);
+    var getHeight = (0, react_1.useCallback)(function (uri) { return heights[uri]; }, [heights]);
     var clear = (0, react_1.useCallback)(function () {
         setHeights({});
     }, []);
     var value = (0, react_1.useMemo)(function () { return ({ reportHeight: reportHeight, getHeight: getHeight, clear: clear }); }, [reportHeight, getHeight, clear]);
-    return react_1.default.createElement(SyncedValueHeightsContext.Provider, { value: value }, children);
+    return react_1.default.createElement(exports.SyncedValueHeightsContext.Provider, { value: value }, children);
 };
 exports.SyncedValueHeightsProvider = SyncedValueHeightsProvider;
-var useSyncedValueHeights = function () {
-    var context = (0, react_1.useContext)(SyncedValueHeightsContext);
-    if (!context) {
-        throw new Error('useSyncedValueHeights must be used within SyncedValueHeightsProvider');
-    }
-    return context;
-};
-exports.useSyncedValueHeights = useSyncedValueHeights;

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

@@ -53,7 +53,8 @@ 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 SyncedValueHeightsContext_1 = require("../../../contexts/SyncedValueHeightsContext");
+var SyncedExpandedAttributesContext_1 = require("../../../contexts/SyncedExpandedAttributesContext");
 var styles_1 = require("./styles");
 var DEFAULT_ROW_HEIGHT = 68;
 var getIdFromRowValue = function (rowValue) { return rowValue.ovValues.attributeType.uri; };
@@ -148,8 +149,9 @@ 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(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(SyncedExpandedAttributesContext_1.SyncedExpandedAttributesProvider, null,
+                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

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