@reltio/components 1.4.1944 → 1.4.1945

package/cjs/AttributesView/AttributesView.d.ts

@@ -9,5 +9,6 @@ export type AttributesViewProps = {
     includeUris?: string[];
     pinnedAttributes?: PinnedAttribute[];
     mode?: Mode;
+    alwaysVisible?: string[];
 };
-export declare const AttributesView: ({ attributesCount, pinnedAttributes, ...restProps }: AttributesViewProps) => JSX.Element;
+export declare const AttributesView: ({ attributesCount, pinnedAttributes, alwaysVisible, ...restProps }: AttributesViewProps) => JSX.Element;

package/cjs/AttributesView/AttributesView.js

@@ -32,12 +32,14 @@ var ReadOnlyAttributesView_1 = require("../ReadOnlyAttributesView");
 var EditModeAttributesView_1 = require("../EditModeAttributesView");
 var EntityContext_1 = require("../contexts/EntityContext");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
+var AllwaysVisibleAttributesContext_1 = require("../contexts/AllwaysVisibleAttributesContext");
 var AttributesView = function (_a) {
-    var attributesCount = _a.attributesCount, pinnedAttributes = _a.pinnedAttributes, restProps = __rest(_a, ["attributesCount", "pinnedAttributes"]);
+    var attributesCount = _a.attributesCount, pinnedAttributes = _a.pinnedAttributes, _b = _a.alwaysVisible, alwaysVisible = _b === void 0 ? [] : _b, restProps = __rest(_a, ["attributesCount", "pinnedAttributes", "alwaysVisible"]);
     var mdmEntity = (0, MdmModuleContext_1.useMdmEntityWithDiff)();
     var mdmMode = (0, MdmModuleContext_1.useMdmMode)();
     var entity = restProps.entity || mdmEntity;
     var mode = restProps.mode || mdmMode;
-    return (react_1.default.createElement(EntityContext_1.EntityContext.Provider, { value: entity }, (0, mdm_sdk_1.isViewMode)(mode) ? (react_1.default.createElement(ReadOnlyAttributesView_1.ReadOnlyAttributesView, __assign({}, restProps, { attributesCount: attributesCount, entity: entity }))) : (react_1.default.createElement(EditModeAttributesView_1.EditModeAttributesView, __assign({}, restProps, { mode: mode, pinnedAttributes: pinnedAttributes, entity: entity })))));
+    return (react_1.default.createElement(EntityContext_1.EntityContext.Provider, { value: entity },
+        react_1.default.createElement(AllwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext.Provider, { value: alwaysVisible }, (0, mdm_sdk_1.isViewMode)(mode) ? (react_1.default.createElement(ReadOnlyAttributesView_1.ReadOnlyAttributesView, __assign({}, restProps, { attributesCount: attributesCount, entity: entity }))) : (react_1.default.createElement(EditModeAttributesView_1.EditModeAttributesView, __assign({}, restProps, { mode: mode, pinnedAttributes: pinnedAttributes, entity: entity }))))));
 };
 exports.AttributesView = AttributesView;

package/cjs/AttributesView/AttributesView.test.js

@@ -45,6 +45,20 @@ describe('AttributesView tests', function () {
                         name: 'FirstName',
                         label: 'First Name',
                         access: ['READ', 'CREATE', 'UPDATE', 'INITIATE_CHANGE_REQUEST']
+                    },
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/LastName',
+                        type: 'String',
+                        name: 'LastName',
+                        label: 'Last Name',
+                        access: ['READ', 'CREATE', 'UPDATE', 'INITIATE_CHANGE_REQUEST']
+                    },
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/Phone',
+                        type: 'String',
+                        name: 'Phone',
+                        label: 'Phone',
+                        access: ['READ', 'CREATE', 'UPDATE', 'INITIATE_CHANGE_REQUEST']
                     }
                 ]
             }
@@ -91,4 +105,22 @@ describe('AttributesView tests', function () {
         setUp({ entity: entity }, __assign(__assign({}, mdmDefaultValues), { mode: mdm_sdk_1.Mode.Suggesting }));
         expect(react_2.screen.getByRole('textbox')).toHaveValue('nameValue');
     });
+    it('should render always visible attributes in read mode', function () {
+        var alwaysVisible = [
+            'configuration/entityTypes/HCP/attributes/LastName',
+            'configuration/entityTypes/HCP/attributes/Phone'
+        ];
+        setUp({ mode: mdm_sdk_1.Mode.Viewing, entity: entity, alwaysVisible: alwaysVisible });
+        expect(react_2.screen.getByText('Last Name')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Phone')).toBeInTheDocument();
+    });
+    it('should render always visible attributes in editing mode', function () {
+        var alwaysVisible = [
+            'configuration/entityTypes/HCP/attributes/LastName',
+            'configuration/entityTypes/HCP/attributes/Phone'
+        ];
+        setUp({ mode: mdm_sdk_1.Mode.Editing, entity: entity, alwaysVisible: alwaysVisible });
+        expect(react_2.screen.getByText('Last Name')).toBeInTheDocument();
+        expect(react_2.screen.getByText('Phone')).toBeInTheDocument();
+    });
 });

package/cjs/EditModeAttributesList/EditModeAttributesList.d.ts

@@ -10,7 +10,7 @@ declare const _default: React.ComponentType<{
     showEmptyEditors?: boolean;
     showNonOv?: boolean;
     className?: string;
-    alwaysVisibleTypeUris?: string[];
+    fixedTypeUris?: string[];
     highlightAttribute?: (element: AttributeType, type: ScrollType) => void;
 } & Pick<EditModeAttributesPagerProps<AttributeValue>, "mode" | "crosswalks" | "parentUri" | "drawLines" | "onAddAttributes" | "onDeleteAttribute" | "onChangeAttribute" | "additionalControlsRenderer" | "showEmptyEditors">>;
 export default _default;

package/cjs/EditModeAttributesList/EditModeAttributesList.js

