@reltio/components 1.4.2231 → 1.4.2233

package/InlineComplexAttribute/InlineComplexAttribute.js

@@ -10,7 +10,7 @@ import { IgnoreButton } from '../IgnoreButton';
 import { DeleteButton } from '../DeleteButton';
 import { useDidUpdateEffect } from '../hooks/useDidUpdateEffect';
 import { useAttributeState } from '../hooks/useAttributeState';
-import { useAttributeExpanded } from '../contexts/ExpandedAttributesContext';
+import { useAttributeAutoExpanded } from '../contexts/AutoExpandedAttributesContext';
 import { useStyles } from './styles';
 export var InlineComplexAttribute = function (_a) {
     var attributeType = _a.attributeType, attributeValue = _a.attributeValue, attributeTypesList = _a.attributeTypesList, label = _a.label, crosswalksMap = _a.crosswalksMap, disableEdit = _a.disableEdit, disableDelete = _a.disableDelete, onPin = _a.onPin, onIgnore = _a.onIgnore, onDelete = _a.onDelete, onEdit = _a.onEdit, onAdd = _a.onAdd, emptyTempAttributeUris = _a.emptyTempAttributeUris;
@@ -22,7 +22,7 @@ export var InlineComplexAttribute = function (_a) {
     var showPin = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.pin);
     var showIgnore = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.ignored);
     var showDelete = !isReadingMode && canDelete;
