@reltio/components 1.4.1944 → 1.4.1946

package/esm/MultipleInput/MultipleInput.test.js

@@ -96,7 +96,7 @@ describe('MultipleInput behaviour', function () {
                     return [4 /*yield*/, user.click(getMuiIconByName('Cancel', chips[1]))];
                 case 1:
                     _a.sent();
-                    expect(props.onChange).toBeCalledWith(['1', '3']);
+                    expect(props.onChange).toHaveBeenCalledWith(['1', '3']);
                     return [2 /*return*/];
             }
         });
@@ -111,7 +111,7 @@ describe('MultipleInput behaviour', function () {
                     return [4 /*yield*/, user.type(screen.getByRole('textbox'), '4{Enter}')];
                 case 1:
                     _a.sent();
-                    expect(props.onChange).toBeCalledWith(['1', '2', '3', '4']);
+                    expect(props.onChange).toHaveBeenCalledWith(['1', '2', '3', '4']);
                     return [2 /*return*/];
             }
         });
@@ -129,7 +129,7 @@ describe('MultipleInput behaviour', function () {
                     return [4 /*yield*/, user.click(container)];
                 case 2:
                     _b.sent();
-                    expect(props.onChange).toBeCalledWith(['1', '2', '3', '4']);
+                    expect(props.onChange).toHaveBeenCalledWith(['1', '2', '3', '4']);
                     return [2 /*return*/];
             }
         });
@@ -144,7 +144,7 @@ describe('MultipleInput behaviour', function () {
                     return [4 /*yield*/, user.type(screen.getByRole('textbox'), '{Backspace}')];
                 case 1:
                     _a.sent();
-                    expect(props.onChange).toBeCalledWith(['1', '2']);
+                    expect(props.onChange).toHaveBeenCalledWith(['1', '2']);
                     return [2 /*return*/];
             }
         });
@@ -159,7 +159,7 @@ describe('MultipleInput behaviour', function () {
                     return [4 /*yield*/, user.type(screen.getByRole('textbox'), '{Tab}')];
                 case 1:
                     _a.sent();
-                    expect(props.onChange).not.toBeCalled();
+                    expect(props.onChange).not.toHaveBeenCalled();
                     return [2 /*return*/];
             }
         });
@@ -174,7 +174,7 @@ describe('MultipleInput behaviour', function () {
                     return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'test{Backspace}')];
                 case 1:
                     _a.sent();
-                    expect(props.onChange).not.toBeCalled();
+                    expect(props.onChange).not.toHaveBeenCalled();
                     return [2 /*return*/];
             }
         });
@@ -189,7 +189,7 @@ describe('MultipleInput behaviour', function () {
                     return [4 /*yield*/, user.type(screen.getByRole('textbox'), '{Backspace}')];
                 case 1:
                     _a.sent();
-                    expect(props.onChange).not.toBeCalled();
+                    expect(props.onChange).not.toHaveBeenCalled();
                     return [2 /*return*/];
             }
         });
@@ -204,7 +204,7 @@ describe('MultipleInput behaviour', function () {
                     return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'test{Enter}')];
                 case 1:
                     _a.sent();
-                    expect(props.onChange).toBeCalledWith(['test']);
+                    expect(props.onChange).toHaveBeenCalledWith(['test']);
                     return [2 /*return*/];
             }
         });
@@ -220,7 +220,7 @@ describe('MultipleInput behaviour', function () {
                     return [4 /*yield*/, user.type(screen.getByRole('textbox'), 'test 2{Enter}')];
                 case 1:
                     _a.sent();
-                    expect(props.onChange).toBeCalledWith(['test 1', 'test 2']);
+                    expect(props.onChange).toHaveBeenCalledWith(['test 1', 'test 2']);
                     return [2 /*return*/];
             }
         });
@@ -237,11 +237,11 @@ describe('MultipleInput behaviour', function () {
                     return [4 /*yield*/, user.type(screen.getByRole('textbox'), '{Enter}')];
                 case 1:
                     _a.sent();
-                    expect(onChange).not.toBeCalled();
+                    expect(onChange).not.toHaveBeenCalled();
                     return [4 /*yield*/, user.type(screen.getByRole('textbox'), '     {Enter}')];
                 case 2:
                     _a.sent();
-                    expect(onChange).not.toBeCalled();
+                    expect(onChange).not.toHaveBeenCalled();
                     return [2 /*return*/];
             }
         });

package/esm/MultipliableSelect/MultipliableSelect.test.js