@@ -53,11 +53,13 @@ var withContext_1 = require("../HOCs/withContext");
 var ConfigPermissionsContext_1 = require("../contexts/ConfigPermissionsContext");
 var ScrollToElementContext_1 = require("../contexts/ScrollToElementContext");
 var HiddenAttributesContext_1 = require("../contexts/HiddenAttributesContext");
+var AllwaysVisibleAttributesContext_1 = require("../contexts/AllwaysVisibleAttributesContext");
 var EditModeAttributesList = function (_a) {
-    var parentAttributeType = _a.parentAttributeType, attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.alwaysVisibleTypeUris, alwaysVisibleTypeUris = _b === void 0 ? constants_1.ALWAYS_VISIBLE_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv, highlightAttribute = _a.highlightAttribute;
+    var parentAttributeType = _a.parentAttributeType, attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.fixedTypeUris, fixedTypeUris = _b === void 0 ? constants_1.FIXED_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv, highlightAttribute = _a.highlightAttribute;
     var hiddenAttributes = (0, react_1.useContext)(HiddenAttributesContext_1.HiddenAttributesContext);
     var entityUri = parentUri && (0, mdm_sdk_1.getBaseUri)(parentUri);
     var currentEntityHiddenAttributes = (0, react_1.useMemo)(function () { return hiddenAttributes[entityUri] || []; }, [hiddenAttributes, entityUri]);
+    var alwaysVisibleAttributes = (0, react_1.useContext)(AllwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext);
     var filteredAttrTypes = (0, react_1.useMemo)(function () { return attrTypes.filter(function (attrType) { return !currentEntityHiddenAttributes.includes(attrType.uri); }); }, [attrTypes, currentEntityHiddenAttributes]);
     var _c = entity.attributes, attributes = _c === void 0 ? {} : _c;
     var _d = (0, react_1.useState)({}), hasDeletionsMap = _d[0], setHasDeletionsMap = _d[1];
@@ -76,9 +78,18 @@ var EditModeAttributesList = function (_a) {
     var moreAttrTypes = (0, helpers_1.getMoreAttrTypes)(creatableAttrTypes, entity, showEmptyEditors, hasDeletionsMap);
     var pinnedAttributes = (0, react_1.useContext)(PinnedAttributesContext_1.PinnedAttributesContext);
     var pagersData = (0, react_1.useMemo)(function () {
-        return (0, mdm_sdk_1.getAttributesListForEditMode)(filteredAttrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes, canCreate);
-    }, [filteredAttrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes, canCreate]);
-    var _e = (0, react_1.useMemo)(function () { return (0, attributesView_1.splitPagersData)(alwaysVisibleTypeUris, pagersData); }, [pagersData, alwaysVisibleTypeUris]), alwaysVisiblePagersData = _e[0], regularPagersData = _e[1];
+        return (0, mdm_sdk_1.getAttributesListForEditMode)(filteredAttrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes, canCreate, alwaysVisibleAttributes);
+    }, [
+        filteredAttrTypes,
+        mode,
+        entity,
+        showEmptyEditors,
+        showNonOv,
+        pinnedAttributes,
+        canCreate,
+        alwaysVisibleAttributes
+    ]);
+    var _e = (0, react_1.useMemo)(function () { return (0, attributesView_1.splitPagersData)(fixedTypeUris, pagersData); }, [pagersData, fixedTypeUris]), fixedPagersData = _e[0], regularPagersData = _e[1];
     var onAddMoreAttributes = (0, react_1.useCallback)(function (attributeTypes) {
         onAddAttributes(attributeTypes.map(function (attributeType) { return ({
             attributeType: attributeType,
@@ -96,7 +107,7 @@ var EditModeAttributesList = function (_a) {
     return (react_1.default.createElement("div", { className: className },
         children && react_1.default.createElement(BranchDecorator_1.BranchDecorator, __assign({}, decoratorProps), children),
         react_1.default.createElement(BranchDecorator_1.BranchDecorator, __assign({}, decoratorProps, { plain: true }), moreAttrTypes.length > 0 && mode !== mdm_sdk_1.Mode.Viewing && (react_1.default.createElement(MoreAttributesButton_1.MoreAttributesButton, { label: ui_i18n_1.default.text('More attributes'), onApply: onAddMoreAttributes, dense: drawLines, data: moreAttrTypes, parent: canCreateParentAttrType && parentAttributeType }))),
-        react_1.default.createElement(HasDeletionsContext_1.HasDeletionsContext.Provider, { value: hasDeletionsContextValue }, regularPagersData.concat(alwaysVisiblePagersData).map(function (_a) {
+        react_1.default.createElement(HasDeletionsContext_1.HasDeletionsContext.Provider, { value: hasDeletionsContextValue }, regularPagersData.concat(fixedPagersData).map(function (_a) {
             var attrType = _a.attrType, values = _a.values;
             return (react_1.default.createElement(EditModeAttributesPager_1.EditModeAttributesPager, { key: "".concat(attrType.uri, "_").concat(parentUri), attributeType: attrType, drawLines: drawLines, values: values, paging: (0, ramda_1.path)(['paging', attrType.uri], attributes), parentUri: parentUri, showEmptyEditors: showEmptyEditors, mode: mode, crosswalks: crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute, additionalControlsRenderer: additionalControlsRenderer, showNonOv: showNonOv }));
         }))));

package/cjs/EditModeAttributesList/EditModeAttributesList.test.js

@@ -353,6 +353,6 @@ describe('EditModeAttributesList tests', function () {
         (0, enzyme_1.mount)(react_1.default.createElement(PinnedAttributesContext_1.PinnedAttributesContext.Provider, { value: pinnedAttributes },
             react_1.default.createElement(EditModeAttributesList_1.default, { mode: mdm_sdk_1.Mode.Editing, attrTypes: attributes_test_data_1.attributesList, entity: entity, parentUri: parentUri },
                 react_1.default.createElement(Child, null))));
-        expect(mdm_sdk_1.getAttributesListForEditMode).toHaveBeenCalledWith(attributes_test_data_1.attributesList, mdm_sdk_1.Mode.Editing, entity, undefined, undefined, pinnedAttributes, true);
+        expect(mdm_sdk_1.getAttributesListForEditMode).toHaveBeenCalledWith(attributes_test_data_1.attributesList, mdm_sdk_1.Mode.Editing, entity, undefined, undefined, pinnedAttributes, true, []);
     });
 });

package/cjs/EditModeAttributesPager/components/AttributeRenderer/AttributeRenderer.js

@@ -39,6 +39,7 @@ var ShowMore_1 = require("../../../ShowMore");
 var EditModeAttributesFactory_1 = require("../../../EditModeAttributesFactory");
 var CardinalityMessage_1 = require("../../../CardinalityMessage");
 var PinnedAttributesContext_1 = require("../../../contexts/PinnedAttributesContext");
+var AllwaysVisibleAttributesContext_1 = require("../../../contexts/AllwaysVisibleAttributesContext");
 var DescriptionIcon_1 = require("../../../DescriptionIcon");
 var ControlAttributeIcon_1 = require("../../../ControlAttributeIcon");
 var useScrollToAttribute_1 = require("../../../hooks/useScrollToAttribute");
@@ -56,9 +57,11 @@ var AttributeRenderer = function (_a) {
     var _d = (0, useScrollToAttributeError_1.useScrollToAttributeError)({ highlightedError: highlightedError }), errorRef = _d.ref, errorClassName = _d.errorClassName;
     var _e = (0, useScrollToAttribute_1.useScrollToAttribute)(highlightedAttribute), attributeRef = _e.ref, highlightedClassName = _e.highlightedClassName;
     var pinnedAttributes = (0, react_1.useContext)(PinnedAttributesContext_1.PinnedAttributesContext);
+    var alwaysVisibleAttributes = (0, react_1.useContext)(AllwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext);
     var isPinned = (0, react_1.useMemo)(function () { return pinnedAttributes === null || pinnedAttributes === void 0 ? void 0 : pinnedAttributes.includes(attributeTypeUri); }, [attributeTypeUri, pinnedAttributes]);
+    var isAlwaysVisible = (0, react_1.useMemo)(function () { return alwaysVisibleAttributes === null || alwaysVisibleAttributes === void 0 ? void 0 : alwaysVisibleAttributes.includes(attributeTypeUri); }, [attributeTypeUri, alwaysVisibleAttributes]);
     var isEmptyValues = (0, mdm_sdk_1.isEmptyValue)(values);
-    var showEmpty = ((!hadDeletions && showEmptyEditors) || isRequired || isPinned) && isEmptyValues;
+    var showEmpty = ((!hadDeletions && showEmptyEditors) || isRequired || isPinned || isAlwaysVisible) && isEmptyValues;
     var controlAttributes = (0, MdmModuleContext_1.useMdmControlAttributes)();
     var isControlAttribute = (0, react_1.useMemo)(function () { return controlAttributes.includes(attributeType.uri); }, [controlAttributes, attributeType.uri]);
     var emptyEditorValue = (0, react_1.useRef)((0, mdm_sdk_1.createNewAttribute)({

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

@@ -44,15 +44,17 @@ var ShowLess_1 = require("../ShowLess");
 var constants_1 = require("../constants");
 var attributesView_1 = require("../helpers/attributesView");
 var HiddenAttributesContext_1 = require("../contexts/HiddenAttributesContext");
+var AllwaysVisibleAttributesContext_1 = require("../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 ? constants_1.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 ? constants_1.FIXED_TYPE_URIS : _c, showNonOv = _a.showNonOv, classes = _a.classes;
     var hiddenAttributes = (0, react_1.useContext)(HiddenAttributesContext_1.HiddenAttributesContext);
+    var alwaysVisibleAttributes = (0, react_1.useContext)(AllwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext);
     var entityUri = parentUri && (0, mdm_sdk_1.getBaseUri)(parentUri);
     var currentEntityHiddenAttributes = (0, react_1.useMemo)(function () { return hiddenAttributes[entityUri] || []; }, [hiddenAttributes, entityUri]);
     var filteredAttrTypes = (0, react_1.useMemo)(function () { return (attrTypes || []).filter(function (attrType) { return !currentEntityHiddenAttributes.includes(attrType.uri); }); }, [attrTypes, currentEntityHiddenAttributes]);
     var _d = (0, react_1.useState)(max || Infinity), visibleValuesCount = _d[0], setVisibleValuesCount = _d[1];
-    var pagersData = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.getAttributesListForReadMode)(filteredAttrTypes, entity, showNonOv); }, [filteredAttrTypes, entity, showNonOv]);
-    var _e = (0, react_1.useMemo)(function () { return (0, attributesView_1.splitPagersData)(alwaysVisibleTypeUris, pagersData); }, [pagersData, alwaysVisibleTypeUris]), alwaysVisiblePagersData = _e[0], regularPagersData = _e[1];
+    var pagersData = (0, react_1.useMemo)(function () { return (0, mdm_sdk_1.getAttributesListForReadMode)(filteredAttrTypes, entity, showNonOv, alwaysVisibleAttributes); }, [filteredAttrTypes, entity, showNonOv, alwaysVisibleAttributes]);
+    var _e = (0, react_1.useMemo)(function () { return (0, attributesView_1.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;
@@ -67,7 +69,7 @@ var ReadOnlyAttributesList = function (_a) {
     };
     return (react_1.default.createElement("div", { className: className },
         children && react_1.default.createElement(BranchDecorator_1.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_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 }));
         }),

package/cjs/ReadOnlyAttributesList/ReadOnlyAttributesList.test.js

@@ -237,7 +237,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([], attributes_test_data_1.attributesList, true), [mdm_sdk_1.EntityAttrTypes.roles, mdm_sdk_1.EntityAttrTypes.tags], false);
         var entity = {
             attributes: attributes,

package/cjs/ReadOnlyAttributesPager/ReadOnlyAttributesPager.js

@@ -46,13 +46,16 @@ var OneLineRenderer_1 = require("./components/OneLineRenderer");
 var MultiLineRenderer_1 = require("./components/MultiLineRenderer");
 var SpecialRenderer_1 = require("./components/SpecialRenderer");
 var ImageLineRenderer_1 = require("./components/ImageLineRenderer");
+var EmptyRenderer_1 = require("./components/EmptyRenderer");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
+var AllwaysVisibleAttributesContext_1 = require("../contexts/AllwaysVisibleAttributesContext");
 var styles_1 = require("./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;
@@ -63,7 +66,9 @@ var ReadOnlyAttributesPager = function (_a) {
     var maxValuesInResponse = (0, MdmModuleContext_1.useMdmMaxValuesInResponse)();
     var max = (_f = maxProp !== null && maxProp !== void 0 ? maxProp : maxValuesInResponse) !== null && _f !== void 0 ? _f : Infinity;
     var partitionByOv = (0, ramda_1.partition)(mdm_sdk_1.isOv);
-    if (!values || !values.length) {
+    var alwaysVisibleAttributes = (0, react_1.useContext)(AllwaysVisibleAttributesContext_1.AlwaysVisibleAttributesContext);
+    var isAlwaysVisible = (0, react_1.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];
@@ -75,11 +80,13 @@ var ReadOnlyAttributesPager = function (_a) {
         ? paging.totalValues - totalVisibleValues
         : nonVisibleValues.length;
     var isOneLineRender = totalVisibleValues === 1 && !(0, mdm_sdk_1.isComplexAttribute)(attributeType);
+    var isEmptyRender = values.length === 0 && isAlwaysVisible;
     var render = function () {
         var type = (0, ramda_1.cond)([
             [mdm_sdk_1.isSpecialAttribute, (0, ramda_1.always)(RENDERER_TYPES.special)],
             [mdm_sdk_1.isImage, (0, ramda_1.always)(RENDERER_TYPES.imageLine)],
             [(0, ramda_1.always)(isOneLineRender), (0, ramda_1.always)(RENDERER_TYPES.oneLine)],
+            [(0, ramda_1.always)(isEmptyRender), (0, ramda_1.always)(RENDERER_TYPES.empty)],
             [ramda_1.T, (0, ramda_1.always)(RENDERER_TYPES.multiLine)]
         ])(attributeType);
         switch (type) {
@@ -91,6 +98,8 @@ var ReadOnlyAttributesPager = function (_a) {
                 return (react_1.default.createElement(ImageLineRenderer_1.ImageLineRenderer, { attributeValues: visibleValues, attributeType: attributeType, paging: paging, parentUri: parentUri, requestNextPageOfAttributeValues: requestNextPageOfAttributeValues, showNonOv: showNonOv }));
             case RENDERER_TYPES.special:
                 return react_1.default.createElement(SpecialRenderer_1.SpecialRenderer, { values: visibleValues, attributeType: attributeType, classes: classes });
+            case RENDERER_TYPES.empty:
+                return react_1.default.createElement(EmptyRenderer_1.EmptyRenderer, { attributeType: attributeType, classes: classes });
         }
     };
     return (react_1.default.createElement(BranchDecorator_1.BranchDecorator, { enabled: drawLines, className: (0, classnames_1.default)(__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/cjs/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/cjs/ReadOnlyAttributesPager/components/EmptyRenderer/EmptyRenderer.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EmptyRenderer = void 0;
+var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
+var AttributeTitle_1 = require("../../../AttributeTitle");
+var DescriptionIcon_1 = require("../../../DescriptionIcon");
+var styles_1 = require("../../styles");
+var EmptyRenderer = function (_a) {
+    var attributeType = _a.attributeType, classes = _a.classes;
+    var styles = (0, styles_1.useEmptyStyles)();
+    var label = attributeType.label, description = attributeType.description;
+    return (react_1.default.createElement("div", { "data-reltio-id": "reltio-empty-renderer", className: (0, classnames_1.default)(styles.titleRow, styles.wrapper) },
+        react_1.default.createElement(AttributeTitle_1.AttributeTitle, { label: label, className: (0, classnames_1.default)(styles.title, classes === null || classes === void 0 ? void 0 : classes.title), "data-reltio-id": "reltio-attribute-label" }),
+        react_1.default.createElement(DescriptionIcon_1.DescriptionIcon, { description: description, className: styles.descriptionIcon })));
+};
+exports.EmptyRenderer = EmptyRenderer;

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

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

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

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

package/cjs/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/cjs/ReadOnlyAttributesPager/styles.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMultiLineStyles = exports.useOneLineStyles = exports.useStyles = void 0;
+exports.useEmptyStyles = exports.useMultiLineStyles = exports.useOneLineStyles = exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
 var fontSize = '13px';
 var lineHeight = '16px';
@@ -90,3 +90,7 @@ exports.useMultiLineStyles = (0, styles_1.makeStyles)(__assign({ wrapper: {
     }, attributes: {
         alignSelf: 'stretch'
     }, titleRow: __assign(__assign({}, commonStyles.titleRow), { marginBottom: '3px' }) }, commonStyles));
+exports.useEmptyStyles = (0, styles_1.makeStyles)(__assign({ wrapper: {
+        fontSize: fontSize,
+        lineHeight: lineHeight
+    } }, commonStyles));

package/cjs/constants/attributes.d.ts

@@ -1 +1 @@
-export declare const ALWAYS_VISIBLE_TYPE_URIS: string[];
+export declare const FIXED_TYPE_URIS: string[];

package/cjs/constants/attributes.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ALWAYS_VISIBLE_TYPE_URIS = void 0;
+exports.FIXED_TYPE_URIS = void 0;
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
-exports.ALWAYS_VISIBLE_TYPE_URIS = [mdm_sdk_1.EntityAttrTypes.roles.uri, mdm_sdk_1.EntityAttrTypes.tags.uri];
+exports.FIXED_TYPE_URIS = [mdm_sdk_1.EntityAttrTypes.roles.uri, mdm_sdk_1.EntityAttrTypes.tags.uri];

package/cjs/constants/index.d.ts

@@ -1,6 +1,6 @@
 export { SortingType, QueryBuilderAttributeType } from './prop-types';
 export { COMMENTS_CONTAINER_VISIBILITY_AREA } from './classnames';
-export { ALWAYS_VISIBLE_TYPE_URIS } from './attributes';
+export { FIXED_TYPE_URIS } from './attributes';
 export { MAP_DRAWING_MODES, DEFAULT_GOOGLE_MAP_OPTIONS, DEFAULT_OVERLAY_OPTIONS, MAP_MINIMUM_SCALE_RADIUS } from './map';
 export { COMMON_TEXT_FIELD_PROPS } from './textField';
 export { POPUP_Z_INDEX } from './common';

package/cjs/constants/index.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.viewingModeOption = exports.suggestingModeOption = exports.editingModeOption = exports.ReactSelectOptionFilters = exports.POPUP_Z_INDEX = exports.COMMON_TEXT_FIELD_PROPS = exports.MAP_MINIMUM_SCALE_RADIUS = exports.DEFAULT_OVERLAY_OPTIONS = exports.DEFAULT_GOOGLE_MAP_OPTIONS = exports.MAP_DRAWING_MODES = exports.ALWAYS_VISIBLE_TYPE_URIS = exports.COMMENTS_CONTAINER_VISIBILITY_AREA = exports.QueryBuilderAttributeType = exports.SortingType = void 0;
+exports.viewingModeOption = exports.suggestingModeOption = exports.editingModeOption = exports.ReactSelectOptionFilters = exports.POPUP_Z_INDEX = exports.COMMON_TEXT_FIELD_PROPS = exports.MAP_MINIMUM_SCALE_RADIUS = exports.DEFAULT_OVERLAY_OPTIONS = exports.DEFAULT_GOOGLE_MAP_OPTIONS = exports.MAP_DRAWING_MODES = exports.FIXED_TYPE_URIS = exports.COMMENTS_CONTAINER_VISIBILITY_AREA = exports.QueryBuilderAttributeType = exports.SortingType = void 0;
 var prop_types_1 = require("./prop-types");
 Object.defineProperty(exports, "SortingType", { enumerable: true, get: function () { return prop_types_1.SortingType; } });
 Object.defineProperty(exports, "QueryBuilderAttributeType", { enumerable: true, get: function () { return prop_types_1.QueryBuilderAttributeType; } });
 var classnames_1 = require("./classnames");
 Object.defineProperty(exports, "COMMENTS_CONTAINER_VISIBILITY_AREA", { enumerable: true, get: function () { return classnames_1.COMMENTS_CONTAINER_VISIBILITY_AREA; } });
 var attributes_1 = require("./attributes");
-Object.defineProperty(exports, "ALWAYS_VISIBLE_TYPE_URIS", { enumerable: true, get: function () { return attributes_1.ALWAYS_VISIBLE_TYPE_URIS; } });
+Object.defineProperty(exports, "FIXED_TYPE_URIS", { enumerable: true, get: function () { return attributes_1.FIXED_TYPE_URIS; } });
 var map_1 = require("./map");
 Object.defineProperty(exports, "MAP_DRAWING_MODES", { enumerable: true, get: function () { return map_1.MAP_DRAWING_MODES; } });
 Object.defineProperty(exports, "DEFAULT_GOOGLE_MAP_OPTIONS", { enumerable: true, get: function () { return map_1.DEFAULT_GOOGLE_MAP_OPTIONS; } });

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AlwaysVisibleAttributesContext: import("react").Context<string[]>;

package/cjs/contexts/AllwaysVisibleAttributesContext/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlwaysVisibleAttributesContext = void 0;
+var react_1 = require("react");
+exports.AlwaysVisibleAttributesContext = (0, react_1.createContext)([]);
+exports.AlwaysVisibleAttributesContext.displayName = 'AlwaysVisibleAttributesContext';

package/cjs/helpers/attributesView.d.ts

@@ -5,7 +5,7 @@ type PagersData = {
     attrType: AttributeType;
     values: (SimpleAttributeValue | NestedAttributeValue | ReferenceAttributeValue | string | number)[];
 };
-export declare const splitPagersData: (alwaysVisibleTypeUris: string[], pagersData: PagersData[]) => [PagersData[], PagersData[]];
+export declare const splitPagersData: (fixedTypeUris: string[], pagersData: PagersData[]) => [PagersData[], PagersData[]];
 export declare const attributeValueToEditorValue: (attributeValue: SimpleAttributeValue, { type }: DataTypeDefinition) => string | number | boolean | Date | {
     value: import("@reltio/mdm-sdk").PrimitiveValue;
     lookupCode: string;

package/cjs/helpers/attributesView.js

@@ -20,8 +20,8 @@ var getFilteredAttrTypes = function (metadata, type, includeUris, excludeUris) {
         });
 };
 exports.getFilteredAttrTypes = getFilteredAttrTypes;
-var splitPagersData = function (alwaysVisibleTypeUris, pagersData) {
-    return (0, ramda_1.partition)((0, ramda_1.pipe)((0, ramda_1.path)(['attrType', 'uri']), (0, ramda_1.includes)(ramda_1.__, alwaysVisibleTypeUris)), pagersData);
+var splitPagersData = function (fixedTypeUris, pagersData) {
+    return (0, ramda_1.partition)((0, ramda_1.pipe)((0, ramda_1.path)(['attrType', 'uri']), (0, ramda_1.includes)(ramda_1.__, fixedTypeUris)), pagersData);
 };
 exports.splitPagersData = splitPagersData;
 var attributeValueToEditorValue = function (attributeValue, _a) {

package/esm/AttributesView/AttributesView.d.ts

@@ -9,5 +9,6 @@ export type AttributesViewProps = {
     includeUris?: string[];
     pinnedAttributes?: PinnedAttribute[];
     mode?: Mode;
+    alwaysVisible?: string[];
 };
-export declare const AttributesView: ({ attributesCount, pinnedAttributes, ...restProps }: AttributesViewProps) => JSX.Element;
+export declare const AttributesView: ({ attributesCount, pinnedAttributes, alwaysVisible, ...restProps }: AttributesViewProps) => JSX.Element;

package/esm/AttributesView/AttributesView.js

@@ -26,11 +26,13 @@ import { ReadOnlyAttributesView } from '../ReadOnlyAttributesView';
 import { EditModeAttributesView } from '../EditModeAttributesView';
 import { EntityContext } from '../contexts/EntityContext';
 import { useMdmEntityWithDiff, useMdmMode } from '../contexts/MdmModuleContext';
+import { AlwaysVisibleAttributesContext } from '../contexts/AllwaysVisibleAttributesContext';
 export var AttributesView = function (_a) {
-    var attributesCount = _a.attributesCount, pinnedAttributes = _a.pinnedAttributes, restProps = __rest(_a, ["attributesCount", "pinnedAttributes"]);
+    var attributesCount = _a.attributesCount, pinnedAttributes = _a.pinnedAttributes, _b = _a.alwaysVisible, alwaysVisible = _b === void 0 ? [] : _b, restProps = __rest(_a, ["attributesCount", "pinnedAttributes", "alwaysVisible"]);
     var mdmEntity = useMdmEntityWithDiff();
     var mdmMode = useMdmMode();
     var entity = restProps.entity || mdmEntity;
     var mode = restProps.mode || mdmMode;
-    return (React.createElement(EntityContext.Provider, { value: entity }, isViewMode(mode) ? (React.createElement(ReadOnlyAttributesView, __assign({}, restProps, { attributesCount: attributesCount, entity: entity }))) : (React.createElement(EditModeAttributesView, __assign({}, restProps, { mode: mode, pinnedAttributes: pinnedAttributes, entity: entity })))));
+    return (React.createElement(EntityContext.Provider, { value: entity },
+        React.createElement(AlwaysVisibleAttributesContext.Provider, { value: alwaysVisible }, isViewMode(mode) ? (React.createElement(ReadOnlyAttributesView, __assign({}, restProps, { attributesCount: attributesCount, entity: entity }))) : (React.createElement(EditModeAttributesView, __assign({}, restProps, { mode: mode, pinnedAttributes: pinnedAttributes, entity: entity }))))));
 };

package/esm/AttributesView/AttributesView.test.js

@@ -40,6 +40,20 @@ describe('AttributesView tests', function () {
                         name: 'FirstName',
                         label: 'First Name',
                         access: ['READ', 'CREATE', 'UPDATE', 'INITIATE_CHANGE_REQUEST']
+                    },
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/LastName',
+                        type: 'String',
+                        name: 'LastName',
+                        label: 'Last Name',
+                        access: ['READ', 'CREATE', 'UPDATE', 'INITIATE_CHANGE_REQUEST']
+                    },
+                    {
+                        uri: 'configuration/entityTypes/HCP/attributes/Phone',
+                        type: 'String',
+                        name: 'Phone',
+                        label: 'Phone',
+                        access: ['READ', 'CREATE', 'UPDATE', 'INITIATE_CHANGE_REQUEST']
                     }
                 ]
             }
@@ -86,4 +100,22 @@ describe('AttributesView tests', function () {
         setUp({ entity: entity }, __assign(__assign({}, mdmDefaultValues), { mode: Mode.Suggesting }));
         expect(screen.getByRole('textbox')).toHaveValue('nameValue');
     });
+    it('should render always visible attributes in read mode', function () {
+        var alwaysVisible = [
+            'configuration/entityTypes/HCP/attributes/LastName',
+            'configuration/entityTypes/HCP/attributes/Phone'
+        ];
+        setUp({ mode: Mode.Viewing, entity: entity, alwaysVisible: alwaysVisible });
+        expect(screen.getByText('Last Name')).toBeInTheDocument();
+        expect(screen.getByText('Phone')).toBeInTheDocument();
+    });
+    it('should render always visible attributes in editing mode', function () {
+        var alwaysVisible = [
+            'configuration/entityTypes/HCP/attributes/LastName',
+            'configuration/entityTypes/HCP/attributes/Phone'
+        ];
+        setUp({ mode: Mode.Editing, entity: entity, alwaysVisible: alwaysVisible });
+        expect(screen.getByText('Last Name')).toBeInTheDocument();
+        expect(screen.getByText('Phone')).toBeInTheDocument();
+    });
 });

package/esm/EditModeAttributesList/EditModeAttributesList.d.ts

@@ -10,7 +10,7 @@ declare const _default: React.ComponentType<{
     showEmptyEditors?: boolean;
     showNonOv?: boolean;
     className?: string;
-    alwaysVisibleTypeUris?: string[];
+    fixedTypeUris?: string[];
     highlightAttribute?: (element: AttributeType, type: ScrollType) => void;
 } & Pick<EditModeAttributesPagerProps<AttributeValue>, "mode" | "crosswalks" | "parentUri" | "drawLines" | "onAddAttributes" | "onDeleteAttribute" | "onChangeAttribute" | "additionalControlsRenderer" | "showEmptyEditors">>;
 export default _default;

package/esm/EditModeAttributesList/EditModeAttributesList.js

@@ -16,7 +16,7 @@ import { last, path } from 'ramda';
 import { EditModeAttributesPager } from '../EditModeAttributesPager';
 import { BranchDecorator } from '../BranchDecorator';
 import { MoreAttributesButton } from '../MoreAttributesButton';
-import { ALWAYS_VISIBLE_TYPE_URIS } from '../constants';
+import { FIXED_TYPE_URIS } from '../constants';
 import { splitPagersData } from '../helpers/attributesView';
 import { getMoreAttrTypes } from './helpers';
 import { PinnedAttributesContext } from '../contexts/PinnedAttributesContext';
@@ -25,11 +25,13 @@ import { withContext } from '../HOCs/withContext';
 import { ConfigPermissionsContext } from '../contexts/ConfigPermissionsContext';
 import { ScrollType, ScrollToElementContext } from '../contexts/ScrollToElementContext';
 import { HiddenAttributesContext } from '../contexts/HiddenAttributesContext';
+import { AlwaysVisibleAttributesContext } from '../contexts/AllwaysVisibleAttributesContext';
 var EditModeAttributesList = function (_a) {
-    var parentAttributeType = _a.parentAttributeType, attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.alwaysVisibleTypeUris, alwaysVisibleTypeUris = _b === void 0 ? ALWAYS_VISIBLE_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv, highlightAttribute = _a.highlightAttribute;
+    var parentAttributeType = _a.parentAttributeType, attrTypes = _a.attrTypes, entity = _a.entity, parentUri = _a.parentUri, showEmptyEditors = _a.showEmptyEditors, mode = _a.mode, crosswalks = _a.crosswalks, drawLines = _a.drawLines, children = _a.children, className = _a.className, _b = _a.fixedTypeUris, fixedTypeUris = _b === void 0 ? FIXED_TYPE_URIS : _b, onAddAttributes = _a.onAddAttributes, onChangeAttribute = _a.onChangeAttribute, onDeleteAttribute = _a.onDeleteAttribute, additionalControlsRenderer = _a.additionalControlsRenderer, showNonOv = _a.showNonOv, highlightAttribute = _a.highlightAttribute;
     var hiddenAttributes = useContext(HiddenAttributesContext);
     var entityUri = parentUri && getBaseUri(parentUri);
     var currentEntityHiddenAttributes = useMemo(function () { return hiddenAttributes[entityUri] || []; }, [hiddenAttributes, entityUri]);
+    var alwaysVisibleAttributes = useContext(AlwaysVisibleAttributesContext);
     var filteredAttrTypes = useMemo(function () { return attrTypes.filter(function (attrType) { return !currentEntityHiddenAttributes.includes(attrType.uri); }); }, [attrTypes, currentEntityHiddenAttributes]);
     var _c = entity.attributes, attributes = _c === void 0 ? {} : _c;
     var _d = useState({}), hasDeletionsMap = _d[0], setHasDeletionsMap = _d[1];
@@ -48,9 +50,18 @@ var EditModeAttributesList = function (_a) {
     var moreAttrTypes = getMoreAttrTypes(creatableAttrTypes, entity, showEmptyEditors, hasDeletionsMap);
     var pinnedAttributes = useContext(PinnedAttributesContext);
     var pagersData = useMemo(function () {
-        return getAttributesListForEditMode(filteredAttrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes, canCreate);
-    }, [filteredAttrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes, canCreate]);
-    var _e = useMemo(function () { return splitPagersData(alwaysVisibleTypeUris, pagersData); }, [pagersData, alwaysVisibleTypeUris]), alwaysVisiblePagersData = _e[0], regularPagersData = _e[1];
+        return getAttributesListForEditMode(filteredAttrTypes, mode, entity, showEmptyEditors, showNonOv, pinnedAttributes, canCreate, alwaysVisibleAttributes);
+    }, [
+        filteredAttrTypes,
+        mode,
+        entity,
+        showEmptyEditors,
+        showNonOv,
+        pinnedAttributes,
+        canCreate,
+        alwaysVisibleAttributes
+    ]);
+    var _e = useMemo(function () { return splitPagersData(fixedTypeUris, pagersData); }, [pagersData, fixedTypeUris]), fixedPagersData = _e[0], regularPagersData = _e[1];
     var onAddMoreAttributes = useCallback(function (attributeTypes) {
         onAddAttributes(attributeTypes.map(function (attributeType) { return ({
             attributeType: attributeType,
@@ -68,7 +79,7 @@ var EditModeAttributesList = function (_a) {
     return (React.createElement("div", { className: className },
         children && React.createElement(BranchDecorator, __assign({}, decoratorProps), children),
         React.createElement(BranchDecorator, __assign({}, decoratorProps, { plain: true }), moreAttrTypes.length > 0 && mode !== Mode.Viewing && (React.createElement(MoreAttributesButton, { label: i18n.text('More attributes'), onApply: onAddMoreAttributes, dense: drawLines, data: moreAttrTypes, parent: canCreateParentAttrType && parentAttributeType }))),
-        React.createElement(HasDeletionsContext.Provider, { value: hasDeletionsContextValue }, regularPagersData.concat(alwaysVisiblePagersData).map(function (_a) {
+        React.createElement(HasDeletionsContext.Provider, { value: hasDeletionsContextValue }, regularPagersData.concat(fixedPagersData).map(function (_a) {
             var attrType = _a.attrType, values = _a.values;
             return (React.createElement(EditModeAttributesPager, { key: "".concat(attrType.uri, "_").concat(parentUri), attributeType: attrType, drawLines: drawLines, values: values, paging: path(['paging', attrType.uri], attributes), parentUri: parentUri, showEmptyEditors: showEmptyEditors, mode: mode, crosswalks: crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute, additionalControlsRenderer: additionalControlsRenderer, showNonOv: showNonOv }));
         }))));

package/esm/EditModeAttributesList/EditModeAttributesList.test.js

@@ -348,6 +348,6 @@ describe('EditModeAttributesList tests', function () {
         mount(React.createElement(PinnedAttributesContext.Provider, { value: pinnedAttributes },
             React.createElement(EditModeAttributesList, { mode: Mode.Editing, attrTypes: attributesList, entity: entity, parentUri: parentUri },
                 React.createElement(Child, null))));
-        expect(getAttributesListForEditMode).toHaveBeenCalledWith(attributesList, Mode.Editing, entity, undefined, undefined, pinnedAttributes, true);
+        expect(getAttributesListForEditMode).toHaveBeenCalledWith(attributesList, Mode.Editing, entity, undefined, undefined, pinnedAttributes, true, []);
     });
 });

package/esm/EditModeAttributesPager/components/AttributeRenderer/AttributeRenderer.js

@@ -11,6 +11,7 @@ import { ShowMore } from '../../../ShowMore';
 import { EditModeAttribute } from '../../../EditModeAttributesFactory';
 import { CardinalityMessage } from '../../../CardinalityMessage';
 import { PinnedAttributesContext } from '../../../contexts/PinnedAttributesContext';
+import { AlwaysVisibleAttributesContext } from '../../../contexts/AllwaysVisibleAttributesContext';
 import { DescriptionIcon } from '../../../DescriptionIcon';
 import { ControlAttributeIcon } from '../../../ControlAttributeIcon';
 import { useScrollToAttribute } from '../../../hooks/useScrollToAttribute';
@@ -28,9 +29,11 @@ var AttributeRenderer = function (_a) {
     var _d = useScrollToAttributeError({ highlightedError: highlightedError }), errorRef = _d.ref, errorClassName = _d.errorClassName;
     var _e = useScrollToAttribute(highlightedAttribute), attributeRef = _e.ref, highlightedClassName = _e.highlightedClassName;
     var pinnedAttributes = useContext(PinnedAttributesContext);
+    var alwaysVisibleAttributes = useContext(AlwaysVisibleAttributesContext);
     var isPinned = useMemo(function () { return pinnedAttributes === null || pinnedAttributes === void 0 ? void 0 : pinnedAttributes.includes(attributeTypeUri); }, [attributeTypeUri, pinnedAttributes]);
+    var isAlwaysVisible = useMemo(function () { return alwaysVisibleAttributes === null || alwaysVisibleAttributes === void 0 ? void 0 : alwaysVisibleAttributes.includes(attributeTypeUri); }, [attributeTypeUri, alwaysVisibleAttributes]);
     var isEmptyValues = isEmptyValue(values);
-    var showEmpty = ((!hadDeletions && showEmptyEditors) || isRequired || isPinned) && isEmptyValues;
+    var showEmpty = ((!hadDeletions && showEmptyEditors) || isRequired || isPinned || isAlwaysVisible) && isEmptyValues;
     var controlAttributes = useMdmControlAttributes();
     var isControlAttribute = useMemo(function () { return controlAttributes.includes(attributeType.uri); }, [controlAttributes, attributeType.uri]);
     var emptyEditorValue = useRef(createNewAttribute({

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/constants/attributes.d.ts

@@ -1 +1 @@
-export declare const ALWAYS_VISIBLE_TYPE_URIS: string[];
+export declare const FIXED_TYPE_URIS: string[];

package/esm/constants/attributes.js

@@ -1,2 +1,2 @@
 import { EntityAttrTypes } from '@reltio/mdm-sdk';
-export var ALWAYS_VISIBLE_TYPE_URIS = [EntityAttrTypes.roles.uri, EntityAttrTypes.tags.uri];
+export var FIXED_TYPE_URIS = [EntityAttrTypes.roles.uri, EntityAttrTypes.tags.uri];

package/esm/constants/index.d.ts

@@ -1,6 +1,6 @@
 export { SortingType, QueryBuilderAttributeType } from './prop-types';
 export { COMMENTS_CONTAINER_VISIBILITY_AREA } from './classnames';
-export { ALWAYS_VISIBLE_TYPE_URIS } from './attributes';
+export { FIXED_TYPE_URIS } from './attributes';
 export { MAP_DRAWING_MODES, DEFAULT_GOOGLE_MAP_OPTIONS, DEFAULT_OVERLAY_OPTIONS, MAP_MINIMUM_SCALE_RADIUS } from './map';
 export { COMMON_TEXT_FIELD_PROPS } from './textField';
 export { POPUP_Z_INDEX } from './common';

package/esm/constants/index.js

@@ -1,6 +1,6 @@
 export { SortingType, QueryBuilderAttributeType } from './prop-types';
 export { COMMENTS_CONTAINER_VISIBILITY_AREA } from './classnames';
-export { ALWAYS_VISIBLE_TYPE_URIS } from './attributes';
+export { FIXED_TYPE_URIS } from './attributes';
 export { MAP_DRAWING_MODES, DEFAULT_GOOGLE_MAP_OPTIONS, DEFAULT_OVERLAY_OPTIONS, MAP_MINIMUM_SCALE_RADIUS } from './map';
 export { COMMON_TEXT_FIELD_PROPS } from './textField';
 export { POPUP_Z_INDEX } from './common';

package/esm/contexts/AllwaysVisibleAttributesContext/index.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const AlwaysVisibleAttributesContext: import("react").Context<string[]>;

package/esm/contexts/AllwaysVisibleAttributesContext/index.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+export var AlwaysVisibleAttributesContext = createContext([]);
+AlwaysVisibleAttributesContext.displayName = 'AlwaysVisibleAttributesContext';

package/esm/helpers/attributesView.d.ts

@@ -5,7 +5,7 @@ type PagersData = {
     attrType: AttributeType;
     values: (SimpleAttributeValue | NestedAttributeValue | ReferenceAttributeValue | string | number)[];
 };
-export declare const splitPagersData: (alwaysVisibleTypeUris: string[], pagersData: PagersData[]) => [PagersData[], PagersData[]];
+export declare const splitPagersData: (fixedTypeUris: string[], pagersData: PagersData[]) => [PagersData[], PagersData[]];
 export declare const attributeValueToEditorValue: (attributeValue: SimpleAttributeValue, { type }: DataTypeDefinition) => string | number | boolean | Date | {
     value: import("@reltio/mdm-sdk").PrimitiveValue;
     lookupCode: string;

package/esm/helpers/attributesView.js

@@ -13,8 +13,8 @@ export var getFilteredAttrTypes = function (metadata, type, includeUris, exclude
             return !excludeUris.includes(uri);
         });
 };
-export var splitPagersData = function (alwaysVisibleTypeUris, pagersData) {
-    return partition(pipe(path(['attrType', 'uri']), includes(__, alwaysVisibleTypeUris)), pagersData);
+export var splitPagersData = function (fixedTypeUris, pagersData) {
+    return partition(pipe(path(['attrType', 'uri']), includes(__, fixedTypeUris)), pagersData);
 };
 export var attributeValueToEditorValue = function (attributeValue, _a) {
     var type = _a.type;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1944",
+  "version": "1.4.1945",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
@@ -8,7 +8,7 @@
     "@fluentui/react-context-selector": "^9.1.26",
     "@react-google-maps/api": "2.7.0",
     "@react-sigma/core": "3.4.0",
-    "@reltio/mdm-sdk": "^1.4.1857",
+    "@reltio/mdm-sdk": "^1.4.1858",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
     "d3-hierarchy": "^2.0.0",