@reltio/components 1.4.2065 → 1.4.2066

package/LazyRenderer/LazyRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type Props = {
+    enabled?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const LazyRenderer: {
+    ({ enabled, ...props }: Props): React.JSX.Element;
+    notify(): void;
+};
+export {};

package/LazyRenderer/LazyRenderer.js

@@ -0,0 +1,64 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useRef, useState } from 'react';
+var CUSTOM_EVENT_NAME = 'notify_lazy_renderer';
+var DEFAULT_STYLE = { height: '20px' };
+var InternalLazyRenderer = function (_a) {
+    var children = _a.children, className = _a.className, _b = _a.style, style = _b === void 0 ? DEFAULT_STYLE : _b;
+    var _c = useState(false), isVisible = _c[0], setIsVisible = _c[1];
+    var placeholderRef = useRef(null);
+    useEffect(function () {
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            if (entry.isIntersecting) {
+                setIsVisible(true);
+                observer.disconnect();
+                window.removeEventListener(CUSTOM_EVENT_NAME, reobserve);
+            }
+        }, {
+            threshold: 0.1
+        });
+        if (placeholderRef.current) {
+            observer.observe(placeholderRef.current);
+        }
+        var reobserve = function () {
+            if (placeholderRef.current) {
+                observer.disconnect();
+                observer.observe(placeholderRef.current);
+            }
+        };
+        window.addEventListener(CUSTOM_EVENT_NAME, reobserve);
+        return function () {
+            observer.disconnect();
+            window.removeEventListener(CUSTOM_EVENT_NAME, reobserve);
+        };
+    }, []);
+    return isVisible ? React.createElement(React.Fragment, null, children) : React.createElement("div", { ref: placeholderRef, className: className, style: style });
+};
+export var LazyRenderer = function (_a) {
+    var _b = _a.enabled, enabled = _b === void 0 ? true : _b, props = __rest(_a, ["enabled"]);
+    return enabled ? React.createElement(InternalLazyRenderer, __assign({}, props)) : React.createElement(React.Fragment, null, props.children);
+};
+LazyRenderer.notify = function () {
+    window.dispatchEvent(new Event(CUSTOM_EVENT_NAME));
+};

package/LazyRenderer/index.d.ts

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

package/LazyRenderer/index.js

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

package/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.js

@@ -24,10 +24,14 @@ import React, { memo } from 'react';
 import { DataTypes } from '@reltio/mdm-sdk';
 import { ReadOnlyAttribute } from '../ReadOnlyAttributesFactory';
 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"]);
-    return (React.createElement(React.Fragment, null, (values || []).map(function (attributeValue) { return (React.createElement("div", { key: attributeValue.uri, className: valueContainerClassName },
-        React.createElement(ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))); })));
+    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))))); })));
 };
 var ReadOnlyAttributeValuesBlock = function (_a) {
     var expanded = _a.expanded, LabelRenderer = _a.LabelRenderer, RightSlot = _a.RightSlot, props = __rest(_a, ["expanded", "LabelRenderer", "RightSlot"]);

package/cjs/LazyRenderer/LazyRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+type Props = {
+    enabled?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const LazyRenderer: {
+    ({ enabled, ...props }: Props): React.JSX.Element;
+    notify(): void;
+};
+export {};

package/cjs/LazyRenderer/LazyRenderer.js

@@ -0,0 +1,91 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazyRenderer = void 0;
+var react_1 = __importStar(require("react"));
+var CUSTOM_EVENT_NAME = 'notify_lazy_renderer';
+var DEFAULT_STYLE = { height: '20px' };
+var InternalLazyRenderer = function (_a) {
+    var children = _a.children, className = _a.className, _b = _a.style, style = _b === void 0 ? DEFAULT_STYLE : _b;
+    var _c = (0, react_1.useState)(false), isVisible = _c[0], setIsVisible = _c[1];
+    var placeholderRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            if (entry.isIntersecting) {
+                setIsVisible(true);
+                observer.disconnect();
+                window.removeEventListener(CUSTOM_EVENT_NAME, reobserve);
+            }
+        }, {
+            threshold: 0.1
+        });
+        if (placeholderRef.current) {
+            observer.observe(placeholderRef.current);
+        }
+        var reobserve = function () {
+            if (placeholderRef.current) {
+                observer.disconnect();
+                observer.observe(placeholderRef.current);
+            }
+        };
+        window.addEventListener(CUSTOM_EVENT_NAME, reobserve);
+        return function () {
+            observer.disconnect();
+            window.removeEventListener(CUSTOM_EVENT_NAME, reobserve);
+        };
+    }, []);
+    return isVisible ? react_1.default.createElement(react_1.default.Fragment, null, children) : react_1.default.createElement("div", { ref: placeholderRef, className: className, style: style });
+};
+var LazyRenderer = function (_a) {
+    var _b = _a.enabled, enabled = _b === void 0 ? true : _b, props = __rest(_a, ["enabled"]);
+    return enabled ? react_1.default.createElement(InternalLazyRenderer, __assign({}, props)) : react_1.default.createElement(react_1.default.Fragment, null, props.children);
+};
+exports.LazyRenderer = LazyRenderer;
+exports.LazyRenderer.notify = function () {
+    window.dispatchEvent(new Event(CUSTOM_EVENT_NAME));
+};