-    var expandedFromContext = useAttributeExpanded(attributeValue.uri);
+    var expandedFromContext = useAttributeAutoExpanded(attributeValue.uri);
     var _c = useState(expandedFromContext || isTemporary), expanded = _c[0], setExpanded = _c[1];
     useDidUpdateEffect(function () {
         if (expandedFromContext)

package/InlineComplexAttribute/InlineComplexAttribute.test.js

@@ -51,12 +51,12 @@ import userEvent from '@testing-library/user-event';
 import { DndContext } from '@dnd-kit/core';
 import { createNewAttribute } from '@reltio/mdm-sdk';
 import { ComplexAttributeLabel } from '../ComplexAttributeLabel';
-import { useAttributeExpanded } from '../contexts/ExpandedAttributesContext';
+import { useAttributeAutoExpanded } from '../contexts/AutoExpandedAttributesContext';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';
 import { getMuiIconByName } from '../test-utils';
 import { InlineComplexAttribute } from './InlineComplexAttribute';
-jest.mock('../contexts/ExpandedAttributesContext', function () { return ({
-    useAttributeExpanded: jest.fn()
+jest.mock('../contexts/AutoExpandedAttributesContext', function () { return ({
+    useAttributeAutoExpanded: jest.fn()
 }); });
 var attributeType = {
     uri: 'configuration/entityTypes/HCP/attributes/Nested',
@@ -142,7 +142,7 @@ var setUp = function (props) {
 describe('InlineComplexAttribute tests', function () {
     beforeEach(function () {
         jest.clearAllMocks();
-        useAttributeExpanded.mockReturnValue(false);
+        useAttributeAutoExpanded.mockReturnValue(false);
     });
     it('should render correctly', function () {
         setUp();
@@ -400,7 +400,7 @@ describe('InlineComplexAttribute tests', function () {
         });
     }); });
     it('should render temporary attribute expanded by default', function () {
-        useAttributeExpanded.mockReturnValueOnce(true);
+        useAttributeAutoExpanded.mockReturnValueOnce(true);
         setUp();
         expect(screen.getByTestId('arrow-expand-button').querySelector('svg')).toHaveClass('expanded');
         expect(screen.getByTestId('branch-decorator')).toBeInTheDocument();
@@ -412,7 +412,7 @@ describe('InlineComplexAttribute tests', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    useAttributeExpanded.mockReturnValueOnce(true);
+                    useAttributeAutoExpanded.mockReturnValueOnce(true);
                     user = setUp({ attributeValue: createNewAttribute({ attributeType: attributeType, parentUri: 'entities/1' }) }).user;
                     return [4 /*yield*/, user.hover(screen.getByTestId('inline-complex-attribute'))];
                 case 1:
@@ -427,7 +427,7 @@ describe('InlineComplexAttribute tests', function () {
         });
     }); });
     it('should render attribute expanded by default if it is expanded via context', function () {
-        useAttributeExpanded.mockReturnValueOnce(true);
+        useAttributeAutoExpanded.mockReturnValueOnce(true);
         setUp();
         expect(screen.getByTestId('arrow-expand-button').querySelector('svg')).toHaveClass('expanded');
         expect(screen.getByTestId('branch-decorator')).toBeInTheDocument();

package/ReadOnlyAttributesList/ReadOnlyAttributesList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AttributeType, Entity, Relation } from '@reltio/mdm-sdk';
+import { AttributeType, Entity, Relation, OvDetails } from '@reltio/mdm-sdk';
 import { ReadOnlyAttributeClasses } from '../types';
 type Props = {
     entity: Partial<Entity> | Partial<Relation>;
@@ -12,9 +12,12 @@ type Props = {
     fixedTypeUris?: string[];
     showNonOv?: boolean;
     classes?: ReadOnlyAttributeClasses;
+    FallbackSlot?: ({ ovDetails }: {
+        ovDetails: OvDetails;
+    }) => React.ReactElement;
 };
 declare const _default: React.MemoExoticComponent<{
-    ({ attrTypes, entity, parentUri, drawLines, children, className, max, fixedTypeUris, showNonOv, classes }: Props): React.JSX.Element;
+    ({ attrTypes, entity, parentUri, drawLines, children, className, max, fixedTypeUris, showNonOv, classes, FallbackSlot }: Props): React.JSX.Element;
     displayName: string;
 }>;
 export default _default;

package/ReadOnlyAttributesList/ReadOnlyAttributesList.js

@@ -21,7 +21,7 @@ import { splitPagersData } from '../helpers/attributesView';
 import { HiddenAttributesContext } from '../contexts/HiddenAttributesContext';
 import { AlwaysVisibleAttributesContext } from '../contexts/AlwaysVisibleAttributesContext';
 var ReadOnlyAttributesList = function (_a) {
-    var _b = _a.attrTypes, attrTypes = _b === void 0 ? [] : _b, entity = _a.entity, parentUri = _a.parentUri, drawLines = _a.drawLines, children = _a.children, className = _a.className, max = _a.max, _c = _a.fixedTypeUris, fixedTypeUris = _c === void 0 ? FIXED_TYPE_URIS : _c, showNonOv = _a.showNonOv, classes = _a.classes;
+    var _b = _a.attrTypes, attrTypes = _b === void 0 ? [] : _b, entity = _a.entity, parentUri = _a.parentUri, drawLines = _a.drawLines, children = _a.children, className = _a.className, max = _a.max, _c = _a.fixedTypeUris, fixedTypeUris = _c === void 0 ? FIXED_TYPE_URIS : _c, showNonOv = _a.showNonOv, classes = _a.classes, FallbackSlot = _a.FallbackSlot;
     var hiddenAttributes = useContext(HiddenAttributesContext);
     var alwaysVisibleAttributes = useContext(AlwaysVisibleAttributesContext);
     var entityUri = parentUri && getBaseUri(parentUri);
@@ -46,7 +46,7 @@ var ReadOnlyAttributesList = function (_a) {
         children && React.createElement(BranchDecorator, __assign({}, decoratorProps), children),
         visibleAttributePagersData.concat(fixedPagersData).map(function (_a) {
             var attrType = _a.attrType, values = _a.values;
-            return (React.createElement(ReadOnlyAttributesPager, { key: attrType.uri, attributeType: attrType, drawLines: drawLines, values: values, paging: path(['paging', attrType.uri], entity.attributes), parentUri: parentUri, showNonOv: showNonOv, classes: classes }));
+            return (React.createElement(ReadOnlyAttributesPager, { key: attrType.uri, attributeType: attrType, drawLines: drawLines, values: values, paging: path(['paging', attrType.uri], entity.attributes), parentUri: parentUri, showNonOv: showNonOv, classes: classes, FallbackSlot: FallbackSlot }));
         }),
         showMore && React.createElement(ShowMore, { onClick: onShowMore }),
         showLess && React.createElement(ShowLess, { onClick: onShowLess })));

package/ReadOnlyAttributesPager/ReadOnlyAttributesPager.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AttributeType, NestedAttributeValue, Paging, ReferenceAttributeValue, SimpleAttributeValue, ImageAttributeValue, AttributeValue } from '@reltio/mdm-sdk';
+import { AttributeType, NestedAttributeValue, Paging, ReferenceAttributeValue, SimpleAttributeValue, ImageAttributeValue, AttributeValue, OvDetails } from '@reltio/mdm-sdk';
 import { ReadOnlyAttributeClasses } from '../types';
 type Props = {
     values: (SimpleAttributeValue | NestedAttributeValue | ReferenceAttributeValue | string | number | ImageAttributeValue | AttributeValue)[];
@@ -10,6 +10,9 @@ type Props = {
     max?: number;
     showNonOv?: boolean;
     classes?: ReadOnlyAttributeClasses;
+    FallbackSlot?: ({ ovDetails }: {
+        ovDetails: OvDetails;
+    }) => React.ReactElement;
 };
-declare const _default: React.MemoExoticComponent<({ values, attributeType, drawLines, paging, parentUri, max: maxProp, showNonOv, classes }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ values, attributeType, drawLines, paging, parentUri, max: maxProp, showNonOv, classes, FallbackSlot }: Props) => React.JSX.Element>;
 export default _default;

package/ReadOnlyAttributesPager/ReadOnlyAttributesPager.js

@@ -32,7 +32,7 @@ var RENDERER_TYPES = {
 var ReadOnlyAttributesPager = function (_a) {
     var _b, _c, _d, _e;
     var _f;
-    var values = _a.values, attributeType = _a.attributeType, drawLines = _a.drawLines, _g = _a.paging, paging = _g === void 0 ? {} : _g, parentUri = _a.parentUri, maxProp = _a.max, showNonOv = _a.showNonOv, classes = _a.classes;
+    var values = _a.values, attributeType = _a.attributeType, drawLines = _a.drawLines, _g = _a.paging, paging = _g === void 0 ? {} : _g, parentUri = _a.parentUri, maxProp = _a.max, showNonOv = _a.showNonOv, classes = _a.classes, FallbackSlot = _a.FallbackSlot;
     var styles = useStyles();
     var requestNextPageOfAttributeValues = useMdmAction('requestNextPageOfAttributeValues');
     var maxValuesInResponse = useMdmMaxValuesInResponse();
@@ -63,9 +63,9 @@ var ReadOnlyAttributesPager = function (_a) {
         ])(attributeType);
         switch (type) {
             case RENDERER_TYPES.oneLine:
-                return (React.createElement(OneLineRenderer, { value: visibleValues[0], nonVisibleValues: nonVisibleValues, totalNonVisibleValues: totalNonVisibleValues, attributeType: attributeType, showNonOv: showNonOv, classes: classes }));
+                return (React.createElement(OneLineRenderer, { value: visibleValues[0], nonVisibleValues: nonVisibleValues, totalNonVisibleValues: totalNonVisibleValues, attributeType: attributeType, showNonOv: showNonOv, classes: classes, FallbackSlot: FallbackSlot }));
             case RENDERER_TYPES.multiLine:
-                return (React.createElement(MultiLineRenderer, { values: visibleValues, nonVisibleValues: nonVisibleValues, totalVisibleValues: totalVisibleValues, totalNonVisibleValues: totalNonVisibleValues, attributeType: attributeType, parentUri: parentUri, max: max, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv, classes: classes }));
+                return (React.createElement(MultiLineRenderer, { values: visibleValues, nonVisibleValues: nonVisibleValues, totalVisibleValues: totalVisibleValues, totalNonVisibleValues: totalNonVisibleValues, attributeType: attributeType, parentUri: parentUri, max: max, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv, classes: classes, FallbackSlot: FallbackSlot }));
             case RENDERER_TYPES.imageLine:
                 return (React.createElement(ImageLineRenderer, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, parentUri: parentUri, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv }));
             case RENDERER_TYPES.special:

package/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/ReadOnlyAttributesPager/components/MultiLineRenderer/MultiLineRenderer.js

@@ -13,9 +13,10 @@ import { ControlAttributeIcon } from '../../../ControlAttributeIcon';
 import { useMdmControlAttributes, useMdmMetadata, useMdmShowMasking } from '../../../contexts/MdmModuleContext';
 import { AttributesVerificationContext } from '../../../contexts/AttributesVerificationContext';
 import { VerificationButton } from '../../../VerificationButton/VerificationButton';
+import { ValueHeightReporter } from '../../../SyncedValueHeight';
 import { useMultiLineStyles } from '../../styles';
 export 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 = useMultiLineStyles();
     var _b = useState(max), visibleValuesCount = _b[0], setVisibleValuesCount = _b[1];
     var isVerificationAttribute = useContextSelector(AttributesVerificationContext, function (context) { return (context === null || context === void 0 ? void 0 : context.isVerificationAttribute) || F; });
@@ -50,14 +51,17 @@ export var MultiLineRenderer = function (_a) {
     var shownValues = values.slice(0, visibleValuesCount);
     var hiddenValuesCount = totalVisibleValues - visibleValuesCount;
     var showVerificationButton = isVerificationAttribute(attributeType);
-    return (React.createElement("div", { "data-reltio-id": "multi-line-renderer", className: styles.wrapper },
-        React.createElement("div", { className: styles.titleRow },
-            React.createElement(AttributeTitle, { label: label, className: classnames(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
-            React.createElement(DescriptionIcon, { description: description }),
-            isControlAttribute && React.createElement(ControlAttributeIcon, null),
-            React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
-            showVerificationButton && React.createElement(VerificationButton, { attributeType: attributeType })),
-        React.createElement("div", { className: styles.attributes }, shownValues.map(function (value) { return (React.createElement(ReadOnlyAttribute, { key: value.uri, className: classnames(styles.attribute, classes === null || classes === void 0 ? void 0 : classes.content), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, classes: classes })); })),
-        showMore && (React.createElement(ShowMore, { moreNumber: min(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),
-        showLess && React.createElement(ShowLess, { onClick: onShowLess })));
+    var blockUri = parentUri ? "".concat(parentUri, "/").concat(attributeType.uri) : attributeType.uri;
+    return (React.createElement(ValueHeightReporter, { uri: blockUri },
+        React.createElement("div", { "data-reltio-id": "multi-line-renderer", className: styles.wrapper },
+            React.createElement("div", { className: styles.titleRow },
+                React.createElement(AttributeTitle, { label: label, className: classnames(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
+                React.createElement(DescriptionIcon, { description: description }),
+                isControlAttribute && React.createElement(ControlAttributeIcon, null),
+                React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
+                showVerificationButton && React.createElement(VerificationButton, { attributeType: attributeType })),
+            React.createElement("div", { className: styles.attributes }, shownValues.map(function (value) { return (React.createElement(ValueHeightReporter, { key: value.uri, uri: value.uri },
+                React.createElement(ReadOnlyAttribute, { className: classnames(styles.attribute, classes === null || classes === void 0 ? void 0 : classes.content), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, classes: classes, FallbackSlot: FallbackSlot }))); })),
+            showMore && (React.createElement(ShowMore, { moreNumber: min(max, hiddenValuesCount), valueNumber: hiddenValuesCount, onClick: onShowMore })),
+            showLess && React.createElement(ShowLess, { onClick: onShowLess }))));
 };

package/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/ReadOnlyAttributesPager/components/OneLineRenderer/OneLineRenderer.js

@@ -9,22 +9,24 @@ import { DescriptionIcon } from '../../../DescriptionIcon';
 import { ReadOnlyAttribute } from '../../../ReadOnlyAttributesFactory';
 import { ControlAttributeIcon } from '../../../ControlAttributeIcon';
 import { useMdmControlAttributes } from '../../../contexts/MdmModuleContext';
+import { ValueHeightReporter } from '../../../SyncedValueHeight';
 import { useOneLineStyles } from '../../styles';
 export 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 = useOneLineStyles();
     var label = attributeType.label, description = attributeType.description;
     var controlAttributes = useMdmControlAttributes();
     var isControlAttribute = useMemo(function () { return controlAttributes.includes(attributeType.uri); }, [controlAttributes, attributeType.uri]);
     var objectType = getObjectTypeByAttributeUri(value.uri);
-    return (React.createElement("div", { "data-reltio-id": "one-line-renderer", className: classnames(styles.collaborationWrapper, COMMENTS_CONTAINER_VISIBILITY_AREA) },
-        React.createElement("div", { className: classnames(styles.titleRow, styles.wrapper) },
-            React.createElement(AttributeTitle, { label: label, className: classnames(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
-            React.createElement(DescriptionIcon, { description: description, className: styles.descriptionIcon }),
-            isControlAttribute && React.createElement(ControlAttributeIcon, null),
-            React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
-            React.createElement(ReadOnlyAttribute, { className: classnames(styles.attribute, classes === null || classes === void 0 ? void 0 : classes.content), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, inlined: true, classes: classes })),
-        React.createElement(CommentsContainer, { uri: value.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
-                uri: value.uri
-            }), objectType: objectType })));
+    return (React.createElement(ValueHeightReporter, { uri: value.uri },
+        React.createElement("div", { "data-reltio-id": "one-line-renderer", className: classnames(styles.collaborationWrapper, COMMENTS_CONTAINER_VISIBILITY_AREA) },
+            React.createElement("div", { className: classnames(styles.titleRow, styles.wrapper) },
+                React.createElement(AttributeTitle, { label: label, className: classnames(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
+                React.createElement(DescriptionIcon, { description: description, className: styles.descriptionIcon }),
+                isControlAttribute && React.createElement(ControlAttributeIcon, null),
+                React.createElement(OvIcon, { nonOvValues: nonVisibleValues, attributeType: attributeType, className: styles.ovIcon, nonOvTotal: totalNonVisibleValues }),
+                React.createElement(ReadOnlyAttribute, { className: classnames(styles.attribute, classes === null || classes === void 0 ? void 0 : classes.content), attributeValue: value, attributeType: attributeType, showNonOv: showNonOv, inlined: true, classes: classes, FallbackSlot: FallbackSlot })),
+            React.createElement(CommentsContainer, { uri: value.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
+                    uri: value.uri
+                }), objectType: objectType }))));
 };

package/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/ReadOnlyComplexAttribute/ReadOnlyComplexAttribute.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React, { useContext, useEffect, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState, useCallback } from 'react';
 import { F } from 'ramda';
 import classnames from 'classnames';
 import { useContextSelector } from '@fluentui/react-context-selector';
@@ -22,35 +22,47 @@ import { HighlightedValuesContext } from '../contexts/HighlightedValuesContext';
 import { AttributesVerificationContext } from '../contexts/AttributesVerificationContext';
 import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../constants/classnames';
 import { AttributeVerificationStatus } from '../AttributeVerificationStatus/AttributeVerificationStatus';
+import { useSyncedExpandedAttributes } from '../contexts/SyncedExpandedAttributesContext';
 import styles from './ReadOnlyComplexAttribute.module.css';
 export 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 = useState(false), expanded = _d[0], setExpanded = _d[1];
     var _e = useContext(HighlightedValuesContext), _f = _e.highlightedValuesUris, highlightedValuesUris = _f === void 0 ? [] : _f, highlightedClassName = _e.highlightedClassName;
+    var expandedContext = useSyncedExpandedAttributes();
     useEffect(function () {
-        setExpanded(expandedProp);
-    }, [expandedProp]);
+        if (!expandedContext) {
+            setExpanded(expandedProp);
+        }
+    }, [expandedProp, expandedContext]);
     var hasAnalyticValue = (attributeTypesList || []).some(function (attributeType) { return isAnalyticAttribute(attributeType); });
     var attributeListEntity = useMemo(function () { return (__assign({ attributes: hasAnalyticValue ? null : attributeValue.value, analyticsAttributes: hasAnalyticValue ? attributeValue.value : null }, (isSpecialAttribute(attributeType) ? attributeValue.value : {}))); }, [attributeValue, hasAnalyticValue, attributeType]);
     var isVerificationAttribute = useContextSelector(AttributesVerificationContext, function (context) { return (context === null || context === void 0 ? void 0 : context.isVerificationAttribute) || F; });
-    var objectType = getObjectTypeByAttributeUri(attributeValue.uri);
+    var objectType = getObjectTypeByAttributeUri(uri);
     var showVerificationStatus = isVerificationAttribute(attributeType);
+    var actualExpanded = expandedContext ? expandedContext.isExpanded(uri) : expanded;
+    var handleToggle = useCallback(function () {
+        if (expandedContext) {
+            expandedContext.toggle(uri);
+        }
+        else {
+            setExpanded(function (value) { return !value; });
+        }
+    }, [expandedContext, uri]);
     return (React.createElement("div", { className: styles.complexContainer },
         React.createElement("div", { className: classnames(styles.labelContainer, COMMENTS_CONTAINER_VISIBILITY_AREA) },
-            React.createElement(ArrowExpandButton, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
+            React.createElement(ArrowExpandButton, { onClick: handleToggle, expanded: actualExpanded }),
             LabelRenderer ? (React.createElement(LabelRenderer, { attributeType: attributeType, attributeValue: attributeValue })) : (React.createElement(React.Fragment, null,
                 React.createElement(Typography, { component: "span", variant: "body2", classes: { body2: styles.label }, className: classnames((_b = {},
-                        _b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
+                        _b[highlightedClassName] = highlightedValuesUris.includes(uri),
                         _b[styles.ovFalse] = !isOv(attributeValue),
                         _b)), "data-reltio-id": "reltio-attribute-complex-label" },
                     label,
-                    showVerificationStatus && (React.createElement(AttributeVerificationStatus, { attributeType: attributeType, attributeValue: attributeValue }))),
+                    showVerificationStatus && (React.createElement(AttributeVerificationStatus, { attributeType: attributeType, attributeValue: attributeValue })),
+                    FallbackSlot && (attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails) && (React.createElement(FallbackSlot, { ovDetails: attributeValue.ovDetails }))),
                 React.createElement("div", { className: styles.spacer }),
                 RightSlot && React.createElement(RightSlot, { attributeType: attributeType, attributeValue: attributeValue }),
-                React.createElement(CommentsContainer, { uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
-                        uri: attributeValue.uri
-                    }), objectType: objectType })))),
-        expanded && (React.createElement(ReadOnlyAttributesList, { attrTypes: attributeTypesList, entity: attributeListEntity, drawLines: true, parentUri: uri, showNonOv: showNonOv, classes: classes }, children))));
+                React.createElement(CommentsContainer, { uri: uri, relatedObjectUris: createRelatedObjectUris(objectType, { uri: uri }), objectType: objectType })))),
+        actualExpanded && (React.createElement(ReadOnlyAttributesList, { attrTypes: attributeTypesList, entity: attributeListEntity, drawLines: true, parentUri: uri, showNonOv: showNonOv, classes: classes, FallbackSlot: FallbackSlot }, children))));
 };

package/SimpleAttribute/SimpleAttribute.js

@@ -40,14 +40,15 @@ 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", style: variableStyles, className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
+                unmaskingControl,
+                FallbackSlot && (attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails) && React.createElement(FallbackSlot, { ovDetails: attributeValue.ovDetails }))))) : (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,
-                FallbackSlot && React.createElement(FallbackSlot, { ovDetails: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails }))),
+                FallbackSlot && (attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails) && React.createElement(FallbackSlot, { ovDetails: attributeValue.ovDetails }))),
         React.createElement(CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
                 uri: attributeValue.uri
             }), objectType: objectType })));

