@reltio/components 1.4.2250 → 1.4.2251

package/InlineAttributesPager/InlineAttributesPager.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useState } from 'react';
+import React, { useContext, useState } from 'react';
 import { propOr } from 'ramda';
 import { DataTypes } from '@reltio/mdm-sdk';
 import { ShowMore } from '../ShowMore';
@@ -29,10 +29,12 @@ import { InlineSimpleAttributesBlock } from './components/InlineSimpleAttributes
 import { InlineNestedAttributesBlock } from './components/InlineNestedAttributesBlock';
 import { InlineReferenceAttributesBlock } from './components/InlineReferenceAttributesBlock';
 import { InlineImageAttributesBlock } from './components/InlineImageAttributesBlock';
+import { AttributeValuesSortContext } from '../features/crosswalks/contexts/AttributeValuesSortContext';
 import { useStyles } from './styles';
 export var InlineAttributesPager = function (_a) {
     var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, _c = _a.paging, paging = _c === void 0 ? {} : _c, _d = _a.max, max = _d === void 0 ? Infinity : _d, props = __rest(_a, ["attributeType", "attributeValues", "paging", "max"]);
     var styles = useStyles();
+    var sortAttributeValuesForDisplay = useContext(AttributeValuesSortContext);
     var _e = useState(max), visibleValuesCount = _e[0], setVisibleValuesCount = _e[1];
     var totalValues = propOr(attributeValues.length, 'totalValues', paging);
     var hasPaging = max < totalValues;
@@ -44,7 +46,7 @@ export var InlineAttributesPager = function (_a) {
     var onShowLess = function () {
         setVisibleValuesCount(max);
     };
-    var shownValues = attributeValues.slice(0, visibleValuesCount);
+    var shownValues = sortAttributeValuesForDisplay(attributeValues).slice(0, visibleValuesCount);
     var hiddenValuesCount = totalValues - visibleValuesCount;
     var renderValues = function (values) {
         switch (attributeType.type) {

package/cjs/InlineAttributesPager/InlineAttributesPager.js

@@ -55,10 +55,12 @@ var InlineSimpleAttributesBlock_1 = require("./components/InlineSimpleAttributes
 var InlineNestedAttributesBlock_1 = require("./components/InlineNestedAttributesBlock");
 var InlineReferenceAttributesBlock_1 = require("./components/InlineReferenceAttributesBlock");
 var InlineImageAttributesBlock_1 = require("./components/InlineImageAttributesBlock");
+var AttributeValuesSortContext_1 = require("../features/crosswalks/contexts/AttributeValuesSortContext");
 var styles_1 = require("./styles");
 var InlineAttributesPager = function (_a) {
     var attributeType = _a.attributeType, _b = _a.attributeValues, attributeValues = _b === void 0 ? [] : _b, _c = _a.paging, paging = _c === void 0 ? {} : _c, _d = _a.max, max = _d === void 0 ? Infinity : _d, props = __rest(_a, ["attributeType", "attributeValues", "paging", "max"]);
     var styles = (0, styles_1.useStyles)();
+    var sortAttributeValuesForDisplay = (0, react_1.useContext)(AttributeValuesSortContext_1.AttributeValuesSortContext);
     var _e = (0, react_1.useState)(max), visibleValuesCount = _e[0], setVisibleValuesCount = _e[1];
     var totalValues = (0, ramda_1.propOr)(attributeValues.length, 'totalValues', paging);
     var hasPaging = max < totalValues;
@@ -70,7 +72,7 @@ var InlineAttributesPager = function (_a) {
     var onShowLess = function () {
         setVisibleValuesCount(max);
     };
-    var shownValues = attributeValues.slice(0, visibleValuesCount);
+    var shownValues = sortAttributeValuesForDisplay(attributeValues).slice(0, visibleValuesCount);
     var hiddenValuesCount = totalValues - visibleValuesCount;
     var renderValues = function (values) {
         switch (attributeType.type) {

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

@@ -55,6 +55,7 @@ var CommonRowCellRenderer_1 = require("./components/CommonRowCellRenderer");
 var LazyRenderer_1 = require("../../../LazyRenderer");
 var SyncedValueHeightsContext_1 = require("../../../contexts/SyncedValueHeightsContext");
 var SyncedExpandedAttributesContext_1 = require("../../../contexts/SyncedExpandedAttributesContext");
+var AttributeValuesSortContext_1 = require("../contexts/AttributeValuesSortContext");
 var styles_1 = require("./styles");
 var DEFAULT_ROW_HEIGHT = 68;
 var getIdFromRowValue = function (rowValue) { return rowValue.ovValues.attributeType.uri; };
@@ -149,9 +150,10 @@ var AttributesTable = function (_a) {
             react_1.default.createElement(ColumnsSettings_1.ColumnsSettings, { columnsData: helpers_1.COLUMNS_DATA, selectedColumns: visibleColumns, onChangeColumns: onChangeVisibleColumns })),
         react_1.default.createElement("div", { className: styles.tableContent },
             isLoading && react_1.default.createElement(LinearLoadIndicator_1.LinearLoadIndicator, null),
-            react_1.default.createElement(SyncedExpandedAttributesContext_1.SyncedExpandedAttributesProvider, null,
-                react_1.default.createElement(SyncedValueHeightsContext_1.SyncedValueHeightsProvider, null,
-                    react_1.default.createElement(BasicTable_1.BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })))),
+            react_1.default.createElement(AttributeValuesSortContext_1.AttributeValuesSortContext.Provider, { value: helpers_1.sortByPinIgnorePriority },
+                react_1.default.createElement(SyncedExpandedAttributesContext_1.SyncedExpandedAttributesProvider, null,
+                    react_1.default.createElement(SyncedValueHeightsContext_1.SyncedValueHeightsProvider, null,
+                        react_1.default.createElement(BasicTable_1.BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext }))))),
         react_1.default.createElement(ConfirmDeleteDialog_1.ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
         react_1.default.createElement(ConfirmEditIgnoredDialog_1.ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
                 if (pendingIgnoredEditing)

package/cjs/features/crosswalks/AttributesTable/AttributesTable.test-data.d.ts

@@ -37,3 +37,10 @@ export declare const selectedAttributeTypes: ({
     description?: undefined;
     attributes?: undefined;
 })[];
+export declare const createEntityWithTextFieldSortOrder: () => Entity;
+export declare const deepNestedDisplayOrderEntities: {
+    multipleTopLevelWithSortedChildrenInsidePinned(): Entity;
+};
+export declare const referenceDisplayOrderEntities: {
+    multipleTopLevelWithSortedAddressLinesInsidePinned(): Entity;
+};

package/cjs/features/crosswalks/AttributesTable/AttributesTable.test-data.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.selectedAttributeTypes = exports.createMetadata = exports.createEntityWithAllParticipationStatuses = exports.createEntity = void 0;
+exports.referenceDisplayOrderEntities = exports.deepNestedDisplayOrderEntities = exports.createEntityWithTextFieldSortOrder = exports.selectedAttributeTypes = exports.createMetadata = exports.createEntityWithAllParticipationStatuses = exports.createEntity = void 0;
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var createEntity = function (_a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.withAppliedSurvivorshipRules, withAppliedSurvivorshipRules = _c === void 0 ? false : _c;
@@ -292,6 +292,20 @@ var createMetadata = function () {
                 ]
             }
         ],
+        relationTypes: [
+            {
+                uri: 'configuration/relationTypes/HasAddress',
+                label: 'Has Address',
+                attributes: [
+                    {
+                        label: 'Address Line 1',
+                        name: 'AddressLine1',
+                        type: 'String',
+                        uri: 'configuration/relationTypes/HasAddress/attributes/AddressLine1'
+                    }
+                ]
+            }
+        ],
         survivorshipStrategies: [
             {
                 uri: 'configuration/survivorshipStrategies/LUD',
@@ -375,3 +389,72 @@ exports.selectedAttributeTypes = [
         ]
     }
 ];
+var withFlags = function (flags) { return (__assign(__assign({}, ((flags === null || flags === void 0 ? void 0 : flags.pin) ? { pin: true } : {})), ((flags === null || flags === void 0 ? void 0 : flags.ignored) ? { ignored: true } : {}))); };
+var createBaseEntityWithAttributes = function (attributes) {
+    var base = (0, exports.createEntity)();
+    return __assign(__assign({}, base), { attributes: __assign(__assign({}, base.attributes), attributes) });
+};
+var textFieldValue = function (suffix, value, flags) { return (__assign({ ov: true, type: 'configuration/entityTypes/HCP/attributes/TextField', uri: "entities/01L2n5z/attributes/TextField/".concat(suffix), value: value }, withFlags(flags))); };
+var createEntityWithTextFieldSortOrder = function () {
+    return createBaseEntityWithAttributes({
+        TextField: [
+            textFieldValue('sort-middle', 'value-middle'),
+            textFieldValue('sort-ignored', 'value-ignored', { ignored: true }),
+            textFieldValue('sort-pinned', 'value-pinned', { pin: true })
+        ]
+    });
+};
+exports.createEntityWithTextFieldSortOrder = createEntityWithTextFieldSortOrder;
+var deepNestedChild = function (parentSuffix, childSuffix, value, flags) { return (__assign({ type: 'configuration/entityTypes/HCP/attributes/DeepNested/attributes/FirstLevelNestedSub1', ov: true, value: value, uri: "entities/01L2n5z/attributes/DeepNested/".concat(parentSuffix, "/FirstLevelNestedSub1/").concat(childSuffix) }, withFlags(flags))); };
+var deepNestedParent = function (label, parentSuffix, children, flags) { return (__assign({ label: label, value: {
+        FirstLevelNestedSub1: children
+    }, ov: true, uri: "entities/01L2n5z/attributes/DeepNested/".concat(parentSuffix) }, withFlags(flags))); };
+exports.deepNestedDisplayOrderEntities = {
+    multipleTopLevelWithSortedChildrenInsidePinned: function () {
+        return createBaseEntityWithAttributes({
+            DeepNested: [
+                deepNestedParent('nested-middle', 'nested-middle', [deepNestedChild('nested-middle', 'v1', '1')]),
+                deepNestedParent('nested-ignored', 'nested-ignored', [deepNestedChild('nested-ignored', 'v2', '2')], {
+                    ignored: true
+                }),
+                deepNestedParent('nested-pinned', 'nested-pinned', [
+                    deepNestedChild('nested-pinned', 'sort-middle', 'simple-value-middle'),
+                    deepNestedChild('nested-pinned', 'sort-ignored', 'simple-value-ignored', { ignored: true }),
+                    deepNestedChild('nested-pinned', 'sort-pinned', 'simple-value-pinned', { pin: true })
+                ], { pin: true })
+            ]
+        });
+    }
+};
+var referenceAddress = function (label, parentSuffix, addressLineValues, flags) {
+    var parentUri = "entities/2Vek4DnE/attributes/Address/".concat(parentSuffix);
+    return __assign({ label: label, refEntity: {
+            objectURI: "entities/ref-".concat(parentSuffix),
+            type: 'configuration/entityTypes/Location',
+            crosswalks: []
+        }, refRelation: {
+            objectURI: "relations/ref-".concat(parentSuffix),
+            type: 'configuration/relationTypes/HasAddress',
+            crosswalks: []
+        }, uri: parentUri, value: {
+            AddressLine1: addressLineValues.map(function (_a) {
+                var suffix = _a.suffix, value = _a.value, flags = _a.flags;
+                return (__assign({ ov: true, type: 'configuration/entityTypes/Location/attributes/AddressLine1', uri: "".concat(parentUri, "/AddressLine1/").concat(suffix), value: value }, withFlags(flags)));
+            })
+        }, startObjectCrosswalks: [], ov: true }, withFlags(flags));
+};
+exports.referenceDisplayOrderEntities = {
+    multipleTopLevelWithSortedAddressLinesInsidePinned: function () {
+        return createBaseEntityWithAttributes({
+            Address: [
+                referenceAddress('ref-middle', 'ref-middle', [{ suffix: 'v1', value: 'a' }]),
+                referenceAddress('ref-ignored', 'ref-ignored', [{ suffix: 'v2', value: 'b' }], { ignored: true }),
+                referenceAddress('ref-pinned', 'ref-pinned', [
+                    { suffix: 'sort-middle', value: 'simple-value-middle' },
+                    { suffix: 'sort-ignored', value: 'simple-value-ignored', flags: { ignored: true } },
+                    { suffix: 'sort-pinned', value: 'simple-value-pinned', flags: { pin: true } }
+                ], { pin: true })
+            ]
+        });
+    }
+};

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

@@ -308,6 +308,127 @@ describe('attribute table tests', function () {
         expect((0, react_2.within)(react_2.screen.getAllByTestId('column-name-ruleType')[2]).getByText('Source system')).toBeInTheDocument();
         unmockTableSizing();
     });
+    it('should display TextField values in pinned, neutral, then ignored order in OV and values columns', function () {
+        var unmockTableSizing = (0, test_utils_1.mockBasicTableSizing)();
+        var entity = (0, AttributesTable_test_data_1.createEntityWithTextFieldSortOrder)();
+        var baseCw = crosswalksMap.entity['entities/01L2n5z/attributes/TextField/5noU1aB'];
+        var sortCrosswalksMap = {
+            entity: __assign(__assign({}, crosswalksMap.entity), { 'entities/01L2n5z/attributes/TextField/sort-middle': baseCw, 'entities/01L2n5z/attributes/TextField/sort-pinned': baseCw, 'entities/01L2n5z/attributes/TextField/sort-ignored': baseCw }),
+            relation: {}
+        };
+        setUp(__assign(__assign({}, defaultProps), { entity: entity, crosswalksMap: sortCrosswalksMap, selectedAttributeTypes: [AttributesTable_test_data_1.selectedAttributeTypes[0]], visibleColumns: ['ovValues', 'values'] }));
+        var ovCell = getCellByIndexes(0, 0);
+        var ovAttributeValueRoots = (0, react_2.within)(ovCell).getAllByTestId('reltio-attribute-value');
+        expect(ovAttributeValueRoots).toHaveLength(3);
+        expect(ovAttributeValueRoots[0]).toHaveTextContent('value-pinned');
+        expect(ovAttributeValueRoots[1]).toHaveTextContent('value-middle');
+        expect(ovAttributeValueRoots[2]).toHaveTextContent('value-ignored');
+        var valuesCell = getCellByIndexes(0, 1);
+        expect((0, react_2.within)(valuesCell).getByTestId('value-index-0')).toHaveTextContent('value-pinned');
+        expect((0, react_2.within)(valuesCell).getByTestId('value-index-1')).toHaveTextContent('value-middle');
+        expect((0, react_2.within)(valuesCell).getByTestId('value-index-2')).toHaveTextContent('value-ignored');
+        unmockTableSizing();
+    });
+    it('should display Nested attribute values in pinned, neutral, then ignored order in OV and values columns, and child values in that order within one nested parent', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, baseCw, nestedVisibleColumns, valuesColumnIndex, nestedCrosswalksMap, user, ovCell, ovLabels, valuesCell, pinnedNestedBlock, simpleWrapper;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    unmockTableSizing = (0, test_utils_1.mockBasicTableSizing)();
+                    baseCw = crosswalksMap.entity['entities/01L2n5z/attributes/TextField/5noU1aB'];
+                    nestedVisibleColumns = ['ovValues', 'values'];
+                    valuesColumnIndex = 1;
+                    nestedCrosswalksMap = {
+                        entity: __assign(__assign({}, crosswalksMap.entity), { 'entities/01L2n5z/attributes/DeepNested/nested-middle': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-ignored': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-pinned': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-middle/FirstLevelNestedSub1/v1': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-ignored/FirstLevelNestedSub1/v2': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-pinned/FirstLevelNestedSub1/sort-middle': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-pinned/FirstLevelNestedSub1/sort-ignored': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-pinned/FirstLevelNestedSub1/sort-pinned': baseCw }),
+                        relation: {}
+                    };
+                    user = setUp(__assign(__assign({}, defaultProps), { selectedAttributeTypes: [AttributesTable_test_data_1.selectedAttributeTypes[2]], visibleColumns: nestedVisibleColumns, entity: AttributesTable_test_data_1.deepNestedDisplayOrderEntities.multipleTopLevelWithSortedChildrenInsidePinned(), crosswalksMap: nestedCrosswalksMap })).user;
+                    ovCell = getCellByIndexes(0, 0);
+                    ovLabels = (0, react_2.within)(ovCell).getAllByTestId('reltio-attribute-complex-label');
+                    expect(ovLabels).toHaveLength(3);
+                    expect(ovLabels[0]).toHaveTextContent('nested-pinned');
+                    expect(ovLabels[1]).toHaveTextContent('nested-middle');
+                    expect(ovLabels[2]).toHaveTextContent('nested-ignored');
+                    valuesCell = getCellByIndexes(0, valuesColumnIndex);
+                    expect((0, react_2.within)(valuesCell).getByTestId('value-index-0')).toHaveTextContent('nested-pinned');
+                    expect((0, react_2.within)(valuesCell).getByTestId('value-index-1')).toHaveTextContent('nested-middle');
+                    expect((0, react_2.within)(valuesCell).getByTestId('value-index-2')).toHaveTextContent('nested-ignored');
+                    pinnedNestedBlock = (0, react_2.within)(valuesCell).getByTestId('value-index-0');
+                    return [4 /*yield*/, user.click((0, react_2.within)(pinnedNestedBlock).getByTestId('arrow-expand-button'))];
+                case 1:
+                    _a.sent();
+                    simpleWrapper = (0, react_2.within)(pinnedNestedBlock).getByTestId('simple-attributes-wrapper');
+                    expect((0, react_2.within)(simpleWrapper).getByTestId('value-index-0')).toHaveTextContent('simple-value-pinned');
+                    expect((0, react_2.within)(simpleWrapper).getByTestId('value-index-1')).toHaveTextContent('simple-value-middle');
+                    expect((0, react_2.within)(simpleWrapper).getByTestId('value-index-2')).toHaveTextContent('simple-value-ignored');
+                    unmockTableSizing();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    var relationCw = function (refUri, lineUri) { return [
+        {
+            uri: "".concat(refUri, "/crosswalks/cw"),
+            type: 'configuration/sources/Reltio',
+            value: '01L2n5z',
+            attributeURIs: [refUri, lineUri]
+        }
+    ]; };
+    var addressAttributeTypeWithRelationLine = __assign(__assign({}, AttributesTable_test_data_1.selectedAttributeTypes[3]), { referencedAttributeURIs: [
+            'configuration/entityTypes/Location/attributes/AddressLine1',
+            'configuration/relationTypes/HasAddress/attributes/AddressLine1'
+        ] });
+    it('should display Reference attribute values in pinned, neutral, then ignored order in OV and values columns, and AddressLine1 values in that order within one reference', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, refVisibleColumns, valuesColumnIndex, refMiddle, lineMiddleParent, refIgnored, lineIgnoredParent, refPinned, linePinnedSortMiddle, linePinnedSortIgnored, linePinnedSortPinned, relationMap, user, ovCell, ovLabels, valuesCell, pinnedReferenceBlock, simpleWrapper;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    unmockTableSizing = (0, test_utils_1.mockBasicTableSizing)();
+                    refVisibleColumns = ['ovValues', 'values'];
+                    valuesColumnIndex = 1;
+                    refMiddle = 'entities/2Vek4DnE/attributes/Address/ref-middle';
+                    lineMiddleParent = "".concat(refMiddle, "/AddressLine1/v1");
+                    refIgnored = 'entities/2Vek4DnE/attributes/Address/ref-ignored';
+                    lineIgnoredParent = "".concat(refIgnored, "/AddressLine1/v2");
+                    refPinned = 'entities/2Vek4DnE/attributes/Address/ref-pinned';
+                    linePinnedSortMiddle = "".concat(refPinned, "/AddressLine1/sort-middle");
+                    linePinnedSortIgnored = "".concat(refPinned, "/AddressLine1/sort-ignored");
+                    linePinnedSortPinned = "".concat(refPinned, "/AddressLine1/sort-pinned");
+                    relationMap = (_a = {},
+                        _a[refMiddle] = relationCw(refMiddle, lineMiddleParent),
+                        _a[lineMiddleParent] = relationCw(refMiddle, lineMiddleParent),
+                        _a[refIgnored] = relationCw(refIgnored, lineIgnoredParent),
+                        _a[lineIgnoredParent] = relationCw(refIgnored, lineIgnoredParent),
+                        _a[refPinned] = relationCw(refPinned, linePinnedSortMiddle),
+                        _a[linePinnedSortMiddle] = relationCw(refPinned, linePinnedSortMiddle),
+                        _a[linePinnedSortIgnored] = relationCw(refPinned, linePinnedSortIgnored),
+                        _a[linePinnedSortPinned] = relationCw(refPinned, linePinnedSortPinned),
+                        _a);
+                    user = setUp(__assign(__assign({}, defaultProps), { entity: AttributesTable_test_data_1.referenceDisplayOrderEntities.multipleTopLevelWithSortedAddressLinesInsidePinned(), crosswalksMap: __assign(__assign({}, crosswalksMap), { relation: relationMap }), selectedAttributeTypes: [addressAttributeTypeWithRelationLine], visibleColumns: refVisibleColumns })).user;
+                    ovCell = getCellByIndexes(0, 0);
+                    ovLabels = (0, react_2.within)(ovCell).getAllByTestId('reltio-attribute-complex-label');
+                    expect(ovLabels).toHaveLength(3);
+                    expect(ovLabels[0]).toHaveTextContent('ref-pinned');
+                    expect(ovLabels[1]).toHaveTextContent('ref-middle');
+                    expect(ovLabels[2]).toHaveTextContent('ref-ignored');
+                    valuesCell = getCellByIndexes(0, valuesColumnIndex);
+                    expect((0, react_2.within)(valuesCell).getByTestId('value-index-0')).toHaveTextContent('ref-pinned');
+                    expect((0, react_2.within)(valuesCell).getByTestId('value-index-1')).toHaveTextContent('ref-middle');
+                    expect((0, react_2.within)(valuesCell).getByTestId('value-index-2')).toHaveTextContent('ref-ignored');
+                    pinnedReferenceBlock = (0, react_2.within)(valuesCell).getByTestId('value-index-0');
+                    return [4 /*yield*/, user.click((0, react_2.within)(pinnedReferenceBlock).getByTestId('arrow-expand-button'))];
+                case 1:
+                    _b.sent();
+                    simpleWrapper = (0, react_2.within)(pinnedReferenceBlock).getByTestId('simple-attributes-wrapper');
+                    expect((0, react_2.within)(simpleWrapper).getByTestId('value-index-0')).toHaveTextContent('simple-value-pinned');
+                    expect((0, react_2.within)(simpleWrapper).getByTestId('value-index-1')).toHaveTextContent('simple-value-middle');
+                    expect((0, react_2.within)(simpleWrapper).getByTestId('value-index-2')).toHaveTextContent('simple-value-ignored');
+                    unmockTableSizing();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should render Source sequence after clicking view details button', function () { return __awaiter(void 0, void 0, void 0, function () {
         var unmockTableSizing, user;
         return __generator(this, function (_a) {
@@ -709,7 +830,7 @@ describe('attribute table tests', function () {
         }); });
     });
     it('should add attribute to beginning on simple attribute select', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onAdd, onSelectAttributeTypes, user, backdrop;
+        var onAdd, onSelectAttributeTypes, user, attributePickerPopup, backdrop;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -719,14 +840,17 @@ describe('attribute table tests', function () {
                     return [4 /*yield*/, user.click(react_2.screen.getByText('Attribute'))];
                 case 1:
                     _a.sent();
-                    expect(react_2.screen.queryByText('Image')).not.toBeInTheDocument();
-                    expect(react_2.screen.queryByText('Address')).not.toBeInTheDocument();
-                    return [4 /*yield*/, user.click(react_2.screen.getByText('String Label 2'))];
+                    return [4 /*yield*/, react_2.screen.findByPlaceholderText(/search/i)];
                 case 2:
+                    attributePickerPopup = (_a.sent()).closest('.MuiPaper-root');
+                    expect((0, react_2.within)(attributePickerPopup).queryByText('Image')).not.toBeInTheDocument();
+                    expect((0, react_2.within)(attributePickerPopup).queryByText('Address')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click((0, react_2.within)(attributePickerPopup).getByText('String Label 2'))];
+                case 3:
                     _a.sent();
                     backdrop = react_2.screen.getByRole('presentation').children[0];
                     return [4 /*yield*/, user.click(backdrop)];
-                case 3:
+                case 4:
                     _a.sent();
                     expect(onSelectAttributeTypes).toHaveBeenCalledWith(__spreadArray([
                         {

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

@@ -12,12 +12,15 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AttributeValuesRenderer = void 0;
+var react_1 = require("react");
 var ramda_1 = require("ramda");
 var AttributesFactory_1 = require("../AttributesFactory");
 var withTableContext_1 = require("../../../../../HOCs/withTableContext");
+var AttributeValuesSortContext_1 = require("../../../contexts/AttributeValuesSortContext");
 var AttributeValuesRenderer = function (_a) {
     var value = _a.value, onDelete = _a.onDelete, onEdit = _a.onEdit, onPin = _a.onPin, onIgnore = _a.onIgnore, onAdd = _a.onAdd, emptyTempAttributeUris = _a.emptyTempAttributeUris, parentUri = _a.parentUri, readOnly = _a.readOnly;
-    return AttributesFactory_1.AttributesFactory.build(value.attributeType.type, __assign(__assign({}, value), { parentUri: parentUri, onDelete: onDelete, onEdit: onEdit, onPin: onPin, onIgnore: onIgnore, onAdd: onAdd, emptyTempAttributeUris: emptyTempAttributeUris, disableEdit: readOnly, disableDelete: readOnly }));
+    var sortAttributeValuesForDisplay = (0, react_1.useContext)(AttributeValuesSortContext_1.AttributeValuesSortContext);
+    return AttributesFactory_1.AttributesFactory.build(value.attributeType.type, __assign(__assign({}, value), { attributeValues: sortAttributeValuesForDisplay(value.attributeValues), parentUri: parentUri, onDelete: onDelete, onEdit: onEdit, onPin: onPin, onIgnore: onIgnore, onAdd: onAdd, emptyTempAttributeUris: emptyTempAttributeUris, disableEdit: readOnly, disableDelete: readOnly }));
 };
 exports.AttributeValuesRenderer = AttributeValuesRenderer;
 exports.default = (0, withTableContext_1.withTableContext)((0, ramda_1.pick)(['onDelete', 'onPin', 'onIgnore', 'onEdit', 'onAdd', 'parentUri', 'readOnly', 'emptyTempAttributeUris']))(exports.AttributeValuesRenderer);

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

@@ -10,14 +10,38 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.OvValuesRenderer = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
+var AttributeValuesSortContext_1 = require("../../../contexts/AttributeValuesSortContext");
 var ReadOnlyAttributeValuesBlock_1 = require("../../../../../ReadOnlyAttributeValuesBlock");
 var AttributeTitle_1 = require("../../../../../AttributeTitle");
 var EntityContext_1 = require("../../../../../contexts/EntityContext");
@@ -31,11 +55,12 @@ var OvValuesRenderer = function (_a) {
     var styles = (0, styles_2.useStyles)();
     var commonStyles = (0, styles_1.useCommonStyles)();
     var entity = (0, MdmModuleContext_1.useMdmEntity)();
+    var sortAttributeValuesForDisplay = (0, react_1.useContext)(AttributeValuesSortContext_1.AttributeValuesSortContext);
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, commonStyles.basicCell) },
         react_1.default.createElement("div", __assign({}, draggableProps, { className: styles.dragIndicator }),
             react_1.default.createElement(DragIndicator_1.default, { className: styles.dragIndicatorIcon })),
         react_1.default.createElement(AttributeTitle_1.AttributeTitle, { className: styles.attributeTitle, label: attributeType.label }),
         !someRowIsDragging && (react_1.default.createElement(EntityContext_1.EntityContext.Provider, { value: entity },
-            react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.ReadOnlyAttributeValuesBlock, { values: values, attributeType: attributeType, valueContainerClassName: styles.ovValue, AttributeValueWrapper: SyncedValueHeight_1.ValueHeightReporter, FallbackSlot: FallbackIndicator_1.FallbackIndicator })))));
+            react_1.default.createElement(ReadOnlyAttributeValuesBlock_1.ReadOnlyAttributeValuesBlock, { values: sortAttributeValuesForDisplay(values), attributeType: attributeType, valueContainerClassName: styles.ovValue, AttributeValueWrapper: SyncedValueHeight_1.ValueHeightReporter, FallbackSlot: FallbackIndicator_1.FallbackIndicator })))));
 };
 exports.OvValuesRenderer = OvValuesRenderer;

package/cjs/features/crosswalks/AttributesTable/helpers.d.ts

@@ -1,7 +1,7 @@
 import { AppliedSurvivorshipRule, AttributeType, AttributeValue, Crosswalk, Metadata, OvDetails, RecordAttributesType } from '@reltio/mdm-sdk';
 import { CrosswalksMap } from '../../../types';
 import { CrosswalksByOwnerTypeMap } from '../types';
-import { AttributesTableRowValue } from './types';
+import { AttributesTableRowValue, SortAttributeValuesFn } from './types';
 export declare const COLUMNS_DATA: ({
     id: string;
     readonly label: string;
@@ -34,3 +34,4 @@ export declare const getFallbackLabels: (metadata: Metadata, ovDetails: OvDetail
 export declare const getWinnerCrosswalks: (attributeValues: AttributeValue[], crosswalksMap: CrosswalksMap) => Crosswalk[];
 export declare const getBasicTableColumnsData: any;
 export declare const getBasicTableRowsData: (metadata: Metadata, parentTypeUri: string, attrTypes: AttributeType[], columns: string[], crosswalksMap: CrosswalksByOwnerTypeMap, attributes: RecordAttributesType, activeSurvivorshipGroupUri?: string) => AttributesTableRowValue[];
+export declare const sortByPinIgnorePriority: SortAttributeValuesFn;

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

@@ -12,7 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBasicTableRowsData = exports.getBasicTableColumnsData = exports.getWinnerCrosswalks = exports.getFallbackLabels = exports.collectRuleNames = exports.countAttributeValues = exports.DEFAULT_VISIBLE_COLUMNS = exports.COLUMNS_DATA = void 0;
+exports.sortByPinIgnorePriority = exports.getBasicTableRowsData = exports.getBasicTableColumnsData = exports.getWinnerCrosswalks = exports.getFallbackLabels = exports.collectRuleNames = exports.countAttributeValues = exports.DEFAULT_VISIBLE_COLUMNS = exports.COLUMNS_DATA = void 0;
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
@@ -305,3 +305,14 @@ var getBasicTableRowsData = function (metadata, parentTypeUri, attrTypes, column
     });
 };
 exports.getBasicTableRowsData = getBasicTableRowsData;
+var getDisplayTier = function (v) {
+    if (v.pin)
+        return 0;
+    if (v.ignored)
+        return 2;
+    return 1;
+};
+var sortByPinIgnorePriority = function (values) {
+    return ((values && __spreadArray([], values, true)) || []).sort(function (a, b) { return getDisplayTier(a) - getDisplayTier(b); });
+};
+exports.sortByPinIgnorePriority = sortByPinIgnorePriority;

package/cjs/features/crosswalks/AttributesTable/types.d.ts

@@ -83,4 +83,5 @@ export type AttributesRendererProps = {
     onAdd: (event: AddInlineAttributeEvent) => void;
     emptyTempAttributeUris: string[];
 };
+export type SortAttributeValuesFn = (values: AttributeValue[]) => AttributeValue[];
 export {};

package/cjs/features/crosswalks/contexts/AttributeValuesSortContext.d.ts

@@ -0,0 +1,2 @@
+import { SortAttributeValuesFn } from '../AttributesTable/types';
+export declare const AttributeValuesSortContext: import("react").Context<SortAttributeValuesFn>;

package/cjs/features/crosswalks/contexts/AttributeValuesSortContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AttributeValuesSortContext = void 0;
+var react_1 = require("react");
+var ramda_1 = require("ramda");
+exports.AttributeValuesSortContext = (0, react_1.createContext)(ramda_1.identity);

package/features/crosswalks/AttributesTable/AttributesTable.js

@@ -21,12 +21,13 @@ import { BasicViewHeader } from '../../../BasicViewHeader';
 import { LinearLoadIndicator } from '../../../LinearLoadIndicator';
 import { ConfirmDeleteDialog } from '../../../ConfirmDeleteDialog';
 import { useMdmMetadata } from '../../../contexts/MdmModuleContext';
-import { COLUMNS_DATA, DEFAULT_VISIBLE_COLUMNS, getBasicTableColumnsData, getBasicTableRowsData } from './helpers';
+import { COLUMNS_DATA, DEFAULT_VISIBLE_COLUMNS, getBasicTableColumnsData, getBasicTableRowsData, sortByPinIgnorePriority } from './helpers';
 import { ConfirmEditIgnoredDialog } from './components/ConfirmEditIgnoredDialog';
 import { CommonRowCellRenderer } from './components/CommonRowCellRenderer';
 import { LazyRenderer } from '../../../LazyRenderer';
 import { SyncedValueHeightsProvider } from '../../../contexts/SyncedValueHeightsContext';
 import { SyncedExpandedAttributesProvider } from '../../../contexts/SyncedExpandedAttributesContext';
+import { AttributeValuesSortContext } from '../contexts/AttributeValuesSortContext';
 import { useStyles } from './styles';
 var DEFAULT_ROW_HEIGHT = 68;
 var getIdFromRowValue = function (rowValue) { return rowValue.ovValues.attributeType.uri; };
@@ -121,9 +122,10 @@ var AttributesTable = function (_a) {
             React.createElement(ColumnsSettings, { columnsData: COLUMNS_DATA, selectedColumns: visibleColumns, onChangeColumns: onChangeVisibleColumns })),
         React.createElement("div", { className: styles.tableContent },
             isLoading && React.createElement(LinearLoadIndicator, null),
-            React.createElement(SyncedExpandedAttributesProvider, null,
-                React.createElement(SyncedValueHeightsProvider, null,
-                    React.createElement(BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })))),
+            React.createElement(AttributeValuesSortContext.Provider, { value: sortByPinIgnorePriority },
+                React.createElement(SyncedExpandedAttributesProvider, null,
+                    React.createElement(SyncedValueHeightsProvider, null,
+                        React.createElement(BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext }))))),
         React.createElement(ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
         React.createElement(ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
                 if (pendingIgnoredEditing)

package/features/crosswalks/AttributesTable/AttributesTable.test-data.d.ts

@@ -37,3 +37,10 @@ export declare const selectedAttributeTypes: ({
     description?: undefined;
     attributes?: undefined;
 })[];
+export declare const createEntityWithTextFieldSortOrder: () => Entity;
+export declare const deepNestedDisplayOrderEntities: {
+    multipleTopLevelWithSortedChildrenInsidePinned(): Entity;
+};
+export declare const referenceDisplayOrderEntities: {
+    multipleTopLevelWithSortedAddressLinesInsidePinned(): Entity;
+};

package/features/crosswalks/AttributesTable/AttributesTable.test-data.js

@@ -287,6 +287,20 @@ export var createMetadata = function () {
                 ]
             }
         ],
+        relationTypes: [
+            {
+                uri: 'configuration/relationTypes/HasAddress',
+                label: 'Has Address',
+                attributes: [
+                    {
+                        label: 'Address Line 1',
+                        name: 'AddressLine1',
+                        type: 'String',
+                        uri: 'configuration/relationTypes/HasAddress/attributes/AddressLine1'
+                    }
+                ]
+            }
+        ],
         survivorshipStrategies: [
             {
                 uri: 'configuration/survivorshipStrategies/LUD',
@@ -369,3 +383,71 @@ export var selectedAttributeTypes = [
         ]
     }
 ];
+var withFlags = function (flags) { return (__assign(__assign({}, ((flags === null || flags === void 0 ? void 0 : flags.pin) ? { pin: true } : {})), ((flags === null || flags === void 0 ? void 0 : flags.ignored) ? { ignored: true } : {}))); };
+var createBaseEntityWithAttributes = function (attributes) {
+    var base = createEntity();
+    return __assign(__assign({}, base), { attributes: __assign(__assign({}, base.attributes), attributes) });
+};
+var textFieldValue = function (suffix, value, flags) { return (__assign({ ov: true, type: 'configuration/entityTypes/HCP/attributes/TextField', uri: "entities/01L2n5z/attributes/TextField/".concat(suffix), value: value }, withFlags(flags))); };
+export var createEntityWithTextFieldSortOrder = function () {
+    return createBaseEntityWithAttributes({
+        TextField: [
+            textFieldValue('sort-middle', 'value-middle'),
+            textFieldValue('sort-ignored', 'value-ignored', { ignored: true }),
+            textFieldValue('sort-pinned', 'value-pinned', { pin: true })
+        ]
+    });
+};
+var deepNestedChild = function (parentSuffix, childSuffix, value, flags) { return (__assign({ type: 'configuration/entityTypes/HCP/attributes/DeepNested/attributes/FirstLevelNestedSub1', ov: true, value: value, uri: "entities/01L2n5z/attributes/DeepNested/".concat(parentSuffix, "/FirstLevelNestedSub1/").concat(childSuffix) }, withFlags(flags))); };
+var deepNestedParent = function (label, parentSuffix, children, flags) { return (__assign({ label: label, value: {
+        FirstLevelNestedSub1: children
+    }, ov: true, uri: "entities/01L2n5z/attributes/DeepNested/".concat(parentSuffix) }, withFlags(flags))); };
+export var deepNestedDisplayOrderEntities = {
+    multipleTopLevelWithSortedChildrenInsidePinned: function () {
+        return createBaseEntityWithAttributes({
+            DeepNested: [
+                deepNestedParent('nested-middle', 'nested-middle', [deepNestedChild('nested-middle', 'v1', '1')]),
+                deepNestedParent('nested-ignored', 'nested-ignored', [deepNestedChild('nested-ignored', 'v2', '2')], {
+                    ignored: true
+                }),
+                deepNestedParent('nested-pinned', 'nested-pinned', [
+                    deepNestedChild('nested-pinned', 'sort-middle', 'simple-value-middle'),
+                    deepNestedChild('nested-pinned', 'sort-ignored', 'simple-value-ignored', { ignored: true }),
+                    deepNestedChild('nested-pinned', 'sort-pinned', 'simple-value-pinned', { pin: true })
+                ], { pin: true })
+            ]
+        });
+    }
+};
+var referenceAddress = function (label, parentSuffix, addressLineValues, flags) {
+    var parentUri = "entities/2Vek4DnE/attributes/Address/".concat(parentSuffix);
+    return __assign({ label: label, refEntity: {
+            objectURI: "entities/ref-".concat(parentSuffix),
+            type: 'configuration/entityTypes/Location',
+            crosswalks: []
+        }, refRelation: {
+            objectURI: "relations/ref-".concat(parentSuffix),
+            type: 'configuration/relationTypes/HasAddress',
+            crosswalks: []
+        }, uri: parentUri, value: {
+            AddressLine1: addressLineValues.map(function (_a) {
+                var suffix = _a.suffix, value = _a.value, flags = _a.flags;
+                return (__assign({ ov: true, type: 'configuration/entityTypes/Location/attributes/AddressLine1', uri: "".concat(parentUri, "/AddressLine1/").concat(suffix), value: value }, withFlags(flags)));
+            })
+        }, startObjectCrosswalks: [], ov: true }, withFlags(flags));
+};
+export var referenceDisplayOrderEntities = {
+    multipleTopLevelWithSortedAddressLinesInsidePinned: function () {
+        return createBaseEntityWithAttributes({
+            Address: [
+                referenceAddress('ref-middle', 'ref-middle', [{ suffix: 'v1', value: 'a' }]),
+                referenceAddress('ref-ignored', 'ref-ignored', [{ suffix: 'v2', value: 'b' }], { ignored: true }),
+                referenceAddress('ref-pinned', 'ref-pinned', [
+                    { suffix: 'sort-middle', value: 'simple-value-middle' },
+                    { suffix: 'sort-ignored', value: 'simple-value-ignored', flags: { ignored: true } },
+                    { suffix: 'sort-pinned', value: 'simple-value-pinned', flags: { pin: true } }
+                ], { pin: true })
+            ]
+        });
+    }
+};

package/features/crosswalks/AttributesTable/AttributesTable.test.js

@@ -62,7 +62,7 @@ import { mockDndKit } from '../../../test-utils/dndKit';
 import { DndContext } from '@dnd-kit/core';
 import { getMuiIconByName, getMuiIconsByName, mockBasicTableSizing } from '../../../test-utils';
 import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
-import { createEntity, createEntityWithAllParticipationStatuses, createMetadata, selectedAttributeTypes } from './AttributesTable.test-data';
+import { createEntity, createEntityWithAllParticipationStatuses, deepNestedDisplayOrderEntities, referenceDisplayOrderEntities, createEntityWithTextFieldSortOrder, createMetadata, selectedAttributeTypes } from './AttributesTable.test-data';
 import AttributesTable from './AttributesTable';
 jest.mock('@dnd-kit/core', function () { return mockDndKit; });
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { debounce: function (x) { return x; } })); });
@@ -303,6 +303,127 @@ describe('attribute table tests', function () {
         expect(within(screen.getAllByTestId('column-name-ruleType')[2]).getByText('Source system')).toBeInTheDocument();
         unmockTableSizing();
     });
+    it('should display TextField values in pinned, neutral, then ignored order in OV and values columns', function () {
+        var unmockTableSizing = mockBasicTableSizing();
+        var entity = createEntityWithTextFieldSortOrder();
+        var baseCw = crosswalksMap.entity['entities/01L2n5z/attributes/TextField/5noU1aB'];
+        var sortCrosswalksMap = {
+            entity: __assign(__assign({}, crosswalksMap.entity), { 'entities/01L2n5z/attributes/TextField/sort-middle': baseCw, 'entities/01L2n5z/attributes/TextField/sort-pinned': baseCw, 'entities/01L2n5z/attributes/TextField/sort-ignored': baseCw }),
+            relation: {}
+        };
+        setUp(__assign(__assign({}, defaultProps), { entity: entity, crosswalksMap: sortCrosswalksMap, selectedAttributeTypes: [selectedAttributeTypes[0]], visibleColumns: ['ovValues', 'values'] }));
+        var ovCell = getCellByIndexes(0, 0);
+        var ovAttributeValueRoots = within(ovCell).getAllByTestId('reltio-attribute-value');
+        expect(ovAttributeValueRoots).toHaveLength(3);
+        expect(ovAttributeValueRoots[0]).toHaveTextContent('value-pinned');
+        expect(ovAttributeValueRoots[1]).toHaveTextContent('value-middle');
+        expect(ovAttributeValueRoots[2]).toHaveTextContent('value-ignored');
+        var valuesCell = getCellByIndexes(0, 1);
+        expect(within(valuesCell).getByTestId('value-index-0')).toHaveTextContent('value-pinned');
+        expect(within(valuesCell).getByTestId('value-index-1')).toHaveTextContent('value-middle');
+        expect(within(valuesCell).getByTestId('value-index-2')).toHaveTextContent('value-ignored');
+        unmockTableSizing();
+    });
+    it('should display Nested attribute values in pinned, neutral, then ignored order in OV and values columns, and child values in that order within one nested parent', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, baseCw, nestedVisibleColumns, valuesColumnIndex, nestedCrosswalksMap, user, ovCell, ovLabels, valuesCell, pinnedNestedBlock, simpleWrapper;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    unmockTableSizing = mockBasicTableSizing();
+                    baseCw = crosswalksMap.entity['entities/01L2n5z/attributes/TextField/5noU1aB'];
+                    nestedVisibleColumns = ['ovValues', 'values'];
+                    valuesColumnIndex = 1;
+                    nestedCrosswalksMap = {
+                        entity: __assign(__assign({}, crosswalksMap.entity), { 'entities/01L2n5z/attributes/DeepNested/nested-middle': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-ignored': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-pinned': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-middle/FirstLevelNestedSub1/v1': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-ignored/FirstLevelNestedSub1/v2': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-pinned/FirstLevelNestedSub1/sort-middle': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-pinned/FirstLevelNestedSub1/sort-ignored': baseCw, 'entities/01L2n5z/attributes/DeepNested/nested-pinned/FirstLevelNestedSub1/sort-pinned': baseCw }),
+                        relation: {}
+                    };
+                    user = setUp(__assign(__assign({}, defaultProps), { selectedAttributeTypes: [selectedAttributeTypes[2]], visibleColumns: nestedVisibleColumns, entity: deepNestedDisplayOrderEntities.multipleTopLevelWithSortedChildrenInsidePinned(), crosswalksMap: nestedCrosswalksMap })).user;
+                    ovCell = getCellByIndexes(0, 0);
+                    ovLabels = within(ovCell).getAllByTestId('reltio-attribute-complex-label');
+                    expect(ovLabels).toHaveLength(3);
+                    expect(ovLabels[0]).toHaveTextContent('nested-pinned');
+                    expect(ovLabels[1]).toHaveTextContent('nested-middle');
+                    expect(ovLabels[2]).toHaveTextContent('nested-ignored');
+                    valuesCell = getCellByIndexes(0, valuesColumnIndex);
+                    expect(within(valuesCell).getByTestId('value-index-0')).toHaveTextContent('nested-pinned');
+                    expect(within(valuesCell).getByTestId('value-index-1')).toHaveTextContent('nested-middle');
+                    expect(within(valuesCell).getByTestId('value-index-2')).toHaveTextContent('nested-ignored');
+                    pinnedNestedBlock = within(valuesCell).getByTestId('value-index-0');
+                    return [4 /*yield*/, user.click(within(pinnedNestedBlock).getByTestId('arrow-expand-button'))];
+                case 1:
+                    _a.sent();
+                    simpleWrapper = within(pinnedNestedBlock).getByTestId('simple-attributes-wrapper');
+                    expect(within(simpleWrapper).getByTestId('value-index-0')).toHaveTextContent('simple-value-pinned');
+                    expect(within(simpleWrapper).getByTestId('value-index-1')).toHaveTextContent('simple-value-middle');
+                    expect(within(simpleWrapper).getByTestId('value-index-2')).toHaveTextContent('simple-value-ignored');
+                    unmockTableSizing();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+    var relationCw = function (refUri, lineUri) { return [
+        {
+            uri: "".concat(refUri, "/crosswalks/cw"),
+            type: 'configuration/sources/Reltio',
+            value: '01L2n5z',
+            attributeURIs: [refUri, lineUri]
+        }
+    ]; };
+    var addressAttributeTypeWithRelationLine = __assign(__assign({}, selectedAttributeTypes[3]), { referencedAttributeURIs: [
+            'configuration/entityTypes/Location/attributes/AddressLine1',
+            'configuration/relationTypes/HasAddress/attributes/AddressLine1'
+        ] });
+    it('should display Reference attribute values in pinned, neutral, then ignored order in OV and values columns, and AddressLine1 values in that order within one reference', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var unmockTableSizing, refVisibleColumns, valuesColumnIndex, refMiddle, lineMiddleParent, refIgnored, lineIgnoredParent, refPinned, linePinnedSortMiddle, linePinnedSortIgnored, linePinnedSortPinned, relationMap, user, ovCell, ovLabels, valuesCell, pinnedReferenceBlock, simpleWrapper;
+        var _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    unmockTableSizing = mockBasicTableSizing();
+                    refVisibleColumns = ['ovValues', 'values'];
+                    valuesColumnIndex = 1;
+                    refMiddle = 'entities/2Vek4DnE/attributes/Address/ref-middle';
+                    lineMiddleParent = "".concat(refMiddle, "/AddressLine1/v1");
+                    refIgnored = 'entities/2Vek4DnE/attributes/Address/ref-ignored';
+                    lineIgnoredParent = "".concat(refIgnored, "/AddressLine1/v2");
+                    refPinned = 'entities/2Vek4DnE/attributes/Address/ref-pinned';
+                    linePinnedSortMiddle = "".concat(refPinned, "/AddressLine1/sort-middle");
+                    linePinnedSortIgnored = "".concat(refPinned, "/AddressLine1/sort-ignored");
+                    linePinnedSortPinned = "".concat(refPinned, "/AddressLine1/sort-pinned");
+                    relationMap = (_a = {},
+                        _a[refMiddle] = relationCw(refMiddle, lineMiddleParent),
+                        _a[lineMiddleParent] = relationCw(refMiddle, lineMiddleParent),
+                        _a[refIgnored] = relationCw(refIgnored, lineIgnoredParent),
+                        _a[lineIgnoredParent] = relationCw(refIgnored, lineIgnoredParent),
+                        _a[refPinned] = relationCw(refPinned, linePinnedSortMiddle),
+                        _a[linePinnedSortMiddle] = relationCw(refPinned, linePinnedSortMiddle),
+                        _a[linePinnedSortIgnored] = relationCw(refPinned, linePinnedSortIgnored),
+                        _a[linePinnedSortPinned] = relationCw(refPinned, linePinnedSortPinned),
+                        _a);
+                    user = setUp(__assign(__assign({}, defaultProps), { entity: referenceDisplayOrderEntities.multipleTopLevelWithSortedAddressLinesInsidePinned(), crosswalksMap: __assign(__assign({}, crosswalksMap), { relation: relationMap }), selectedAttributeTypes: [addressAttributeTypeWithRelationLine], visibleColumns: refVisibleColumns })).user;
+                    ovCell = getCellByIndexes(0, 0);
+                    ovLabels = within(ovCell).getAllByTestId('reltio-attribute-complex-label');
+                    expect(ovLabels).toHaveLength(3);
+                    expect(ovLabels[0]).toHaveTextContent('ref-pinned');
+                    expect(ovLabels[1]).toHaveTextContent('ref-middle');
+                    expect(ovLabels[2]).toHaveTextContent('ref-ignored');
+                    valuesCell = getCellByIndexes(0, valuesColumnIndex);
+                    expect(within(valuesCell).getByTestId('value-index-0')).toHaveTextContent('ref-pinned');
+                    expect(within(valuesCell).getByTestId('value-index-1')).toHaveTextContent('ref-middle');
+                    expect(within(valuesCell).getByTestId('value-index-2')).toHaveTextContent('ref-ignored');
+                    pinnedReferenceBlock = within(valuesCell).getByTestId('value-index-0');
+                    return [4 /*yield*/, user.click(within(pinnedReferenceBlock).getByTestId('arrow-expand-button'))];
+                case 1:
+                    _b.sent();
+                    simpleWrapper = within(pinnedReferenceBlock).getByTestId('simple-attributes-wrapper');
+                    expect(within(simpleWrapper).getByTestId('value-index-0')).toHaveTextContent('simple-value-pinned');
+                    expect(within(simpleWrapper).getByTestId('value-index-1')).toHaveTextContent('simple-value-middle');
+                    expect(within(simpleWrapper).getByTestId('value-index-2')).toHaveTextContent('simple-value-ignored');
+                    unmockTableSizing();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
     it('should render Source sequence after clicking view details button', function () { return __awaiter(void 0, void 0, void 0, function () {
         var unmockTableSizing, user;
         return __generator(this, function (_a) {
@@ -704,7 +825,7 @@ describe('attribute table tests', function () {
         }); });
     });
     it('should add attribute to beginning on simple attribute select', function () { return __awaiter(void 0, void 0, void 0, function () {
-        var onAdd, onSelectAttributeTypes, user, backdrop;
+        var onAdd, onSelectAttributeTypes, user, attributePickerPopup, backdrop;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -714,14 +835,17 @@ describe('attribute table tests', function () {
                     return [4 /*yield*/, user.click(screen.getByText('Attribute'))];
                 case 1:
                     _a.sent();
-                    expect(screen.queryByText('Image')).not.toBeInTheDocument();
-                    expect(screen.queryByText('Address')).not.toBeInTheDocument();
-                    return [4 /*yield*/, user.click(screen.getByText('String Label 2'))];
+                    return [4 /*yield*/, screen.findByPlaceholderText(/search/i)];
                 case 2:
+                    attributePickerPopup = (_a.sent()).closest('.MuiPaper-root');
+                    expect(within(attributePickerPopup).queryByText('Image')).not.toBeInTheDocument();
+                    expect(within(attributePickerPopup).queryByText('Address')).not.toBeInTheDocument();
+                    return [4 /*yield*/, user.click(within(attributePickerPopup).getByText('String Label 2'))];
+                case 3:
                     _a.sent();
                     backdrop = screen.getByRole('presentation').children[0];
                     return [4 /*yield*/, user.click(backdrop)];
-                case 3:
+                case 4:
                     _a.sent();
                     expect(onSelectAttributeTypes).toHaveBeenCalledWith(__spreadArray([
                         {

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

@@ -9,11 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { useContext } from 'react';
 import { pick } from 'ramda';
 import { AttributesFactory } from '../AttributesFactory';
 import { withTableContext } from '../../../../../HOCs/withTableContext';
+import { AttributeValuesSortContext } from '../../../contexts/AttributeValuesSortContext';
 export var AttributeValuesRenderer = function (_a) {
     var value = _a.value, onDelete = _a.onDelete, onEdit = _a.onEdit, onPin = _a.onPin, onIgnore = _a.onIgnore, onAdd = _a.onAdd, emptyTempAttributeUris = _a.emptyTempAttributeUris, parentUri = _a.parentUri, readOnly = _a.readOnly;
-    return AttributesFactory.build(value.attributeType.type, __assign(__assign({}, value), { parentUri: parentUri, onDelete: onDelete, onEdit: onEdit, onPin: onPin, onIgnore: onIgnore, onAdd: onAdd, emptyTempAttributeUris: emptyTempAttributeUris, disableEdit: readOnly, disableDelete: readOnly }));
+    var sortAttributeValuesForDisplay = useContext(AttributeValuesSortContext);
+    return AttributesFactory.build(value.attributeType.type, __assign(__assign({}, value), { attributeValues: sortAttributeValuesForDisplay(value.attributeValues), parentUri: parentUri, onDelete: onDelete, onEdit: onEdit, onPin: onPin, onIgnore: onIgnore, onAdd: onAdd, emptyTempAttributeUris: emptyTempAttributeUris, disableEdit: readOnly, disableDelete: readOnly }));
 };
 export default withTableContext(pick(['onDelete', 'onPin', 'onIgnore', 'onEdit', 'onAdd', 'parentUri', 'readOnly', 'emptyTempAttributeUris']))(AttributeValuesRenderer);

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

@@ -9,9 +9,10 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import React from 'react';
+import React, { useContext } from 'react';
 import classnames from 'classnames';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import { AttributeValuesSortContext } from '../../../contexts/AttributeValuesSortContext';
 import { ReadOnlyAttributeValuesBlock } from '../../../../../ReadOnlyAttributeValuesBlock';
 import { AttributeTitle } from '../../../../../AttributeTitle';
 import { EntityContext } from '../../../../../contexts/EntityContext';
@@ -25,10 +26,11 @@ export var OvValuesRenderer = function (_a) {
     var styles = useStyles();
     var commonStyles = useCommonStyles();
     var entity = useMdmEntity();
+    var sortAttributeValuesForDisplay = useContext(AttributeValuesSortContext);
     return (React.createElement("div", { className: classnames(styles.root, commonStyles.basicCell) },
         React.createElement("div", __assign({}, draggableProps, { className: styles.dragIndicator }),
             React.createElement(DragIndicatorIcon, { className: styles.dragIndicatorIcon })),
         React.createElement(AttributeTitle, { className: styles.attributeTitle, label: attributeType.label }),
         !someRowIsDragging && (React.createElement(EntityContext.Provider, { value: entity },
-            React.createElement(ReadOnlyAttributeValuesBlock, { values: values, attributeType: attributeType, valueContainerClassName: styles.ovValue, AttributeValueWrapper: ValueHeightReporter, FallbackSlot: FallbackIndicator })))));
+            React.createElement(ReadOnlyAttributeValuesBlock, { values: sortAttributeValuesForDisplay(values), attributeType: attributeType, valueContainerClassName: styles.ovValue, AttributeValueWrapper: ValueHeightReporter, FallbackSlot: FallbackIndicator })))));
 };

package/features/crosswalks/AttributesTable/helpers.d.ts

@@ -1,7 +1,7 @@
 import { AppliedSurvivorshipRule, AttributeType, AttributeValue, Crosswalk, Metadata, OvDetails, RecordAttributesType } from '@reltio/mdm-sdk';
 import { CrosswalksMap } from '../../../types';
 import { CrosswalksByOwnerTypeMap } from '../types';
-import { AttributesTableRowValue } from './types';
+import { AttributesTableRowValue, SortAttributeValuesFn } from './types';
 export declare const COLUMNS_DATA: ({
     id: string;
     readonly label: string;
@@ -34,3 +34,4 @@ export declare const getFallbackLabels: (metadata: Metadata, ovDetails: OvDetail
 export declare const getWinnerCrosswalks: (attributeValues: AttributeValue[], crosswalksMap: CrosswalksMap) => Crosswalk[];
 export declare const getBasicTableColumnsData: any;
 export declare const getBasicTableRowsData: (metadata: Metadata, parentTypeUri: string, attrTypes: AttributeType[], columns: string[], crosswalksMap: CrosswalksByOwnerTypeMap, attributes: RecordAttributesType, activeSurvivorshipGroupUri?: string) => AttributesTableRowValue[];
+export declare const sortByPinIgnorePriority: SortAttributeValuesFn;

package/features/crosswalks/AttributesTable/helpers.js

@@ -294,3 +294,13 @@ export var getBasicTableRowsData = function (metadata, parentTypeUri, attrTypes,
         }, {}), assoc('rawValue', attrValues))(columns);
     });
 };
+var getDisplayTier = function (v) {
+    if (v.pin)
+        return 0;
+    if (v.ignored)
+        return 2;
+    return 1;
+};
+export var sortByPinIgnorePriority = function (values) {
+    return ((values && __spreadArray([], values, true)) || []).sort(function (a, b) { return getDisplayTier(a) - getDisplayTier(b); });
+};

package/features/crosswalks/AttributesTable/types.d.ts

@@ -83,4 +83,5 @@ export type AttributesRendererProps = {
     onAdd: (event: AddInlineAttributeEvent) => void;
     emptyTempAttributeUris: string[];
 };
+export type SortAttributeValuesFn = (values: AttributeValue[]) => AttributeValue[];
 export {};

package/features/crosswalks/contexts/AttributeValuesSortContext.d.ts

@@ -0,0 +1,2 @@
+import { SortAttributeValuesFn } from '../AttributesTable/types';
+export declare const AttributeValuesSortContext: import("react").Context<SortAttributeValuesFn>;

package/features/crosswalks/contexts/AttributeValuesSortContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+import { identity } from 'ramda';
+export var AttributeValuesSortContext = createContext(identity);

package/package.json

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