@@ -1,28 +1,32 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import TextField from '@mui/material/TextField';
+import MenuItem from '@mui/material/MenuItem';
 import { ValueChip } from '../ValueChip';
 import { MultipliableSelect } from './MultipliableSelect';
 describe('MultipliableSelect', function () {
     describe('single mode', function () {
         it('should render MUI TextField with string value', function () {
             var value = '1';
-            var wrapper = mount(React.createElement(MultipliableSelect, { value: value }));
+            var wrapper = mount(React.createElement(MultipliableSelect, { value: value },
+                React.createElement(MenuItem, { value: "1" })));
             expect(wrapper.find(TextField)).toHaveLength(1);
             expect(wrapper.text()).toBe(value);
         });
         it('should call props.onChange on select change', function () {
             var onChange = jest.fn();
             var value = '1';
-            var wrapper = shallow(React.createElement(MultipliableSelect, { onChange: onChange }));
+            var wrapper = shallow(React.createElement(MultipliableSelect, { onChange: onChange },
+                React.createElement("div", null)));
             wrapper.find(TextField).simulate('change', { target: { value: value } });
-            expect(onChange).toBeCalledWith(value);
+            expect(onChange).toHaveBeenCalledWith(value);
         });
     });
     describe('multiple mode', function () {
         it('should render MUI TextField with chip values', function () {
             var value = ['1', '2', '3'];
-            var wrapper = mount(React.createElement(MultipliableSelect, { multiple: true, value: value }));
+            var wrapper = mount(React.createElement(MultipliableSelect, { multiple: true, value: value },
+                React.createElement("div", null)));
             expect(wrapper.find(TextField).prop('SelectProps').multiple).toBe(true);
             expect(wrapper.find(ValueChip)).toHaveLength(value.length);
             wrapper.find(ValueChip).forEach(function (n, i) {
@@ -32,16 +36,18 @@ describe('MultipliableSelect', function () {
         it('should call props.onChange on select change', function () {
             var onChange = jest.fn();
             var value = ['1'];
-            var wrapper = shallow(React.createElement(MultipliableSelect, { multiple: true, onChange: onChange }));
+            var wrapper = shallow(React.createElement(MultipliableSelect, { multiple: true, onChange: onChange },
+                React.createElement("div", null)));
             wrapper.find(TextField).simulate('change', { target: { value: value } });
-            expect(onChange).toBeCalledWith(value);
+            expect(onChange).toHaveBeenCalledWith(value);
         });
         it('should call props.onChange on Chip deletion', function () {
             var value = ['1', '2', '3'];
             var onChange = jest.fn();
-            var wrapper = mount(React.createElement(MultipliableSelect, { multiple: true, value: value, onChange: onChange }));
+            var wrapper = mount(React.createElement(MultipliableSelect, { multiple: true, value: value, onChange: onChange },
+                React.createElement("div", null)));
             wrapper.find(ValueChip).at(1).prop('onDelete')();
-            expect(onChange).toBeCalledWith(['1', '3']);
+            expect(onChange).toHaveBeenCalledWith(['1', '3']);
         });
     });
 });

package/esm/NestedAttributeEditor/NestedAttributeEditor.test.js

@@ -11,10 +11,10 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from 'react';
 import { shallow } from 'enzyme';
-import * as mdmSdk from '@reltio/mdm-sdk';
 import { NestedAttributeEditor } from './NestedAttributeEditor';
 import { EditModeComplexAttribute } from '../EditModeComplexAttribute';
-jest.mock('@reltio/mdm-sdk');
+import { evaluateDeepEntityLabel, getLabel } from '@reltio/mdm-sdk';
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { evaluateDeepEntityLabel: jest.fn(), getLabel: jest.fn() })); });
 describe('NestedAttributeEditor', function () {
     it('should render EditModeComplexAttribute with specified label and attributes', function () {
         var props = {
@@ -25,8 +25,8 @@ describe('NestedAttributeEditor', function () {
             attributeValue: {}
         };
         var label = 'Label123';
-        jest.spyOn(mdmSdk, 'evaluateDeepEntityLabel').mockReturnValue(label);
-        jest.spyOn(mdmSdk, 'getLabel').mockReturnValue(label);
+        evaluateDeepEntityLabel.mockReturnValue(label);
+        getLabel.mockReturnValue(label);
         var component = shallow(React.createElement(NestedAttributeEditor, __assign({}, props)));
         var complex = component.find(EditModeComplexAttribute);
         expect(complex.length).toBe(1);

package/esm/NumberEditor/NumberEditor.test.js

@@ -98,7 +98,7 @@ describe('NumberEditor', function () {
                         return [4 /*yield*/, user.type(screen.getByRole('textbox'), '<-123,456abc_78>{enter}')];
                     case 1:
                         _a.sent();
-                        expect(defaultProps.onChange).toBeCalledWith('-123456.78');
+                        expect(defaultProps.onChange).toHaveBeenCalledWith('-123456.78');
                         return [2 /*return*/];
                 }
             });
@@ -116,7 +116,7 @@ describe('NumberEditor', function () {
                         return [4 /*yield*/, user.type(screen.getByRole('textbox'), '{enter}')];
                     case 1:
                         _a.sent();
-                        expect(defaultProps.onChange).toBeCalledWith('123');
+                        expect(defaultProps.onChange).toHaveBeenCalledWith('123');
                         return [2 /*return*/];
                 }
             });
@@ -155,7 +155,7 @@ describe('NumberEditor', function () {
                         return [4 /*yield*/, user.type(screen.getByRole('textbox'), '<-123,456abc_78>{enter}')];
                     case 1:
                         _a.sent();
-                        expect(defaultProps.onChange).toBeCalledWith(['-123456.78']);
+                        expect(defaultProps.onChange).toHaveBeenCalledWith(['-123456.78']);
                         return [2 /*return*/];
                 }
             });
@@ -173,7 +173,7 @@ describe('NumberEditor', function () {
                         return [4 /*yield*/, user.type(screen.getByRole('textbox'), '123.45{enter}')];
                     case 1:
                         _a.sent();
-                        expect(defaultProps.onChange).toBeCalledWith(['12345']);
+                        expect(defaultProps.onChange).toHaveBeenCalledWith(['12345']);
                         return [2 /*return*/];
                 }
             });

package/esm/PieChart/PieChart.test.js

@@ -90,7 +90,7 @@ describe('PieChart', function () {
         var wrapper = mount(React.createElement(PieChart, { width: 600, height: 300, data: data, onItemClick: onItemClick }));
         var sector = wrapper.find('.recharts-pie-sector').first();
         sector.simulate('click');
-        expect(onItemClick).toBeCalledWith('1');
+        expect(onItemClick).toHaveBeenCalledWith('1');
     });
     it('should render chart legend with percents correctly', function () {
         var legendPayload = [

package/esm/PivotingTooltip/IntegrationPivotingTooltip.test.js

@@ -46,7 +46,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import React from 'react';
-import * as mdmSdkModule from '@reltio/mdm-sdk';
+import { getFilteredEntities, getTotals } from '@reltio/mdm-sdk';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MdmModuleProvider } from '../contexts/MdmModuleContext';
@@ -138,10 +138,10 @@ describe('PivotingTooltip test', function () {
         lookupCode: '8-800-555-35-35',
         lookupRawValue: '8-800-555-35-35'
     };
-    var mockGetFilteredEntities = jest
-        .spyOn(mdmSdkModule, 'getFilteredEntities')
-        .mockResolvedValue(mockGetFilteredEntitiesResponse);
-    var mockGetTotals = jest.spyOn(mdmSdkModule, 'getTotals').mockResolvedValue({ total: 5 });
+    beforeEach(function () {
+        getFilteredEntities.mockResolvedValue(mockGetFilteredEntitiesResponse);
+        getTotals.mockResolvedValue({ total: 5 });
+    });
     it('getTotals should not be called if user do not hover tooltip', function () { return __awaiter(void 0, void 0, void 0, function () {
         var value, attributeType, props, tooltip;
         return __generator(this, function (_a) {
@@ -159,8 +159,8 @@ describe('PivotingTooltip test', function () {
                 case 1:
                     tooltip = _a.sent();
                     expect(tooltip).toBeInTheDocument();
-                    expect(mockGetTotals).toHaveBeenCalledTimes(0);
-                    expect(mockGetFilteredEntities).toHaveBeenCalledTimes(0);
+                    expect(getTotals).toHaveBeenCalledTimes(0);
+                    expect(getFilteredEntities).toHaveBeenCalledTimes(0);
                     return [2 /*return*/];
             }
         });
@@ -192,7 +192,7 @@ describe('PivotingTooltip test', function () {
                 case 4:
                     tooltipContent = _a.sent();
                     expect(tooltipContent).toBeInTheDocument();
-                    expect(mockGetFilteredEntities).toBeCalledWith({
+                    expect(getFilteredEntities).toHaveBeenCalledWith({
                         filters: [
                             { fieldName: 'type', filter: 'equals', values: ['configuration/entityTypes/HCP'] },
                             { fieldName: 'attributes.Phone', filter: 'equals', values: ['8-800-555-35-35'] }
@@ -242,7 +242,7 @@ describe('PivotingTooltip test', function () {
                 case 4:
                     tooltipContent = _a.sent();
                     expect(tooltipContent).toBeInTheDocument();
-                    expect(mockGetFilteredEntities).toBeCalledWith({
+                    expect(getFilteredEntities).toHaveBeenCalledWith({
                         filters: [
                             { fieldName: 'type', filter: 'equals', values: ['configuration/entityTypes/HCP_1'] },
                             { fieldName: 'attributes.Phone', filter: 'equals', values: ['8-800-555-35-35'] }
@@ -286,7 +286,7 @@ describe('PivotingTooltip test', function () {
                 case 4:
                     tooltipContent = _a.sent();
                     expect(tooltipContent).toBeInTheDocument();
-                    expect(mockGetTotals).toBeCalledWith({
+                    expect(getTotals).toHaveBeenCalledWith({
                         filters: [
                             { fieldName: 'type', filter: 'equals', values: ['configuration/entityTypes/HCP'] },
                             { fieldName: 'attributes.Phone', filter: 'equals', values: ['8-800-555-35-35'] }
@@ -336,7 +336,7 @@ describe('PivotingTooltip test', function () {
                 case 4:
                     tooltipContent = _a.sent();
                     expect(tooltipContent).toBeInTheDocument();
-                    expect(mockGetTotals).toBeCalledWith({
+                    expect(getTotals).toHaveBeenCalledWith({
                         filters: [
                             { fieldName: 'type', filter: 'equals', values: ['configuration/entityTypes/HCP_1'] },
                             { fieldName: 'attributes.Phone', filter: 'equals', values: ['8-800-555-35-35'] }

package/esm/PivotingTooltip/components/PivotingTooltipContent/PivotingTooltipContent.test.js

@@ -48,14 +48,11 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React from 'react';
 import { mount } from 'enzyme';
 import { act } from 'react-dom/test-utils';
-import * as mdmSdkModule from '@reltio/mdm-sdk';
-import { PivotingTooltipContent } from './PivotingTooltipContent';
+import { getTotals } from '@reltio/mdm-sdk';
 import { PivotingUriLink } from '../../../PivotingUriLink';
 import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
+import { PivotingTooltipContent } from './PivotingTooltipContent';
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { getFilteredEntities: jest.fn(), getTotals: jest.fn() })); });
-jest.mock('../../../EntityAvatar', function () { return ({
-    EntityUriLink: function () { return React.createElement("div", null); }
-}); });
 jest.mock('../../../EntityAvatar', function () { return ({
     EntityAvatar: function () { return React.createElement("div", null); }
 }); });
@@ -172,7 +169,7 @@ describe('PivotingTooltipContent test', function () {
     it('should not show footer with see all button if total count less than 6', function () { return __awaiter(void 0, void 0, void 0, function () {
         var component;
         return __generator(this, function (_a) {
-            jest.spyOn(mdmSdkModule, 'getTotals').mockImplementation(function () { return Promise.resolve({ total: 4 }); });
+            getTotals.mockImplementation(function () { return Promise.resolve({ total: 4 }); });
             component = setUp();
             expect(component.find('.footer')).toHaveLength(0);
             return [2 /*return*/];
@@ -181,7 +178,7 @@ describe('PivotingTooltipContent test', function () {
     it('should show footer with see all button if total count more than 6', function () { return __awaiter(void 0, void 0, void 0, function () {
         var component;
         return __generator(this, function (_a) {
-            jest.spyOn(mdmSdkModule, 'getTotals').mockImplementation(function () { return Promise.resolve({ total: 10 }); });
+            getTotals.mockImplementation(function () { return Promise.resolve({ total: 10 }); });
             component = setUp(__assign(__assign({}, defaultProps), { total: 7 }));
             expect(component.find('.footer')).toHaveLength(1);
             return [2 /*return*/];

package/esm/PivotingUriLink/PivotingUriLink.spec.js

@@ -99,6 +99,7 @@ describe('EntityUriLink tests', function () {
                     onClick = defaultProps.onClick;
                     user = setUp().user;
                     link = screen.getByText('label');
+                    link.addEventListener('click', function (event) { return event.preventDefault(); }, false);
                     return [4 /*yield*/, user.keyboard('{Control>}')];
                 case 1:
                     _a.sent();

package/esm/ProfileBandNavigation/useSearchNavigation.test.js

@@ -195,7 +195,7 @@ describe('useSearchNavigation behavior', function () {
                     case 1:
                         _b.sent();
                         expect(mdmActions.updateSearchNavigationDataFields).toHaveBeenCalledTimes(1);
-                        expect(mdmActions.openEntity).toBeCalledTimes(1);
+                        expect(mdmActions.openEntity).toHaveBeenCalledTimes(1);
                         expect(mdmActions.updateSearchNavigationDataFields).toHaveBeenCalledWith({
                             index: defaultMdmValues.searchNavigationData.index - 1,
                             uri: 'uri0',
@@ -263,7 +263,7 @@ describe('useSearchNavigation behavior', function () {
                     case 1:
                         _b.sent();
                         expect(mdmActions.updateSearchNavigationDataFields).toHaveBeenCalledTimes(1);
-                        expect(mdmActions.openEntity).toBeCalledTimes(1);
+                        expect(mdmActions.openEntity).toHaveBeenCalledTimes(1);
                         expect(mdmActions.updateSearchNavigationDataFields).toHaveBeenCalledWith({
                             index: searchNavigationData.index - 2,
                             uri: 'uri0',
@@ -305,7 +305,7 @@ describe('useSearchNavigation behavior', function () {
                     case 1:
                         _b.sent();
                         expect(mdmActions.updateSearchNavigationDataFields).toHaveBeenCalledTimes(1);
-                        expect(mdmActions.openEntity).toBeCalledTimes(0);
+                        expect(mdmActions.openEntity).toHaveBeenCalledTimes(0);
                         expect(mdmActions.updateSearchNavigationDataFields).toHaveBeenCalledWith({
                             index: searchNavigationData.index - 2,
                             cache: ['uri2'],

package/esm/ProfilesList/ProfilesList.spec.js

@@ -17,7 +17,7 @@ import { EntityUriLink } from '../EntityUriLink';
 import { EntityAvatar } from '../EntityAvatar';
 import { ProfilesList } from './ProfilesList';
 import { ImportModes } from '../types';
-var EntityAvatarMock = function (props) { return React.createElement("div", __assign({}, props)); };
+var EntityAvatarMock = function () { return React.createElement("div", null); };
 jest.mock('../EntityAvatar', function () { return ({
     EntityAvatar: EntityAvatarMock
 }); });

package/esm/ReactSelectLoadMoreButton/ReactSelectLoadMoreButton.test.js

@@ -11,7 +11,7 @@ describe('ReactSelectLoadMoreButton tests', function () {
         expect(component.find(Button).text()).toEqual('Load more');
         var event = {};
         component.find(Button).prop('onClick')(event);
-        expect(onClick).toBeCalled();
+        expect(onClick).toHaveBeenCalled();
     });
     it('should render loading state', function () {
         var component = shallow(React.createElement(ReactSelectLoadMoreButton, { loading: true, onClick: onClick }));

package/esm/ReadOnlyAttributesList/ReadOnlyAttributesList.d.ts

@@ -9,12 +9,12 @@ type Props = {
     children?: React.ReactNode;
     className?: string;
     max?: number;
-    alwaysVisibleTypeUris?: string[];
+    fixedTypeUris?: string[];
     showNonOv?: boolean;
     classes?: ReadOnlyAttributeClasses;
 };
 declare const _default: React.MemoExoticComponent<{
-    ({ attrTypes, entity, parentUri, drawLines, children, className, max, alwaysVisibleTypeUris, showNonOv, classes }: Props): JSX.Element;
+    ({ attrTypes, entity, parentUri, drawLines, children, className, max, fixedTypeUris, showNonOv, classes }: Props): JSX.Element;
     displayName: string;
 }>;
 export default _default;

package/esm/ReadOnlyAttributesList/ReadOnlyAttributesList.js

@@ -16,18 +16,20 @@ import { BranchDecorator } from '../BranchDecorator';
 import { ReadOnlyAttributesPager } from '../ReadOnlyAttributesPager';
 import { ShowMore } from '../ShowMore';
 import { ShowLess } from '../ShowLess';
-import { ALWAYS_VISIBLE_TYPE_URIS } from '../constants';
+import { FIXED_TYPE_URIS } from '../constants';
 import { splitPagersData } from '../helpers/attributesView';
 import { HiddenAttributesContext } from '../contexts/HiddenAttributesContext';
+import { AlwaysVisibleAttributesContext } from '../contexts/AllwaysVisibleAttributesContext';
 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.alwaysVisibleTypeUris, alwaysVisibleTypeUris = _c === void 0 ? ALWAYS_VISIBLE_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;
     var hiddenAttributes = useContext(HiddenAttributesContext);
+    var alwaysVisibleAttributes = useContext(AlwaysVisibleAttributesContext);
     var entityUri = parentUri && getBaseUri(parentUri);
     var currentEntityHiddenAttributes = useMemo(function () { return hiddenAttributes[entityUri] || []; }, [hiddenAttributes, entityUri]);
     var filteredAttrTypes = useMemo(function () { return (attrTypes || []).filter(function (attrType) { return !currentEntityHiddenAttributes.includes(attrType.uri); }); }, [attrTypes, currentEntityHiddenAttributes]);
     var _d = useState(max || Infinity), visibleValuesCount = _d[0], setVisibleValuesCount = _d[1];
-    var pagersData = useMemo(function () { return getAttributesListForReadMode(filteredAttrTypes, entity, showNonOv); }, [filteredAttrTypes, entity, showNonOv]);
-    var _e = useMemo(function () { return splitPagersData(alwaysVisibleTypeUris, pagersData); }, [pagersData, alwaysVisibleTypeUris]), alwaysVisiblePagersData = _e[0], regularPagersData = _e[1];
+    var pagersData = useMemo(function () { return getAttributesListForReadMode(filteredAttrTypes, entity, showNonOv, alwaysVisibleAttributes); }, [filteredAttrTypes, entity, showNonOv, alwaysVisibleAttributes]);
+    var _e = useMemo(function () { return splitPagersData(fixedTypeUris, pagersData); }, [pagersData, fixedTypeUris]), fixedPagersData = _e[0], regularPagersData = _e[1];
     var visibleAttributePagersData = regularPagersData.slice(0, visibleValuesCount);
     var showMore = max && visibleAttributePagersData.length < regularPagersData.length;
     var showLess = max && visibleAttributePagersData.length >= regularPagersData.length && max < visibleAttributePagersData.length;
@@ -42,7 +44,7 @@ var ReadOnlyAttributesList = function (_a) {
     };
     return (React.createElement("div", { className: className },
         children && React.createElement(BranchDecorator, __assign({}, decoratorProps), children),
-        visibleAttributePagersData.concat(alwaysVisiblePagersData).map(function (_a) {
+        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 }));
         }),

package/esm/ReadOnlyAttributesList/ReadOnlyAttributesList.test.js

@@ -232,7 +232,7 @@ describe('ReadOnlyAttributesList tests', function () {
         expect(showMoreButton.length).toBe(0);
         expect(showLessButton.length).toBe(0);
     });
-    describe('alwaysVisibleTypeUris behavior', function () {
+    describe('fixedTypeUris behavior', function () {
         var attrTypes = __spreadArray(__spreadArray([], attributesList, true), [EntityAttrTypes.roles, EntityAttrTypes.tags], false);
         var entity = {
             attributes: attributes,

package/esm/ReadOnlyAttributesPager/ReadOnlyAttributesPager.js

@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import classnames from 'classnames';
-import React, { memo } from 'react';
+import React, { useContext, memo, useMemo } from 'react';
 import { always, cond, has, ifElse, partition, prop, T } from 'ramda';
 import { isComplexAttribute, isImage, isSpecialAttribute, isOv } from '@reltio/mdm-sdk';
 import { BranchDecorator } from '../BranchDecorator';
@@ -18,13 +18,16 @@ import { OneLineRenderer } from './components/OneLineRenderer';
 import { MultiLineRenderer } from './components/MultiLineRenderer';
 import { SpecialRenderer } from './components/SpecialRenderer';
 import { ImageLineRenderer } from './components/ImageLineRenderer';
+import { EmptyRenderer } from './components/EmptyRenderer';
 import { useMdmAction, useMdmMaxValuesInResponse } from '../contexts/MdmModuleContext';
+import { AlwaysVisibleAttributesContext } from '../contexts/AllwaysVisibleAttributesContext';
 import { useStyles } from './styles';
 var RENDERER_TYPES = {
     oneLine: 'oneLine',
     multiLine: 'multiLine',
     imageLine: 'imageLine',
-    special: 'special'
+    special: 'special',
+    empty: 'empty'
 };
 var ReadOnlyAttributesPager = function (_a) {
     var _b, _c, _d, _e;
@@ -35,7 +38,9 @@ var ReadOnlyAttributesPager = function (_a) {
     var maxValuesInResponse = useMdmMaxValuesInResponse();
     var max = (_f = maxProp !== null && maxProp !== void 0 ? maxProp : maxValuesInResponse) !== null && _f !== void 0 ? _f : Infinity;
     var partitionByOv = partition(isOv);
-    if (!values || !values.length) {
+    var alwaysVisibleAttributes = useContext(AlwaysVisibleAttributesContext);
+    var isAlwaysVisible = useMemo(function () { return alwaysVisibleAttributes === null || alwaysVisibleAttributes === void 0 ? void 0 : alwaysVisibleAttributes.includes(attributeType.uri); }, [attributeType.uri, alwaysVisibleAttributes]);
+    if (!values || (!values.length && !isAlwaysVisible)) {
         return null;
     }
     var _h = partitionByOv(values), ovValues = _h[0], nonOvValues = _h[1];
@@ -47,11 +52,13 @@ var ReadOnlyAttributesPager = function (_a) {
         ? paging.totalValues - totalVisibleValues
         : nonVisibleValues.length;
     var isOneLineRender = totalVisibleValues === 1 && !isComplexAttribute(attributeType);
+    var isEmptyRender = values.length === 0 && isAlwaysVisible;
     var render = function () {
         var type = cond([
             [isSpecialAttribute, always(RENDERER_TYPES.special)],
             [isImage, always(RENDERER_TYPES.imageLine)],
             [always(isOneLineRender), always(RENDERER_TYPES.oneLine)],
+            [always(isEmptyRender), always(RENDERER_TYPES.empty)],
             [T, always(RENDERER_TYPES.multiLine)]
         ])(attributeType);
         switch (type) {
@@ -63,6 +70,8 @@ var ReadOnlyAttributesPager = function (_a) {
                 return (React.createElement(ImageLineRenderer, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, parentUri: parentUri, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv }));
             case RENDERER_TYPES.special:
                 return React.createElement(SpecialRenderer, { values: visibleValues, attributeType: attributeType, classes: classes });
+            case RENDERER_TYPES.empty:
+                return React.createElement(EmptyRenderer, { attributeType: attributeType, classes: classes });
         }
     };
     return (React.createElement(BranchDecorator, { enabled: drawLines, className: classnames(__assign((_b = {}, _b[styles.paddingWrapperWithLines] = drawLines, _b), ((classes === null || classes === void 0 ? void 0 : classes.wrapperWithLines) ? (_c = {}, _c[classes === null || classes === void 0 ? void 0 : classes.wrapperWithLines] = drawLines, _c) : {}))) },

package/esm/ReadOnlyAttributesPager/components/EmptyRenderer/EmptyRenderer.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { AttributeType } from '@reltio/mdm-sdk';
+import { ReadOnlyAttributeClasses } from '../../..';
+type Props = {
+    attributeType: AttributeType;
+    classes?: ReadOnlyAttributeClasses;
+};
+export declare const EmptyRenderer: ({ attributeType, classes }: Props) => JSX.Element;
+export {};

package/esm/ReadOnlyAttributesPager/components/EmptyRenderer/EmptyRenderer.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import classnames from 'classnames';
+import { AttributeTitle } from '../../../AttributeTitle';
+import { DescriptionIcon } from '../../../DescriptionIcon';
+import { useEmptyStyles } from '../../styles';
+export var EmptyRenderer = function (_a) {
+    var attributeType = _a.attributeType, classes = _a.classes;
+    var styles = useEmptyStyles();
+    var label = attributeType.label, description = attributeType.description;
+    return (React.createElement("div", { "data-reltio-id": "reltio-empty-renderer", 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 })));
+};

package/esm/ReadOnlyAttributesPager/components/EmptyRenderer/index.d.ts

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

package/esm/ReadOnlyAttributesPager/components/EmptyRenderer/index.js

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

package/esm/ReadOnlyAttributesPager/styles.d.ts

@@ -1,3 +1,4 @@
 export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"paddingWrapper" | "paddingWrapperWithLines">;
 export declare const useOneLineStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "wrapper" | "attribute" | "collaborationWrapper" | "titleIcon" | "titleRow" | "ovIcon" | "descriptionIcon">;
 export declare const useMultiLineStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "wrapper" | "attributes" | "attribute" | "titleRow" | "ovIcon" | "descriptionIcon">;
+export declare const useEmptyStyles: (props?: any) => import("@mui/styles").ClassNameMap<"title" | "wrapper" | "titleRow" | "ovIcon" | "descriptionIcon">;

package/esm/ReadOnlyAttributesPager/styles.js

@@ -87,3 +87,7 @@ export var useMultiLineStyles = makeStyles(__assign({ wrapper: {
     }, attributes: {
         alignSelf: 'stretch'
     }, titleRow: __assign(__assign({}, commonStyles.titleRow), { marginBottom: '3px' }) }, commonStyles));
+export var useEmptyStyles = makeStyles(__assign({ wrapper: {
+        fontSize: fontSize,
+        lineHeight: lineHeight
+    } }, commonStyles));

package/esm/ReferenceAttributeEditor/ReferenceAttributeEditor.test.js

@@ -11,12 +11,11 @@ var __assign = (this && this.__assign) || function () {
 };
 import React from 'react';
 import { mount } from 'enzyme';
-import { Mode } from '@reltio/mdm-sdk';
+import { Mode, createTemporaryEntity } from '@reltio/mdm-sdk';
 import { referenceAttrType, metadata } from './metadata.test-data';
 import ReferenceAttributeEditor from './ReferenceAttributeEditor';
 import { EditModeComplexAttribute } from '../EditModeComplexAttribute';
 import { EntitySelector } from '../EntitySelector';
-import * as mdmSdk from '@reltio/mdm-sdk';
 import { ErrorWrapper } from '../ErrorWrapper';
 import { useScrollToAttributeError } from '../hooks/useScrollToAttributeError';
 import { ScrollType, ScrollToElementContext } from '../contexts/ScrollToElementContext';
@@ -493,9 +492,9 @@ describe('ReferenceAttributeEditor', function () {
                         uri: 'entities/uri$$1',
                         label: 'New entity!'
                     };
-                    jest.spyOn(mdmSdk, 'createTemporaryEntity').mockReturnValue(mockedNewEntity);
+                    createTemporaryEntity.mockReturnValue(mockedNewEntity);
                     entitySelector.prop('onCreate')(entityTypeUri);
-                    expect(mdmSdk.createTemporaryEntity).toHaveBeenCalledWith(expect.objectContaining({
+                    expect(createTemporaryEntity).toHaveBeenCalledWith(expect.objectContaining({
                         entityTypeUri: entityTypeUri,
                         attributeTypes: [
                             {
@@ -554,9 +553,9 @@ describe('ReferenceAttributeEditor', function () {
                         uri: 'entities/uri$$1',
                         label: 'New entity!'
                     };
-                    jest.spyOn(mdmSdk, 'createTemporaryEntity').mockReturnValue(mockedNewEntity);
+                    createTemporaryEntity.mockReturnValue(mockedNewEntity);
                     entitySelector.prop('onCreate')(entityTypeUri);
-                    expect(mdmSdk.createTemporaryEntity).toHaveBeenCalledWith(expect.objectContaining({ entityTypeUri: entityTypeUri }));
+                    expect(createTemporaryEntity).toHaveBeenCalledWith(expect.objectContaining({ entityTypeUri: entityTypeUri }));
                     expect(mdmActions.entityDeleted).toHaveBeenCalledWith(modifiedEntity.uri);
                     expect(mdmActions.entityCreated).toHaveBeenCalledWith(mockedNewEntity);
                     expect(props.onChangeAttribute).toHaveBeenCalledWith({
@@ -588,9 +587,9 @@ describe('ReferenceAttributeEditor', function () {
                         uri: 'entities/uri$$1',
                         label: 'New entity!'
                     };
-                    jest.spyOn(mdmSdk, 'createTemporaryEntity').mockReturnValue(mockedNewEntity);
+                    createTemporaryEntity.mockReturnValue(mockedNewEntity);
                     entitySelector.prop('onCreate')(entityTypeUri, initValue);
-                    expect(mdmSdk.createTemporaryEntity).toHaveBeenCalledWith({
+                    expect(createTemporaryEntity).toHaveBeenCalledWith({
                         entityTypeUri: entityTypeUri,
                         initValue: initValue,
                         attributeTypes: [

package/esm/RelationEditor/IntegrationRelationEditor.test.js

@@ -176,7 +176,7 @@ describe('RelationEditor behaviour', function () {
                     return [4 /*yield*/, user.click(inputs[0])];
                 case 1:
                     _a.sent();
-                    expect(typeAheadSearch).toBeCalledWith([{ label: 'Address', uri: 'configuration/entityTypes/Location' }], '', {
+                    expect(typeAheadSearch).toHaveBeenCalledWith([{ label: 'Address', uri: 'configuration/entityTypes/Location' }], '', {
                         globalFilter: '',
                         max: 20,
                         searchOptions: '',