package/cjs/LazyRenderer/index.d.ts

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

package/cjs/LazyRenderer/index.js

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

package/cjs/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.js

@@ -49,10 +49,14 @@ var react_1 = __importStar(require("react"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var ReadOnlyAttributesFactory_1 = require("../ReadOnlyAttributesFactory");
 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"]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, (values || []).map(function (attributeValue) { return (react_1.default.createElement("div", { key: attributeValue.uri, className: valueContainerClassName },
-        react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))); })));
+    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))))); })));
 };
 var ReadOnlyAttributeValuesBlock = function (_a) {
     var expanded = _a.expanded, LabelRenderer = _a.LabelRenderer, RightSlot = _a.RightSlot, props = __rest(_a, ["expanded", "LabelRenderer", "RightSlot"]);

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

@@ -52,6 +52,7 @@ var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
 var helpers_1 = require("./helpers");
 var ConfirmEditIgnoredDialog_1 = require("./components/ConfirmEditIgnoredDialog");
 var CommonRowCellRenderer_1 = require("./components/CommonRowCellRenderer");
+var LazyRenderer_1 = require("../../../LazyRenderer");
 var styles_1 = require("./styles");
 var DEFAULT_ROW_HEIGHT = 68;
 var getIdFromRowValue = function (rowValue) { return rowValue.ovValues.attributeType.uri; };
@@ -59,6 +60,7 @@ var getRowCellKey = function (_a) {
     var id = _a.columnData.id, cellIndex = _a.cellIndex, rowValue = _a.rowValue;
     return "".concat(id, "[").concat(getIdFromRowValue(rowValue), "][").concat(cellIndex, "]");
 };
+var debouncedNotifyLazyRenderer = (0, mdm_sdk_1.debounce)(LazyRenderer_1.LazyRenderer.notify, 0);
 var AttributesTable = function (_a) {
     var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? helpers_1.DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? ramda_1.identity : _c, _d = _a.onPin, onPin = _d === void 0 ? ramda_1.identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? ramda_1.identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? ramda_1.identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? ramda_1.identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? ramda_1.identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef;
     var styles = (0, styles_1.useStyles)();
@@ -94,6 +96,9 @@ var AttributesTable = function (_a) {
     var getRowCellHeight = (0, react_1.useCallback)((0, ramda_1.either)(getDynamicRowCellHeight, (0, ramda_1.always)(DEFAULT_ROW_HEIGHT)), [
         getDynamicRowCellHeight
     ]);
+    (0, react_1.useEffect)(function () {
+        debouncedNotifyLazyRenderer();
+    }, [getRowCellHeight]);
     var _m = (0, react_1.useState)(null), pendingDeletion = _m[0], setPendingDeletion = _m[1];
     var _o = (0, react_1.useState)(null), pendingIgnoredEditing = _o[0], setPendingIgnoredEditing = _o[1];
     var handleEdit = (0, react_1.useCallback)(function (event) {
@@ -142,7 +147,7 @@ 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, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })),
+            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/components/NestedAttributesRenderer/NestedAttributesRenderer.js

@@ -28,13 +28,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NestedAttributesRenderer = void 0;
 var react_1 = __importDefault(require("react"));
 var InlineNestedAttribute_1 = require("../../../../../InlineNestedAttribute");
+var LazyRenderer_1 = require("../../../../../LazyRenderer");
 var styles_1 = require("../../styles");
 var NestedAttributesRenderer = function (_a) {
     var attributeValues = _a.attributeValues, props = __rest(_a, ["attributeValues"]);
     var styles = (0, styles_1.useCommonStyles)();
+    var enabledLazyRendering = (attributeValues === null || attributeValues === void 0 ? void 0 : attributeValues.length) > 20;
     var nestedValues = attributeValues === null || attributeValues === void 0 ? void 0 : attributeValues.map(function (attributeValue, i) {
-        return (react_1.default.createElement("div", { key: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, className: styles.basicCell, "data-reltio-id": "value-index-".concat(i) },
-            react_1.default.createElement(InlineNestedAttribute_1.InlineNestedAttribute, __assign({ attributeValue: attributeValue }, props))));
+        return (react_1.default.createElement(LazyRenderer_1.LazyRenderer, { key: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, enabled: enabledLazyRendering, className: styles.basicCell },
+            react_1.default.createElement("div", { className: styles.basicCell, "data-reltio-id": "value-index-".concat(i) },
+                react_1.default.createElement(InlineNestedAttribute_1.InlineNestedAttribute, __assign({ attributeValue: attributeValue }, props)))));
     });
     return react_1.default.createElement(react_1.default.Fragment, null, nestedValues);
 };

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

@@ -28,13 +28,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ReferenceAttributesRenderer = void 0;
 var react_1 = __importDefault(require("react"));
 var InlineReferenceAttribute_1 = require("../../../../../InlineReferenceAttribute");
+var LazyRenderer_1 = require("../../../../../LazyRenderer");
 var styles_1 = require("../../styles");
 var ReferenceAttributesRenderer = function (_a) {
     var attributeValues = _a.attributeValues, crosswalksMap = _a.crosswalksMap, props = __rest(_a, ["attributeValues", "crosswalksMap"]);
     var styles = (0, styles_1.useCommonStyles)();
+    var enabledLazyRendering = (attributeValues === null || attributeValues === void 0 ? void 0 : attributeValues.length) > 20;
     var referenceValues = attributeValues === null || attributeValues === void 0 ? void 0 : attributeValues.map(function (attributeValue, i) {
-        return (react_1.default.createElement("div", { key: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, className: styles.basicCell, "data-reltio-id": "value-index-".concat(i) },
-            react_1.default.createElement(InlineReferenceAttribute_1.InlineReferenceAttribute, __assign({ attributeValue: attributeValue, crosswalksMap: crosswalksMap }, props))));
+        return (react_1.default.createElement(LazyRenderer_1.LazyRenderer, { key: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, enabled: enabledLazyRendering, className: styles.basicCell },
+            react_1.default.createElement("div", { className: styles.basicCell, "data-reltio-id": "value-index-".concat(i) },
+                react_1.default.createElement(InlineReferenceAttribute_1.InlineReferenceAttribute, __assign({ attributeValue: attributeValue, crosswalksMap: crosswalksMap }, props)))));
     });
     return react_1.default.createElement(react_1.default.Fragment, null, referenceValues);
 };

package/cjs/hooks/useCollaboration/useCollaboration.js

@@ -261,18 +261,16 @@ var useCollaboration = function (_a) {
     var clearCurrentComment = (0, react_1.useCallback)(function () {
         setCurrentComment(null);
     }, []);
-    var getCommentState = function (uri, commentUri) { return (0, ramda_1.pathOr)({}, [uri, commentUri], collaborationStateMap); };
-    var clearCommentState = function (uri, commentUri) {
-        return setCollaborationStateMap((0, ramda_1.dissocPath)([uri, commentUri]));
-    };
-    var updateCommentState = function (uri, commentUri, newState) {
+    var getCommentState = (0, react_1.useCallback)(function (uri, commentUri) { return (0, ramda_1.pathOr)({}, [uri, commentUri], collaborationStateMap); }, [collaborationStateMap]);
+    var clearCommentState = (0, react_1.useCallback)(function (uri, commentUri) { return setCollaborationStateMap((0, ramda_1.dissocPath)([uri, commentUri])); }, []);
+    var updateCommentState = (0, react_1.useCallback)(function (uri, commentUri, newState) {
         setCollaborationStateMap(function (prevCollaborationStateMap) {
             var pathToCommentState = [uri, commentUri];
             var prevCommentState = (0, ramda_1.path)(pathToCommentState, prevCollaborationStateMap);
             return (0, ramda_1.assocPath)(pathToCommentState, (0, ramda_1.mergeRight)(prevCommentState, newState), prevCollaborationStateMap);
         });
-    };
-    return {
+    }, []);
+    return (0, react_1.useMemo)(function () { return ({
         clearCurrentComment: clearCurrentComment,
         comments: comments,
         commentsMap: commentsMap,
@@ -295,6 +293,29 @@ var useCollaboration = function (_a) {
         sending: sending,
         deleteReply: deleteReply,
         editReply: editReply
-    };
+    }); }, [
+        clearCurrentComment,
+        comments,
+        commentsMap,
+        getCommentState,
+        updateCommentState,
+        clearCommentState,
+        createComment,
+        createReply,
+        currentComment,
+        deleteComment,
+        editComment,
+        getComment,
+        getComments,
+        getCommentsCount,
+        loading,
+        objectTypes,
+        pageToken,
+        reOpenThread,
+        resolveThread,
+        sending,
+        deleteReply,
+        editReply
+    ]);
 };
 exports.useCollaboration = useCollaboration;

package/cjs/index.d.ts

@@ -178,6 +178,7 @@ export { GaugeChart } from './GaugeChart';
 export { UpSetChart } from './UpSetChart';
 export { DateRangeSelector } from './DateRangeSelector';
 export { MetadataTypesSelector } from './MetadataTypesSelector';
+export { LazyRenderer } from './LazyRenderer';
 export { withTooltip } from './HOCs/withTooltip';
 export { withAsyncMount } from './HOCs/withAsyncMount';
 export { withDragHandle } from './HOCs/withDragHandle';

package/cjs/index.js

@@ -17,10 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NestedAttributeEditor = exports.NestedAttribute = exports.MoreAttributesButton = exports.InlineReferenceAttribute = exports.InlineNestedAttribute = exports.InlineImageAttribute = exports.InlineAttributesPager = exports.InfoIcon = exports.EditableImageAttributesLine = exports.FilterButton = exports.FacetViewHeader = exports.ExpandedValueTooltip = exports.EntitySelector = exports.EntityCreator = exports.AttributesPager = exports.AttributesList = exports.EditableAttribute = exports.DropDownMenuButton = exports.DescriptionIcon = exports.DefaultCellValueRenderer = exports.ControlAttributeIcon = exports.ColumnsSettingsPopup = exports.ColumnsSettings = exports.ColorBar = exports.CollapseRowButton = exports.BasicChartsFactory = exports.ChartsFactory = exports.CardinalityMessage = exports.BranchDecorator = exports.BasicViewHeader = exports.BasicViewContent = exports.BasicView = exports.BasicTablePagination = exports.basicTableViewState = exports.BasicTable = exports.BasicAttributeSelector = exports.BarChart = exports.AvatarWithFallback = exports.AutoSizeList = exports.AttributesView = exports.AttributesValuesEditor = exports.AttributesFiltersButton = exports.AttributesFiltersBuilder = exports.AttributesFilterSelector = exports.AttributesErrorsPanel = exports.AttributeListItem = exports.AttributeGroupIcon = exports.ArrowExpandButton = exports.ActionsPanel = exports.ActionButton = void 0;
 exports.ConnectionEditor = exports.DropDownSelector = exports.ReactSelectOptionWithCheckIcon = exports.ReactSelectMenuWithPopper = exports.ReactSelectMenuList = exports.ReactSelectLoadMoreButton = exports.ReactSelectDropdownIndicatorWithIconButton = exports.ReactSelectDropdownIndicator = exports.Highlighter = exports.HierarchyNodeTitle = exports.HierarchicalAttributeTooltip = exports.HideOnShrink = exports.ExpandableSearchInput = exports.ErrorPopup = exports.ErrorBoundary = exports.EntityUriLink = exports.EntityTypesSelector = exports.EntityTypeIcon = exports.EntityTypeBadge = exports.EntityAvatar = exports.EMPTY_STATE_VARIANTS = exports.EMPTY_STATE_ICONS = exports.EmptyState = exports.Drawer = exports.DataTypeValue = exports.DataTenantBadge = exports.ConnectionRelationTypeSelector = exports.CollaborationItem = exports.ConfirmationDialog = exports.CommentsContainer = exports.ColoredSourceIcon = exports.CollapseButton = exports.TreeChart = exports.TableWithBars = exports.SourceIcon = exports.SmallIconButtonWithTooltip = exports.SmallIconButton = exports.SimpleAttributeEditor = exports.SimpleAttribute = exports.RowCellAutoSizer = exports.RelationTypeSelector = exports.ReferenceAttributeEditor = exports.ReferenceAttribute = exports.ImageAttributesLine = exports.ReadOnlyAttributesPager = exports.ReadOnlyAttributesList = exports.ReadOnlyAttribute = exports.ReadOnlyAttributeValuesBlock = exports.PieChart = exports.OvIcon = void 0;
 exports.Popper = exports.MultipleInput = exports.ModeSwitcherSelect = exports.ModeSwitcher = exports.TransitiveMatchBlock = exports.SimpleMatchRulesBuilder = exports.SimpleMatchRulesBlock = exports.SimpleMatchRules = exports.MatchRulesBlock = exports.LoadingSpinner = exports.Link = exports.LinearLoadIndicator = exports.ImportButton = exports.ReadableSearchQueryBuilder = exports.ReadableSearchQuery = exports.LogicOperator = exports.TableSkeleton = exports.StepNavigation = exports.TenantLabel = exports.RelevanceScoreBadge = exports.RequiredMark = exports.SettingsMenu = exports.TenantsDropDownSelector = exports.TenantIcon = exports.SourceSystemsSelector = exports.MatchRulesSelector = exports.MultiValueSelector = exports.ProfilesList = exports.NotMatchButton = exports.MergeButton = exports.ProfileMatchCard = exports.ImageGalleryDialog = exports.RelationTypesSelector = exports.ScreenProfileBand = exports.ProfileBandNavigation = exports.EmptyStub = exports.MaskingSwitcher = exports.FileTypeEditor = exports.EmptySearchResult = exports.DropDownEditor = exports.FilterValueEditor = exports.MultiValueChip = exports.TextEditor = exports.DateRangeEditor = exports.NumberEditor = exports.DataTypeValueEditor = exports.DateEditor = exports.ErrorWrapper = exports.ErrorMessage = exports.ConfigureColumnsPopup = void 0;
-exports.HistoryDiffContext = exports.AsyncMountContext = exports.MdmModuleProvider = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.withContext = exports.withDateRangeSelector = exports.withDragHandle = exports.withAsyncMount = exports.withTooltip = exports.MetadataTypesSelector = exports.DateRangeSelector = exports.UpSetChart = exports.GaugeChart = exports.RelationEditor = exports.ReltioMap = exports.Marginator = exports.LightArrowTooltip = exports.ScrollableTabs = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopup = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.RCTreeSwitchRenderer = exports.RCTreeLevelLines = exports.RCTree = exports.reactSortableTreeHelpers = exports.ReactSortableTree = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = void 0;
-exports.ReloadDataProvider = exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.InitialCollaborationContextValue = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.PopupBoundariesContext = void 0;
-exports.useMaskedAttribute = exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = exports.ThemeProvider = exports.ProfileTablesContext = exports.HiddenAttributesContext = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useDeleteUnmaskedAttributeForRelation = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = exports.MaskedAttributesProvider = exports.useReloadData = void 0;
-exports.mockComputedStyles = exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.getAttributeSelectorItems = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useDndBasicTableScrollModifier = exports.useDynamicYAxisWidth = exports.useFilterAutoFocus = exports.useSegmentationRequest = exports.resolveMarkers = exports.useMarkers = void 0;
+exports.AsyncMountContext = exports.MdmModuleProvider = exports.withTableContext = exports.withFilterAtBottom = exports.withPercents = exports.withContext = exports.withDateRangeSelector = exports.withDragHandle = exports.withAsyncMount = exports.withTooltip = exports.LazyRenderer = exports.MetadataTypesSelector = exports.DateRangeSelector = exports.UpSetChart = exports.GaugeChart = exports.RelationEditor = exports.ReltioMap = exports.Marginator = exports.LightArrowTooltip = exports.ScrollableTabs = exports.VirtualGroupedList = exports.ViewMoreToggle = exports.VerticalHeadingsTable = exports.VerticalDivider = exports.AttributeTitle = exports.Spacer = exports.SimpleDropDownSelector = exports.SidePanelContentHeader = exports.SidePanel = exports.SidePanelEmptyState = exports.SideButtonsPanel = exports.SelectorWithOnlyOptionAutoSelect = exports.SelectionPopup = exports.WhiteSearchInput = exports.SearchInput = exports.ProfileResizablePanes = exports.ResizablePanes = exports.ReltioGridLayout = exports.RCTreeSwitchRenderer = exports.RCTreeLevelLines = exports.RCTree = exports.reactSortableTreeHelpers = exports.ReactSortableTree = exports.MultiSelect = exports.QueryBuilderRowsGroup = exports.QueryBuilderRow = exports.ProfileCard = exports.ProfileBand = exports.PotentialMatchReviewCard = exports.PopupWithArrow = void 0;
+exports.useAttributeValueConfigPermissions = exports.ConfigPermissionsContextProvider = exports.ConfigPermissionsContext = exports.useActionsHook = exports.ActionsHookProvider = exports.PageRequestsAbortingContext = exports.DependentLookupAutopopulationContext = exports.FeaturesContext = exports.LabelsContext = exports.UrlGeneratorsContext = exports.isHighlightedAttributeType = exports.isHighlightedErrorType = exports.ScrollType = exports.ScrollToElementProvider = exports.ScrollToElementContext = exports.SearchValueContext = exports.InterceptHandlersContext = exports.HighlightedValuesContext = exports.SnackbarContext = exports.SearchFiltersContext = exports.useReloadFacet = exports.ReloadFacetProvider = exports.useReloadAllFacets = exports.SandboxAPIContext = exports.EntityContext = exports.RelatedObjectUrisContext = exports.WorkflowTasksContext = exports.useEntityLoadingIndication = exports.EntityLoadingIndicationProvider = exports.EntityMarkerContext = exports.useAttributeExpanded = exports.ExpandedAttributesProvider = exports.useHighlightedCrosswalks = exports.useCrosswalkHighlight = exports.useCrosswalkFocus = exports.useCrosswalkColor = exports.CrosswalksDisplayProvider = exports.EntitiesMapContext = exports.IdContext = exports.ProfilePerspectiveViewContext = exports.usePerspectivesSettings = exports.PerspectivesSettingsContext = exports.PivotingAttributeContext = exports.UsersContext = exports.InitialCollaborationContextValue = exports.CollaborationContextProvider = exports.CollaborationContext = exports.BlockImageGalleryDialogContext = exports.PopupBoundariesContext = exports.HistoryDiffContext = void 0;
+exports.useKeyboardNavigation = exports.useDynamicRowCellHeight = exports.useClickableStyle = exports.BasicTableCellRenderer = exports.useBasicTableCellRenderer = exports.useHiddenAttributes = exports.useSavedSearchesRequest = exports.useRequestDCRReview = exports.useAutoFocus = exports.useExpandInvalidRelations = exports.useLayoutResetter = exports.useIsMountedRef = exports.useSnackbar = exports.useSavedStateForEntityType = exports.useReadableSearchState = exports.useEditableConnection = exports.useCustomScripts = exports.useMarkAsNotMatchRequest = exports.useMergeAllRequest = exports.usePagingSimulator = exports.useMatchesLoader = exports.useConfigPermissions = exports.useWhyDidYouUpdate = exports.useUsers = exports.useSavedState = exports.useSafePromise = exports.useRunOnceAfterValueInitialization = exports.useRelationsLoader = exports.useRelationTypeSelector = exports.usePrevious = exports.useDidUpdateEffect = exports.useCommentsEntitiesMap = exports.useCollaboration = exports.useAsyncMount = exports.useAPI = exports.useActions = exports.useMatchesColumnsData = exports.useScrollToAttributeError = exports.ThemeProvider = exports.ProfileTablesContext = exports.HiddenAttributesContext = exports.BasicTableContext = exports.BasicTableRowCollapseContext = exports.useDeleteUnmaskedAttributeForRelation = exports.useUnmaskedAttributeValue = exports.useUnmaskAttributeValue = exports.useMaskAttributeValue = exports.MaskedAttributesProvider = exports.useReloadData = exports.ReloadDataProvider = void 0;
+exports.mockComputedStyles = exports.FakeMouseEvent = exports.rerenderWrapper = exports.mockElementSizes = exports.fixClicksOnResizablePanes = exports.mockBasicTableSizing = exports.getMuiIconsByName = exports.getMuiIconByName = exports.deepFreeze = exports.awaitMockPromises = exports.TestStylesProvider = exports.TestPerspectivesSettingsProvider = exports.getAttributeSelectorItems = exports.mergeClasses = exports.isControlOrCommandPressed = exports.getValue = exports.getChecked = exports.showErrorMessage = exports.showDefaultErrorMessage = exports.enrichDataWithPercents = exports.defaultRenderRowCell = exports.defaultGetRowCellHeight = exports.columnFilterToMdmFilter = exports.buildColumnsSizeById = exports.buildColumnsFilter = exports.useDndBasicTableScrollModifier = exports.useDynamicYAxisWidth = exports.useFilterAutoFocus = exports.useSegmentationRequest = exports.resolveMarkers = exports.useMarkers = exports.useMaskedAttribute = void 0;
 // components
 var ActionButton_1 = require("./ActionButton");
 Object.defineProperty(exports, "ActionButton", { enumerable: true, get: function () { return ActionButton_1.ActionButton; } });
@@ -391,6 +391,8 @@ var DateRangeSelector_1 = require("./DateRangeSelector");
 Object.defineProperty(exports, "DateRangeSelector", { enumerable: true, get: function () { return DateRangeSelector_1.DateRangeSelector; } });
 var MetadataTypesSelector_1 = require("./MetadataTypesSelector");
 Object.defineProperty(exports, "MetadataTypesSelector", { enumerable: true, get: function () { return MetadataTypesSelector_1.MetadataTypesSelector; } });
+var LazyRenderer_1 = require("./LazyRenderer");
+Object.defineProperty(exports, "LazyRenderer", { enumerable: true, get: function () { return LazyRenderer_1.LazyRenderer; } });
 // HOCs
 var withTooltip_1 = require("./HOCs/withTooltip");
 Object.defineProperty(exports, "withTooltip", { enumerable: true, get: function () { return withTooltip_1.withTooltip; } });

package/features/crosswalks/AttributesTable/AttributesTable.js

@@ -13,7 +13,7 @@ import React, { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import classnames from 'classnames';
 import i18n from 'ui-i18n';
 import { always, either, filter, isNil, keys, map, pipe, without, identity, both, move } from 'ramda';
-import { findAttributeTypeByUri, isReadableAttribute, makeAttrTypeUri } from '@reltio/mdm-sdk';
+import { debounce, findAttributeTypeByUri, isReadableAttribute, makeAttrTypeUri } from '@reltio/mdm-sdk';
 import { BasicTable } from '../../../BasicTable';
 import { ColumnsSettings } from '../../../ColumnsSettings';
 import { useDynamicRowCellHeight } from '../../../hooks/useDynamicRowCellHeight';
@@ -24,6 +24,7 @@ import { useMdmMetadata } from '../../../contexts/MdmModuleContext';
 import { COLUMNS_DATA, DEFAULT_VISIBLE_COLUMNS, getBasicTableColumnsData, getBasicTableRowsData } from './helpers';
 import { ConfirmEditIgnoredDialog } from './components/ConfirmEditIgnoredDialog';
 import { CommonRowCellRenderer } from './components/CommonRowCellRenderer';
+import { LazyRenderer } from '../../../LazyRenderer';
 import { useStyles } from './styles';
 var DEFAULT_ROW_HEIGHT = 68;
 var getIdFromRowValue = function (rowValue) { return rowValue.ovValues.attributeType.uri; };
@@ -31,6 +32,7 @@ var getRowCellKey = function (_a) {
     var id = _a.columnData.id, cellIndex = _a.cellIndex, rowValue = _a.rowValue;
     return "".concat(id, "[").concat(getIdFromRowValue(rowValue), "][").concat(cellIndex, "]");
 };
+var debouncedNotifyLazyRenderer = debounce(LazyRenderer.notify, 0);
 var AttributesTable = function (_a) {
     var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? identity : _c, _d = _a.onPin, onPin = _d === void 0 ? identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef;
     var styles = useStyles();
@@ -66,6 +68,9 @@ var AttributesTable = function (_a) {
     var getRowCellHeight = useCallback(either(getDynamicRowCellHeight, always(DEFAULT_ROW_HEIGHT)), [
         getDynamicRowCellHeight
     ]);
+    useEffect(function () {
+        debouncedNotifyLazyRenderer();
+    }, [getRowCellHeight]);
     var _m = useState(null), pendingDeletion = _m[0], setPendingDeletion = _m[1];
     var _o = useState(null), pendingIgnoredEditing = _o[0], setPendingIgnoredEditing = _o[1];
     var handleEdit = useCallback(function (event) {
@@ -114,7 +119,7 @@ var AttributesTable = function (_a) {
             React.createElement(ColumnsSettings, { columnsData: COLUMNS_DATA, selectedColumns: visibleColumns, onChangeColumns: onChangeVisibleColumns })),
         React.createElement("div", { className: styles.tableContent },
             isLoading && React.createElement(LinearLoadIndicator, null),
-            React.createElement(BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })),
+            React.createElement(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.createElement(ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
         React.createElement(ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
                 if (pendingIgnoredEditing)

package/features/crosswalks/AttributesTable/components/NestedAttributesRenderer/NestedAttributesRenderer.js

@@ -22,13 +22,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { InlineNestedAttribute } from '../../../../../InlineNestedAttribute';
+import { LazyRenderer } from '../../../../../LazyRenderer';
 import { useCommonStyles } from '../../styles';
 export var NestedAttributesRenderer = function (_a) {
     var attributeValues = _a.attributeValues, props = __rest(_a, ["attributeValues"]);
     var styles = useCommonStyles();
+    var enabledLazyRendering = (attributeValues === null || attributeValues === void 0 ? void 0 : attributeValues.length) > 20;
     var nestedValues = attributeValues === null || attributeValues === void 0 ? void 0 : attributeValues.map(function (attributeValue, i) {
-        return (React.createElement("div", { key: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, className: styles.basicCell, "data-reltio-id": "value-index-".concat(i) },
-            React.createElement(InlineNestedAttribute, __assign({ attributeValue: attributeValue }, props))));
+        return (React.createElement(LazyRenderer, { key: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, enabled: enabledLazyRendering, className: styles.basicCell },
+            React.createElement("div", { className: styles.basicCell, "data-reltio-id": "value-index-".concat(i) },
+                React.createElement(InlineNestedAttribute, __assign({ attributeValue: attributeValue }, props)))));
     });
     return React.createElement(React.Fragment, null, nestedValues);
 };

package/features/crosswalks/AttributesTable/components/ReferenceAttributesRenderer/ReferenceAttributesRenderer.js

@@ -22,13 +22,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import React from 'react';
 import { InlineReferenceAttribute } from '../../../../../InlineReferenceAttribute';
+import { LazyRenderer } from '../../../../../LazyRenderer';
 import { useCommonStyles } from '../../styles';
 export var ReferenceAttributesRenderer = function (_a) {
     var attributeValues = _a.attributeValues, crosswalksMap = _a.crosswalksMap, props = __rest(_a, ["attributeValues", "crosswalksMap"]);
     var styles = useCommonStyles();
+    var enabledLazyRendering = (attributeValues === null || attributeValues === void 0 ? void 0 : attributeValues.length) > 20;
     var referenceValues = attributeValues === null || attributeValues === void 0 ? void 0 : attributeValues.map(function (attributeValue, i) {
-        return (React.createElement("div", { key: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, className: styles.basicCell, "data-reltio-id": "value-index-".concat(i) },
-            React.createElement(InlineReferenceAttribute, __assign({ attributeValue: attributeValue, crosswalksMap: crosswalksMap }, props))));
+        return (React.createElement(LazyRenderer, { key: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.uri, enabled: enabledLazyRendering, className: styles.basicCell },
+            React.createElement("div", { className: styles.basicCell, "data-reltio-id": "value-index-".concat(i) },
+                React.createElement(InlineReferenceAttribute, __assign({ attributeValue: attributeValue, crosswalksMap: crosswalksMap }, props)))));
     });
     return React.createElement(React.Fragment, null, referenceValues);
 };

package/hooks/useCollaboration/useCollaboration.js

@@ -18,7 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState, useMemo } from 'react';
 import { andThen, fromPairs, map, otherwise, pipe, props, uniqBy, prop, propEq, when, always, assocPath, dissocPath, path, pathOr, mergeRight } from 'ramda';
 import { createComment as createCommentRequest, createReply as createReplyRequest, getComment as getCommentRequest, getCommentsCount as getCommentsCountRequest, updateComment as updateCommentRequest, updateReply as updateReplyRequest, deleteComment as deleteCommentRequest, deleteReply as deleteReplyRequest, getComments as getCommentsRequest, isTempUri } from '@reltio/mdm-sdk';
 import { useMdmCollaborationPath, useMdmEntity, useMdmIsCollaborationEnabled, useMdmTenant } from '../../contexts/MdmModuleContext';
@@ -258,18 +258,16 @@ export var useCollaboration = function (_a) {
     var clearCurrentComment = useCallback(function () {
         setCurrentComment(null);
     }, []);
-    var getCommentState = function (uri, commentUri) { return pathOr({}, [uri, commentUri], collaborationStateMap); };
-    var clearCommentState = function (uri, commentUri) {
-        return setCollaborationStateMap(dissocPath([uri, commentUri]));
-    };
-    var updateCommentState = function (uri, commentUri, newState) {
+    var getCommentState = useCallback(function (uri, commentUri) { return pathOr({}, [uri, commentUri], collaborationStateMap); }, [collaborationStateMap]);
+    var clearCommentState = useCallback(function (uri, commentUri) { return setCollaborationStateMap(dissocPath([uri, commentUri])); }, []);
+    var updateCommentState = useCallback(function (uri, commentUri, newState) {
         setCollaborationStateMap(function (prevCollaborationStateMap) {
             var pathToCommentState = [uri, commentUri];
             var prevCommentState = path(pathToCommentState, prevCollaborationStateMap);
             return assocPath(pathToCommentState, mergeRight(prevCommentState, newState), prevCollaborationStateMap);
         });
-    };
-    return {
+    }, []);
+    return useMemo(function () { return ({
         clearCurrentComment: clearCurrentComment,
         comments: comments,
         commentsMap: commentsMap,
@@ -292,5 +290,28 @@ export var useCollaboration = function (_a) {
         sending: sending,
         deleteReply: deleteReply,
         editReply: editReply
-    };
+    }); }, [
+        clearCurrentComment,
+        comments,
+        commentsMap,
+        getCommentState,
+        updateCommentState,
+        clearCommentState,
+        createComment,
+        createReply,
+        currentComment,
+        deleteComment,
+        editComment,
+        getComment,
+        getComments,
+        getCommentsCount,
+        loading,
+        objectTypes,
+        pageToken,
+        reOpenThread,
+        resolveThread,
+        sending,
+        deleteReply,
+        editReply
+    ]);
 };

package/index.d.ts

@@ -178,6 +178,7 @@ export { GaugeChart } from './GaugeChart';
 export { UpSetChart } from './UpSetChart';
 export { DateRangeSelector } from './DateRangeSelector';
 export { MetadataTypesSelector } from './MetadataTypesSelector';
+export { LazyRenderer } from './LazyRenderer';
 export { withTooltip } from './HOCs/withTooltip';
 export { withAsyncMount } from './HOCs/withAsyncMount';
 export { withDragHandle } from './HOCs/withDragHandle';

package/index.js

@@ -179,6 +179,7 @@ export { GaugeChart } from './GaugeChart';
 export { UpSetChart } from './UpSetChart';
 export { DateRangeSelector } from './DateRangeSelector';
 export { MetadataTypesSelector } from './MetadataTypesSelector';
+export { LazyRenderer } from './LazyRenderer';
 // HOCs
 export { withTooltip } from './HOCs/withTooltip';
 export { withAsyncMount } from './HOCs/withAsyncMount';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2065",
+  "version": "1.4.2066",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",