package/SyncedValueHeight/ValueHeightConsumer.js

@@ -0,0 +1,12 @@
+import React, { useContext } from 'react';
+import { SyncedValueHeightsContext } from '../contexts/SyncedValueHeightsContext';
+export var ValueHeightConsumer = function (_a) {
+    var uri = _a.uri, children = _a.children;
+    var context = useContext(SyncedValueHeightsContext);
+    if (!context) {
+        return React.createElement(React.Fragment, null, children);
+    }
+    var getHeight = context.getHeight;
+    var height = getHeight(uri);
+    return React.createElement("div", { style: height !== undefined ? { height: height } : undefined }, children);
+};

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

@@ -1,23 +1,29 @@
-import React, { useCallback, useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useContext, useLayoutEffect, useRef } from 'react';
 import ReactResizeDetector from 'react-resize-detector';
-import { useSyncedValueHeights } from '../../../contexts/SyncedValueHeightsContext';
+import { SyncedValueHeightsContext } from '../contexts/SyncedValueHeightsContext';
 export var ValueHeightReporter = function (_a) {
     var uri = _a.uri, children = _a.children;
-    var reportHeight = useSyncedValueHeights().reportHeight;
+    var context = useContext(SyncedValueHeightsContext);
+    var reportHeight = context === null || context === void 0 ? void 0 : context.reportHeight;
     var contentRef = useRef(null);
     var lastHeightRef = useRef();
     var report = 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]);
     useLayoutEffect(function () {
         report();
     }, [report]);
+    if (!context) {
+        return React.createElement(React.Fragment, null, children);
+    }
     return (React.createElement("div", { ref: contentRef },
-        React.createElement(ReactResizeDetector, { handleHeight: true, onResize: report }),
+        React.createElement(ReactResizeDetector, { handleHeight: true, targetRef: contentRef, onResize: report }),
         children));
 };

package/cjs/InlineComplexAttribute/InlineComplexAttribute.js

@@ -36,7 +36,7 @@ var IgnoreButton_1 = require("../IgnoreButton");
 var DeleteButton_1 = require("../DeleteButton");
 var useDidUpdateEffect_1 = require("../hooks/useDidUpdateEffect");
 var useAttributeState_1 = require("../hooks/useAttributeState");
-var ExpandedAttributesContext_1 = require("../contexts/ExpandedAttributesContext");
+var AutoExpandedAttributesContext_1 = require("../contexts/AutoExpandedAttributesContext");
 var styles_1 = require("./styles");
 var InlineComplexAttribute = function (_a) {
     var attributeType = _a.attributeType, attributeValue = _a.attributeValue, attributeTypesList = _a.attributeTypesList, label = _a.label, crosswalksMap = _a.crosswalksMap, disableEdit = _a.disableEdit, disableDelete = _a.disableDelete, onPin = _a.onPin, onIgnore = _a.onIgnore, onDelete = _a.onDelete, onEdit = _a.onEdit, onAdd = _a.onAdd, emptyTempAttributeUris = _a.emptyTempAttributeUris;
@@ -48,7 +48,7 @@ var InlineComplexAttribute = function (_a) {
     var showPin = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.pin);
     var showIgnore = !isTemporary && ((!isReadingMode && canEdit) || attributeValue.ignored);
     var showDelete = !isReadingMode && canDelete;
-    var expandedFromContext = (0, ExpandedAttributesContext_1.useAttributeExpanded)(attributeValue.uri);
+    var expandedFromContext = (0, AutoExpandedAttributesContext_1.useAttributeAutoExpanded)(attributeValue.uri);
     var _c = (0, react_1.useState)(expandedFromContext || isTemporary), expanded = _c[0], setExpanded = _c[1];
     (0, useDidUpdateEffect_1.useDidUpdateEffect)(function () {
         if (expandedFromContext)

package/cjs/InlineComplexAttribute/InlineComplexAttribute.test.js

@@ -56,12 +56,12 @@ var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var core_1 = require("@dnd-kit/core");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var ComplexAttributeLabel_1 = require("../ComplexAttributeLabel");
-var ExpandedAttributesContext_1 = require("../contexts/ExpandedAttributesContext");
+var AutoExpandedAttributesContext_1 = require("../contexts/AutoExpandedAttributesContext");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
 var test_utils_1 = require("../test-utils");
 var InlineComplexAttribute_1 = require("./InlineComplexAttribute");
-jest.mock('../contexts/ExpandedAttributesContext', function () { return ({
-    useAttributeExpanded: jest.fn()
+jest.mock('../contexts/AutoExpandedAttributesContext', function () { return ({
+    useAttributeAutoExpanded: jest.fn()
 }); });
 var attributeType = {
     uri: 'configuration/entityTypes/HCP/attributes/Nested',
@@ -147,7 +147,7 @@ var setUp = function (props) {
 describe('InlineComplexAttribute tests', function () {
     beforeEach(function () {
         jest.clearAllMocks();
-        ExpandedAttributesContext_1.useAttributeExpanded.mockReturnValue(false);
+        AutoExpandedAttributesContext_1.useAttributeAutoExpanded.mockReturnValue(false);
     });
     it('should render correctly', function () {
         setUp();
@@ -405,7 +405,7 @@ describe('InlineComplexAttribute tests', function () {
         });
     }); });
     it('should render temporary attribute expanded by default', function () {
-        ExpandedAttributesContext_1.useAttributeExpanded.mockReturnValueOnce(true);
+        AutoExpandedAttributesContext_1.useAttributeAutoExpanded.mockReturnValueOnce(true);
         setUp();
         expect(react_2.screen.getByTestId('arrow-expand-button').querySelector('svg')).toHaveClass('expanded');
         expect(react_2.screen.getByTestId('branch-decorator')).toBeInTheDocument();
@@ -417,7 +417,7 @@ describe('InlineComplexAttribute tests', function () {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    ExpandedAttributesContext_1.useAttributeExpanded.mockReturnValueOnce(true);
+                    AutoExpandedAttributesContext_1.useAttributeAutoExpanded.mockReturnValueOnce(true);
                     user = setUp({ attributeValue: (0, mdm_sdk_1.createNewAttribute)({ attributeType: attributeType, parentUri: 'entities/1' }) }).user;
                     return [4 /*yield*/, user.hover(react_2.screen.getByTestId('inline-complex-attribute'))];
                 case 1:
@@ -432,7 +432,7 @@ describe('InlineComplexAttribute tests', function () {
         });
     }); });
     it('should render attribute expanded by default if it is expanded via context', function () {
-        ExpandedAttributesContext_1.useAttributeExpanded.mockReturnValueOnce(true);
+        AutoExpandedAttributesContext_1.useAttributeAutoExpanded.mockReturnValueOnce(true);
         setUp();
         expect(react_2.screen.getByTestId('arrow-expand-button').querySelector('svg')).toHaveClass('expanded');
         expect(react_2.screen.getByTestId('branch-decorator')).toBeInTheDocument();

package/cjs/ReadOnlyAttributesList/ReadOnlyAttributesList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AttributeType, Entity, Relation } from '@reltio/mdm-sdk';
+import { AttributeType, Entity, Relation, OvDetails } from '@reltio/mdm-sdk';
 import { ReadOnlyAttributeClasses } from '../types';
 type Props = {
     entity: Partial<Entity> | Partial<Relation>;
@@ -12,9 +12,12 @@ type Props = {
     fixedTypeUris?: string[];
     showNonOv?: boolean;
     classes?: ReadOnlyAttributeClasses;
+    FallbackSlot?: ({ ovDetails }: {
+        ovDetails: OvDetails;
+    }) => React.ReactElement;
 };
 declare const _default: React.MemoExoticComponent<{
-    ({ attrTypes, entity, parentUri, drawLines, children, className, max, fixedTypeUris, showNonOv, classes }: Props): React.JSX.Element;
+    ({ attrTypes, entity, parentUri, drawLines, children, className, max, fixedTypeUris, showNonOv, classes, FallbackSlot }: Props): React.JSX.Element;
     displayName: string;
 }>;
 export default _default;

package/cjs/ReadOnlyAttributesList/ReadOnlyAttributesList.js

@@ -46,7 +46,7 @@ var attributesView_1 = require("../helpers/attributesView");
 var HiddenAttributesContext_1 = require("../contexts/HiddenAttributesContext");
 var AlwaysVisibleAttributesContext_1 = require("../contexts/AlwaysVisibleAttributesContext");
 var ReadOnlyAttributesList = function (_a) {
-    var _b = _a.attrTypes, attrTypes = _b === void 0 ? [] : _b, entity = _a.entity, parentUri = _a.parentUri, drawLines = _a.drawLines, children = _a.children, className = _a.className, max = _a.max, _c = _a.fixedTypeUris, fixedTypeUris = _c === void 0 ? constants_1.FIXED_TYPE_URIS : _c, showNonOv = _a.showNonOv, classes = _a.classes;
+    var _b = _a.attrTypes, attrTypes = _b === void 0 ? [] : _b, entity = _a.entity, parentUri = _a.parentUri, drawLines = _a.drawLines, children = _a.children, className = _a.className, max = _a.max, _c = _a.fixedTypeUris, fixedTypeUris = _c === void 0 ? constants_1.FIXED_TYPE_URIS : _c, showNonOv = _a.showNonOv, classes = _a.classes, FallbackSlot = _a.FallbackSlot;
     var hiddenAttributes = (0, react_1.useContext)(HiddenAttributesContext_1.HiddenAttributesContext);
     var alwaysVisibleAttributes = (0, react_1.useContext)(AlwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext);
     var entityUri = parentUri && (0, mdm_sdk_1.getBaseUri)(parentUri);
@@ -71,7 +71,7 @@ var ReadOnlyAttributesList = function (_a) {
         children && react_1.default.createElement(BranchDecorator_1.BranchDecorator, __assign({}, decoratorProps), children),
         visibleAttributePagersData.concat(fixedPagersData).map(function (_a) {
             var attrType = _a.attrType, values = _a.values;
-            return (react_1.default.createElement(ReadOnlyAttributesPager_1.ReadOnlyAttributesPager, { key: attrType.uri, attributeType: attrType, drawLines: drawLines, values: values, paging: (0, ramda_1.path)(['paging', attrType.uri], entity.attributes), parentUri: parentUri, showNonOv: showNonOv, classes: classes }));
+            return (react_1.default.createElement(ReadOnlyAttributesPager_1.ReadOnlyAttributesPager, { key: attrType.uri, attributeType: attrType, drawLines: drawLines, values: values, paging: (0, ramda_1.path)(['paging', attrType.uri], entity.attributes), parentUri: parentUri, showNonOv: showNonOv, classes: classes, FallbackSlot: FallbackSlot }));
         }),
         showMore && react_1.default.createElement(ShowMore_1.ShowMore, { onClick: onShowMore }),
         showLess && react_1.default.createElement(ShowLess_1.ShowLess, { onClick: onShowLess })));

package/cjs/ReadOnlyAttributesPager/ReadOnlyAttributesPager.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { AttributeType, NestedAttributeValue, Paging, ReferenceAttributeValue, SimpleAttributeValue, ImageAttributeValue, AttributeValue } from '@reltio/mdm-sdk';
+import { AttributeType, NestedAttributeValue, Paging, ReferenceAttributeValue, SimpleAttributeValue, ImageAttributeValue, AttributeValue, OvDetails } from '@reltio/mdm-sdk';
 import { ReadOnlyAttributeClasses } from '../types';
 type Props = {
     values: (SimpleAttributeValue | NestedAttributeValue | ReferenceAttributeValue | string | number | ImageAttributeValue | AttributeValue)[];
@@ -10,6 +10,9 @@ type Props = {
     max?: number;
     showNonOv?: boolean;
     classes?: ReadOnlyAttributeClasses;
+    FallbackSlot?: ({ ovDetails }: {
+        ovDetails: OvDetails;
+    }) => React.ReactElement;
 };
-declare const _default: React.MemoExoticComponent<({ values, attributeType, drawLines, paging, parentUri, max: maxProp, showNonOv, classes }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ values, attributeType, drawLines, paging, parentUri, max: maxProp, showNonOv, classes, FallbackSlot }: Props) => React.JSX.Element>;
 export default _default;

package/cjs/ReadOnlyAttributesPager/ReadOnlyAttributesPager.js

@@ -60,7 +60,7 @@ var RENDERER_TYPES = {
 var ReadOnlyAttributesPager = function (_a) {
     var _b, _c, _d, _e;
     var _f;
-    var values = _a.values, attributeType = _a.attributeType, drawLines = _a.drawLines, _g = _a.paging, paging = _g === void 0 ? {} : _g, parentUri = _a.parentUri, maxProp = _a.max, showNonOv = _a.showNonOv, classes = _a.classes;
+    var values = _a.values, attributeType = _a.attributeType, drawLines = _a.drawLines, _g = _a.paging, paging = _g === void 0 ? {} : _g, parentUri = _a.parentUri, maxProp = _a.max, showNonOv = _a.showNonOv, classes = _a.classes, FallbackSlot = _a.FallbackSlot;
     var styles = (0, styles_1.useStyles)();
     var requestNextPageOfAttributeValues = (0, MdmModuleContext_1.useMdmAction)('requestNextPageOfAttributeValues');
     var maxValuesInResponse = (0, MdmModuleContext_1.useMdmMaxValuesInResponse)();
@@ -91,9 +91,9 @@ var ReadOnlyAttributesPager = function (_a) {
         ])(attributeType);
         switch (type) {
             case RENDERER_TYPES.oneLine:
-                return (react_1.default.createElement(OneLineRenderer_1.OneLineRenderer, { value: visibleValues[0], nonVisibleValues: nonVisibleValues, totalNonVisibleValues: totalNonVisibleValues, attributeType: attributeType, showNonOv: showNonOv, classes: classes }));
+                return (react_1.default.createElement(OneLineRenderer_1.OneLineRenderer, { value: visibleValues[0], nonVisibleValues: nonVisibleValues, totalNonVisibleValues: totalNonVisibleValues, attributeType: attributeType, showNonOv: showNonOv, classes: classes, FallbackSlot: FallbackSlot }));
             case RENDERER_TYPES.multiLine:
-                return (react_1.default.createElement(MultiLineRenderer_1.MultiLineRenderer, { values: visibleValues, nonVisibleValues: nonVisibleValues, totalVisibleValues: totalVisibleValues, totalNonVisibleValues: totalNonVisibleValues, attributeType: attributeType, parentUri: parentUri, max: max, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv, classes: classes }));
+                return (react_1.default.createElement(MultiLineRenderer_1.MultiLineRenderer, { values: visibleValues, nonVisibleValues: nonVisibleValues, totalVisibleValues: totalVisibleValues, totalNonVisibleValues: totalNonVisibleValues, attributeType: attributeType, parentUri: parentUri, max: max, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv, classes: classes, FallbackSlot: FallbackSlot }));
             case RENDERER_TYPES.imageLine:
                 return (react_1.default.createElement(ImageLineRenderer_1.ImageLineRenderer, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, parentUri: parentUri, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv }));
             case RENDERER_TYPES.special: