@reltio/components 1.4.1571 → 1.4.1573

package/cjs/components/crosswalks/types/AttributesTableData.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { AttributeType, AttributeValue, Crosswalk, SurvivorStrategy } from '@reltio/mdm-sdk';
+import { ColumnData, RenderRowCellProps } from '../../BasicTableView/types';
+import { CrosswalksMap } from '../../attributes/inline';
+export type RuleTypeValues = {
+    ruleType: SurvivorStrategy;
+    primaryAttributeUri?: string;
+    comparisonAttributeUri?: string;
+    sourcesUriOrder?: string[];
+};
+export type OvValues = {
+    attributeType: AttributeType;
+    values: AttributeValue[];
+};
+export type AttributeValues = {
+    attributeType: AttributeType;
+    attributeValues: AttributeValue[];
+    crosswalksMap: CrosswalksMap;
+};
+export type WinnerSources = {
+    crosswalks: Crosswalk[];
+};
+export type AttributesTableRowValue = {
+    count: number;
+    ovValues: OvValues;
+    rawValue: AttributeValue[];
+    ruleType?: RuleTypeValues;
+    values?: AttributeValues;
+    winnerSources?: WinnerSources;
+};
+export type AttributesTableColumnData = ColumnData & {
+    id: keyof AttributesTableRowValue;
+};
+export type GetRowCellKeyProps = {
+    rowValue: AttributesTableRowValue;
+    columnData: AttributesTableColumnData;
+    cellIndex: number;
+    rowIndex: number;
+};
+type CellValueRendererProps = {
+    value: unknown;
+    rowValue: AttributesTableRowValue;
+    [key: string]: unknown;
+};
+export type RowCellRendererProps = RenderRowCellProps & {
+    CellValueRenderer: (props: CellValueRendererProps) => JSX.Element;
+    columnData: AttributesTableColumnData;
+    rowValue: AttributesTableRowValue;
+};
+export {};

package/cjs/components/crosswalks/types/AttributesTableData.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/cjs/components/crosswalks/types/index.d.ts

@@ -5,3 +5,4 @@ export type { CrosswalksByTypes } from './CrosswalksByTypes';
 export type { AddCrosswalkEvent } from './AddCrosswalkEvent';
 export type { DeleteCrosswalkEvent } from './DeleteCrosswalkEvent';
 export type { EditCrosswalkEvent } from './EditCrosswalkEvent';
+export type { AttributesTableColumnData, AttributesTableRowValue, RuleTypeValues, GetRowCellKeyProps, RowCellRendererProps, AttributeValues, OvValues, WinnerSources } from './AttributesTableData';

package/esm/components/BasicTableView/BasicTable/BasicTable.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { useMemo, forwardRef } from 'react';
+import React, { useMemo, forwardRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import Table from 'react-components/dist/Table/Table';
 import defaultGetRowCellHeight from './helpers/defaultGetRowCellHeight';
@@ -33,21 +33,32 @@ import { RowCollapseContext } from './contexts/RowCollapseContext';
 import { prop } from 'ramda';
 import useCollapsibleTableRows from './hooks/useCollapsibleTableRows';
 var BasicTable = forwardRef(function (_a, ref) {
-    var columnsData = _a.columnsData, rowsData = _a.rowsData, context = _a.context, sorting = _a.sorting, onSort = _a.onSort, _b = _a.renderRowCell, renderRowCell = _b === void 0 ? defaultRenderRowCell : _b, _c = _a.getRowCellHeight, getRowCellHeight = _c === void 0 ? defaultGetRowCellHeight : _c, filters = _a.filters, onFilter = _a.onFilter, headRowHeight = _a.headRowHeight, _d = _a.maxRowValuesCount, maxRowValuesCount = _d === void 0 ? Infinity : _d, autosizing = _a.autosizing, maxHeight = _a.maxHeight, otherProps = __rest(_a, ["columnsData", "rowsData", "context", "sorting", "onSort", "renderRowCell", "getRowCellHeight", "filters", "onFilter", "headRowHeight", "maxRowValuesCount", "autosizing", "maxHeight"]);
+    var columnsData = _a.columnsData, rowsData = _a.rowsData, context = _a.context, sorting = _a.sorting, onSort = _a.onSort, _b = _a.renderRowCell, renderRowCell = _b === void 0 ? defaultRenderRowCell : _b, _c = _a.getRowCellHeight, getRowCellHeight = _c === void 0 ? defaultGetRowCellHeight : _c, filters = _a.filters, onFilter = _a.onFilter, headRowHeight = _a.headRowHeight, _d = _a.maxRowValuesCount, maxRowValuesCount = _d === void 0 ? Infinity : _d, autosizing = _a.autosizing, maxHeight = _a.maxHeight, getIdFromRowValue = _a.getIdFromRowValue, otherProps = __rest(_a, ["columnsData", "rowsData", "context", "sorting", "onSort", "renderRowCell", "getRowCellHeight", "filters", "onFilter", "headRowHeight", "maxRowValuesCount", "autosizing", "maxHeight", "getIdFromRowValue"]);
     var tableHeadData = useMemo(function () { return getTableHeadData(columnsData, filters, onFilter); }, [columnsData, filters, onFilter]);
     var _e = useCollapsibleTableRows({
         rowsData: rowsData,
         columnsData: columnsData,
         renderRowCell: renderRowCell,
         getRowCellHeight: getRowCellHeight,
-        maxRowValuesCount: maxRowValuesCount
+        maxRowValuesCount: maxRowValuesCount,
+        getIdFromRowValue: getIdFromRowValue
     }), tableRowsData = _e.tableRowsData, collapseContextValue = _e.collapseContextValue;
+    var toggleRowCollapse = collapseContextValue.toggleRowCollapse, getIsRowCollapsed = collapseContextValue.getIsRowCollapsed;
+    var onStartDragRow = useCallback(function () {
+        setTimeout(function () {
+            tableRowsData.forEach(function (_, index) {
+                if (!getIsRowCollapsed(index)) {
+                    toggleRowCollapse(index);
+                }
+            });
+        }, 0);
+    }, [getIsRowCollapsed, toggleRowCollapse, tableRowsData]);
     if (!tableHeadData.length) {
         return null;
     }
     return (React.createElement(RowCollapseContext.Provider, { value: collapseContextValue },
         React.createElement(TableContext.Provider, { value: context },
-            React.createElement(Table, __assign({ autosizing: autosizing, maxHeight: maxHeight, defaultRowHeight: 48 }, otherProps, { fixHead: tableRowsData.length > 0, headData: tableHeadData, rowsData: tableRowsData, sortField: prop('field', sorting), sortOrder: prop('order', sorting), onSort: onSort, headRowHeight: filters ? headRowHeight + COLUMN_FILTER_HEIGHT : headRowHeight, ref: ref })))));
+            React.createElement(Table, __assign({ autosizing: autosizing, maxHeight: maxHeight, defaultRowHeight: 48, onStartDragRow: onStartDragRow }, otherProps, { fixHead: tableRowsData.length > 0, headData: tableHeadData, rowsData: tableRowsData, sortField: prop('field', sorting), sortOrder: prop('order', sorting), onSort: onSort, headRowHeight: filters ? headRowHeight + COLUMN_FILTER_HEIGHT : headRowHeight, ref: ref })))));
 });
 export var BasicTableType = {
     columnsData: PropTypes.arrayOf(ColumnDataType).isRequired,

package/esm/components/BasicTableView/BasicTable/CellRenderer/CellRenderer.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-import { CollapseContext, ColumnData, TableRowsData } from '../../types';
+import { CollapseContext, ColumnData, RowId, TableRowsData } from '../../types';
 type Props = {
     columnId: string;
     rowIndex: number;
     collapseContextValue: CollapseContext;
-    getRowHeight: (rowIndex: number) => number;
-    getHeightForSubRow: (rowIndex: number, columnIndex: number, subRowIndex: number) => number;
+    getRowHeight: (rowId: RowId) => number;
+    getHeightForSubRow: (rowId: RowId, columnIndex: number, subRowIndex: number) => number;
     tableRowsData: TableRowsData;
     columnsData: ColumnData[];
 };

package/esm/components/BasicTableView/BasicTable/CellRenderer/CellRenderer.js

@@ -26,13 +26,14 @@ import { RowCollapseContext } from '../contexts/RowCollapseContext';
 import { getCellContentFromRowsData } from 'react-components/dist/Table/tableUtils';
 export var CellRenderer = function (_a) {
     var columnId = _a.columnId, rowIndex = _a.rowIndex, collapseContextValue = _a.collapseContextValue, getRowHeight = _a.getRowHeight, tableRowsData = _a.tableRowsData, columnsData = _a.columnsData, getHeightForSubRow = _a.getHeightForSubRow, otherProps = __rest(_a, ["columnId", "rowIndex", "collapseContextValue", "getRowHeight", "tableRowsData", "columnsData", "getHeightForSubRow"]);
+    var rowData = tableRowsData[rowIndex];
     return (React.createElement(RowCollapseContext.Provider, { value: collapseContextValue },
-        React.createElement("div", __assign({}, otherProps, { style: { height: getRowHeight(rowIndex) } }), tableRowsData.length > 0 &&
+        React.createElement("div", __assign({}, otherProps, { style: { height: getRowHeight(rowData === null || rowData === void 0 ? void 0 : rowData.id) } }), tableRowsData.length > 0 &&
             getCellContentFromRowsData({
                 columnIndex: columnsData.findIndex(propEq('id', columnId)),
                 headData: columnsData,
-                rowsData: tableRowsData,
-                rowIndex: rowIndex,
+                rowData: rowData,
+                id: rowData.id,
                 getHeightForSubRow: getHeightForSubRow
             }))));
 };

package/esm/components/BasicTableView/BasicTable/helpers/dataHelpers.d.ts

@@ -1,3 +1,3 @@
-export function getTableRowsData(rowValues: any, columnsData: any, renderRowCell: any, getRowCellHeight: any, getRowMaxValuesCount?: any): any;
+export function getTableRowsData(rowValues: any, columnsData: any, renderRowCell: any, getRowCellHeight: any, getRowMaxValuesCount?: any, getIdFromRowValue?: (_: any, rowIndex: any) => any): any;
 export function getTableHeadData(columnsData: any, filters: any, onFilter: any): any;
 export function getMaxRowValuesCount(columnsData: any, rowValue: any): any;

package/esm/components/BasicTableView/BasicTable/helpers/dataHelpers.js

@@ -12,7 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import DefaultCellValueRenderer from '../cell-value-renderers/DefaultCellValueRenderer';
 import withFilter from '../HOCs/withFilter';
 import { calcRowSpansForNestedKeys, flattenNestedColumnValues, getNestedKeyForNestedColumnCell, TOTAL_ROW_SPAN_KEY } from './nestedHelpers';
-import { add, always, assoc, chain, evolve, isEmpty, isNil, map, mapObjIndexed, max, objOf, pipe, pluck, prop, propEq, propOr, reduce, reject, slice, uniq, unless, values } from 'ramda';
+import { add, always, assoc, chain, evolve, isEmpty, isNil, map, mapObjIndexed, max, pipe, pluck, prop, propEq, propOr, reduce, reject, slice, uniq, unless, values } from 'ramda';
 import { wrapInArrayIfNeeded } from '@reltio/mdm-sdk';
 import DefaultHeadCellRenderer from 'react-components/dist/Table/DefaultHeadCellRenderer/DefaultHeadCellRenderer';
 import withFilterAtBottom from '../HOCs/withFilterAtBottom';
@@ -75,11 +75,13 @@ var applyValuesCountConstraint = function (maxValuesCount) {
         values: slice(0, maxValuesCount)
     })))));
 };
-var getTableRowsData = function (rowValues, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount) {
+var defaultGetIdFromRowValue = function (_, rowIndex) { return rowIndex; };
+var getTableRowsData = function (rowValues, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount, getIdFromRowValue) {
     if (getRowMaxValuesCount === void 0) { getRowMaxValuesCount = always(Infinity); }
-    return rowValues.map(pipe(function (rowValue, rowIndex) {
-        return pipe(buildRowValues(rowValue), applyValuesCountConstraint(getRowMaxValuesCount(rowIndex)), calcRowSpans, calcHeights(columnsData, getRowCellHeight, rowIndex, rowValue), applyCellRenderer(columnsData, renderRowCell, rowIndex, rowValue))(columnsData);
-    }, objOf('data')));
+    if (getIdFromRowValue === void 0) { getIdFromRowValue = defaultGetIdFromRowValue; }
+    return rowValues.map(function (rowValue, rowIndex) {
+        return pipe(buildRowValues(rowValue), applyValuesCountConstraint(getRowMaxValuesCount(rowIndex)), calcRowSpans, calcHeights(columnsData, getRowCellHeight, rowIndex, rowValue), applyCellRenderer(columnsData, renderRowCell, rowIndex, rowValue), function (val) { return ({ data: val, id: getIdFromRowValue(rowValue, rowIndex) }); })(columnsData);
+    });
 };
 var getTableHeadData = function (columnsData, filters, onFilter) {
     return columnsData.map(function (_a) {

package/esm/components/BasicTableView/BasicTable/hooks/useBasicTableCellRenderer.d.ts

@@ -1,26 +1,22 @@
-declare const useBasicTableCellRenderer: ({ rowsData, columnsData, renderRowCell, getRowCellHeight, defaultRowHeight, maxRowValuesCount }: {
-    rowsData: any;
-    columnsData: any;
-    renderRowCell?: ({ cell, CellValueRenderer, ...otherProps }: {
-        [x: string]: any;
-        cell: any;
-        CellValueRenderer: any;
-    }) => any;
-    getRowCellHeight?: ({ columnData, cell }: {
-        columnData: any;
-        cell: any;
-    }) => number;
+import { ElementsRowsData, ColumnData, RowValue, RenderRowCell, GetRowCellHeight, RowId } from '../../types';
+type Props = {
+    rowsData: ElementsRowsData;
+    columnsData: ColumnData[];
+    getIdFromRowValue?: (rowValue: RowValue, index?: number) => RowId;
+    renderRowCell?: RenderRowCell;
+    getRowCellHeight?: GetRowCellHeight;
     defaultRowHeight?: number;
     maxRowValuesCount?: number;
-}) => {
-    getRowHeight: (rowIndex: number) => number;
+};
+declare const useBasicTableCellRenderer: ({ rowsData, columnsData, getIdFromRowValue, renderRowCell, getRowCellHeight, defaultRowHeight, maxRowValuesCount }: Props) => {
+    getRowHeight: (rowId: RowId) => number;
     collapseContextValue: {
         maxRowValuesCount: number;
         toggleRowCollapse: (rowIndex: number) => void;
         getIsRowCollapsible: (rowValue: Record<string, unknown>) => boolean;
         getIsRowCollapsed: (rowIndex: number) => boolean;
     };
-    getHeightForSubRow: (rowIndex: any, columnIndex: any, subRowIndex: any) => any;
-    tableRowsData: import("../..").TableRowsData;
+    getHeightForSubRow: (rowId: RowId, columnIndex: number, subRowIndex: number) => any;
+    tableRowsData: import("../../types").TableRowsData;
 };
 export default useBasicTableCellRenderer;

package/esm/components/BasicTableView/BasicTable/hooks/useBasicTableCellRenderer.js

@@ -5,25 +5,26 @@ import defaultGetRowCellHeight from '../helpers/defaultGetRowCellHeight';
 import { pathOr } from 'ramda';
 import useCollapsibleTableRows from './useCollapsibleTableRows';
 var useBasicTableCellRenderer = function (_a) {
-    var rowsData = _a.rowsData, columnsData = _a.columnsData, _b = _a.renderRowCell, renderRowCell = _b === void 0 ? defaultRenderRowCell : _b, _c = _a.getRowCellHeight, getRowCellHeight = _c === void 0 ? defaultGetRowCellHeight : _c, _d = _a.defaultRowHeight, defaultRowHeight = _d === void 0 ? 48 : _d, _e = _a.maxRowValuesCount, maxRowValuesCount = _e === void 0 ? Infinity : _e;
+    var rowsData = _a.rowsData, columnsData = _a.columnsData, getIdFromRowValue = _a.getIdFromRowValue, _b = _a.renderRowCell, renderRowCell = _b === void 0 ? defaultRenderRowCell : _b, _c = _a.getRowCellHeight, getRowCellHeight = _c === void 0 ? defaultGetRowCellHeight : _c, _d = _a.defaultRowHeight, defaultRowHeight = _d === void 0 ? 48 : _d, _e = _a.maxRowValuesCount, maxRowValuesCount = _e === void 0 ? Infinity : _e;
     var _f = useCollapsibleTableRows({
         rowsData: rowsData,
         columnsData: columnsData,
         renderRowCell: renderRowCell,
         getRowCellHeight: getRowCellHeight,
-        maxRowValuesCount: maxRowValuesCount
+        maxRowValuesCount: maxRowValuesCount,
+        getIdFromRowValue: getIdFromRowValue
     }), tableRowsData = _f.tableRowsData, collapseContextValue = _f.collapseContextValue;
     return useMemo(function () {
-        var rowHeightCache = tableRowsData.reduce(function (cache, rowData, rowIndex) {
-            var data = rowData.data;
-            cache[rowIndex] = calculateRowHeight(data, defaultRowHeight);
+        var rowHeightCache = tableRowsData.reduce(function (cache, rowData) {
+            var data = rowData.data, id = rowData.id;
+            cache[id] = calculateRowHeight(data, defaultRowHeight);
             return cache;
         }, {});
-        var getHeightForSubRow = function (rowIndex, columnIndex, subRowIndex) {
-            var heightPath = [rowIndex, 'subRowHeight', columnIndex, subRowIndex, 'height'];
+        var getHeightForSubRow = function (rowId, columnIndex, subRowIndex) {
+            var heightPath = [rowId, 'subRowHeight', columnIndex, subRowIndex, 'height'];
             return pathOr(0, heightPath, rowHeightCache);
         };
-        var getRowHeight = function (rowIndex) { return pathOr(0, [rowIndex, 'height'], rowHeightCache); };
+        var getRowHeight = function (rowId) { return pathOr(0, [rowId, 'height'], rowHeightCache); };
         return { getRowHeight: getRowHeight, collapseContextValue: collapseContextValue, getHeightForSubRow: getHeightForSubRow, tableRowsData: tableRowsData };
     }, [tableRowsData, defaultRowHeight, collapseContextValue]);
 };

package/esm/components/BasicTableView/BasicTable/hooks/useCollapsibleTableRows.d.ts

@@ -1,12 +1,13 @@
-import { ColumnData, ElementsRowsData, GetRowCellHeight, RenderRowCell, TableRowsData } from '../../types';
+import { ColumnData, ElementsRowsData, GetRowCellHeight, RenderRowCell, RowValue, TableRowsData, RowId } from '../../types';
 type Props = {
     rowsData: ElementsRowsData;
     columnsData: ColumnData[];
     renderRowCell: RenderRowCell;
     getRowCellHeight: GetRowCellHeight;
     maxRowValuesCount: number;
+    getIdFromRowValue?: (rowValue: RowValue, rowIndex: number) => RowId;
 };
-declare const useCollapsibleTableRows: ({ rowsData, columnsData, renderRowCell, getRowCellHeight, maxRowValuesCount }: Props) => {
+declare const useCollapsibleTableRows: ({ rowsData, columnsData, renderRowCell, getRowCellHeight, maxRowValuesCount, getIdFromRowValue }: Props) => {
     tableRowsData: TableRowsData;
     collapseContextValue: {
         maxRowValuesCount: number;

package/esm/components/BasicTableView/BasicTable/hooks/useCollapsibleTableRows.js

@@ -3,12 +3,12 @@ import { equals, filter, remove } from 'ramda';
 import { getTableRowsData, getMaxRowValuesCount } from '../helpers/dataHelpers';
 import { useDidUpdateEffect, usePrevious } from '../../../../hooks';
 var useCollapsibleTableRows = function (_a) {
-    var rowsData = _a.rowsData, columnsData = _a.columnsData, renderRowCell = _a.renderRowCell, getRowCellHeight = _a.getRowCellHeight, maxRowValuesCount = _a.maxRowValuesCount;
+    var rowsData = _a.rowsData, columnsData = _a.columnsData, renderRowCell = _a.renderRowCell, getRowCellHeight = _a.getRowCellHeight, maxRowValuesCount = _a.maxRowValuesCount, getIdFromRowValue = _a.getIdFromRowValue;
     var _b = useState([]), expandedIndexes = _b[0], setExpandedIndexes = _b[1];
     var getRowMaxValuesCount = useCallback(function (rowIndex) {
         return expandedIndexes.includes(rowIndex) ? Infinity : maxRowValuesCount;
     }, [expandedIndexes, maxRowValuesCount]);
-    var tableRowsData = useMemo(function () { return getTableRowsData(rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount); }, [rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount]);
+    var tableRowsData = useMemo(function () { return getTableRowsData(rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount, getIdFromRowValue); }, [rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount, getIdFromRowValue]);
     var toggleRowCollapse = useCallback(function (rowIndex) {
         setExpandedIndexes(function (expandedIndexes) {
             var index = expandedIndexes.findIndex(equals(rowIndex));

package/esm/components/BasicTableView/BasicTable/hooks/useDynamicRowCellHeight.d.ts

@@ -1,6 +1,13 @@
-export default useDynamicRowCellHeight;
-declare function useDynamicRowCellHeight(): {
+import { ColumnData, RowValue } from '../../types';
+type GetRowCellKeyProps = {
+    rowIndex: number;
+    cellIndex: number;
+    columnData: ColumnData;
+    rowValue: RowValue;
+};
+declare const useDynamicRowCellHeight: (getRowCellKey?: ({ rowIndex, columnData: { id }, cellIndex }: GetRowCellKeyProps) => string) => {
     getDynamicRowCellHeight: any;
     changeRowCellHeight: any;
     clearHeightsCache: () => void;
 };
+export default useDynamicRowCellHeight;

package/esm/components/BasicTableView/BasicTable/hooks/useDynamicRowCellHeight.js

@@ -12,11 +12,12 @@ var __assign = (this && this.__assign) || function () {
 import { useCallback, useRef, useState } from 'react';
 import { __, curry, identity, pipe, prop, useWith, equals } from 'ramda';
 import { debounce } from '@reltio/mdm-sdk';
-var getRowCellKey = function (_a) {
+var defaultGetRowCellKey = function (_a) {
     var rowIndex = _a.rowIndex, id = _a.columnData.id, cellIndex = _a.cellIndex;
     return "".concat(id, "[").concat(rowIndex, "][").concat(cellIndex, "]");
 };
-var useDynamicRowCellHeight = function () {
+var useDynamicRowCellHeight = function (getRowCellKey) {
+    if (getRowCellKey === void 0) { getRowCellKey = defaultGetRowCellKey; }
     var _a = useState({}), rowCellHeightsMap = _a[0], setRowCellHeightsMap = _a[1];
     var rowCellHeightsMapCache = useRef({});
     var batchHeightUpdate = function (key, value) {

package/esm/components/BasicTableView/RowCellAutoSizer/RowCellAutoSizer.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
-import { ColumnData, RenderRowCellProps } from '../types';
+import { ColumnData, RenderRowCellProps, RowValue } from '../types';
 type OnChangeHeightProps = {
     rowIndex: number;
     cellIndex: number;
     columnData: ColumnData;
+    rowValue: RowValue;
 };
 type Props = {
     onChangeHeight: (props: OnChangeHeightProps) => (size: number) => void;

package/esm/components/BasicTableView/RowCellAutoSizer/RowCellAutoSizer.js

@@ -16,7 +16,7 @@ var RowCellAutoSizer = function (_a) {
     var onChangeHeight = _a.onChangeHeight, cell = _a.children, cellProps = __rest(_a, ["onChangeHeight", "children"]);
     var cellRef = useRef();
     var rowValue = cellProps.rowValue, rowIndex = cellProps.rowIndex, columnData = cellProps.columnData, cellIndex = cellProps.cellIndex;
-    var changeCellHeight = onChangeHeight({ rowIndex: rowIndex, cellIndex: cellIndex, columnData: columnData });
+    var changeCellHeight = onChangeHeight({ rowIndex: rowIndex, cellIndex: cellIndex, columnData: columnData, rowValue: rowValue });
     var adjustCellHeight = function () { return cellRef.current && changeCellHeight(cellRef.current.clientHeight); };
     useDidUpdateEffect(adjustCellHeight, [rowValue.rawValue]);
     return (React.createElement("div", { ref: cellRef },

package/esm/components/BasicTableView/types/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
 import { DataTypeDefinition } from '@reltio/mdm-sdk';
 import useCollapsibleTableRows from '../BasicTable/hooks/useCollapsibleTableRows';
 export type Sorting = {
@@ -33,6 +33,7 @@ export type ColumnData = {
     [key: string]: unknown;
 };
 export type CollapseContext = ReturnType<typeof useCollapsibleTableRows>['collapseContextValue'];
+export type RowId = string | number;
 export type RowValue = {
     rawValue: unknown;
     [key: string]: unknown;
@@ -46,18 +47,20 @@ export type TableRowsData = Array<{
         rowSpan?: number;
         values: React.ReactNode;
     }[]>;
+    id?: RowId;
 }>;
+type RowCell = {
+    values: unknown[];
+    rowSpan: number;
+    height: number;
+};
 type GetRowCellHeightArg = {
     columnIndex: number;
     columnData: ColumnData;
     rowIndex: number;
     rowValue: RowValue;
     cellIndex: number;
-    cell: {
-        values: unknown[];
-        rowSpan: number;
-        height: number;
-    };
+    cell: RowCell;
 };
 export type GetRowCellHeight = ({ columnIndex, columnData, rowIndex, rowValue, cellIndex, cell }: GetRowCellHeightArg) => number;
 export type RenderRowCellProps = {
@@ -66,7 +69,7 @@ export type RenderRowCellProps = {
     rowIndex: number;
     rowValue: RowValue;
     cellIndex: number;
-    cell: ReactNode;
+    cell: RowCell;
     CellValueRenderer: (props: unknown) => JSX.Element;
 };
 export type RenderRowCell = ({ columnIndex, columnData, rowIndex, rowValue, cellIndex, cell, CellValueRenderer }: RenderRowCellProps) => JSX.Element;

package/esm/components/crosswalks/AttributesTable/AttributesTable.js

@@ -15,17 +15,22 @@ import classnames from 'classnames';
 import i18n from 'ui-i18n';
 import mdmModule from '@reltio/mdm-module';
 import { findAttributeTypeByUri, isReadableAttribute, makeAttrTypeUri } from '@reltio/mdm-sdk';
-import { BasicTable, ColumnsSettings, RowCellAutoSizer, useDynamicRowCellHeight } from '../../BasicTableView';
+import { BasicTable, ColumnsSettings, useDynamicRowCellHeight } from '../../BasicTableView';
 import BasicViewHeader from '../../BasicViewHeader/BasicViewHeader';
+import { CommonRowCellRenderer } from './cell-renderers/CommonRowCellRenderer';
 import { COLUMNS_DATA, DEFAULT_VISIBLE_COLUMNS, getBasicTableColumnsData, getBasicTableRowsData } from './helpers';
-import { always, either, filter, isNil, keys, map, pipe, without, identity, both } from 'ramda';
-import RowCellRenderer from './cell-renderers/RowCellRenderer';
+import { always, either, filter, isNil, keys, map, pipe, without, identity, both, move } from 'ramda';
 import LinearLoadIndicator from '../../LinearLoadIndicator/LinearLoadIndicator';
 import ConfirmDeleteDialog from '../../ConfirmDeleteDialog/ConfirmDeleteDialog';
 import ConfirmEditIgnoredDialog from './ConfirmEditIgnoredDialog/ConfirmEditIgnoredDialog';
 import { noop } from '../../../core';
 import { useStyles } from './styles';
 var DEFAULT_ROW_HEIGHT = 68;
+var getIdFromRowValue = function (rowValue) { return rowValue.ovValues.attributeType.uri; };
+var getRowCellKey = function (_a) {
+    var id = _a.columnData.id, cellIndex = _a.cellIndex, rowValue = _a.rowValue;
+    return "".concat(id, "[").concat(getIdFromRowValue(rowValue), "][").concat(cellIndex, "]");
+};
 var AttributesTable = function (_a) {
     var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? noop : _c, _d = _a.onPin, onPin = _d === void 0 ? noop : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? noop : _e, _f = _a.onEdit, onEdit = _f === void 0 ? noop : _f, _g = _a.onAdd, onAdd = _g === void 0 ? noop : _g, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? noop : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri;
     var styles = useStyles();
@@ -56,9 +61,8 @@ var AttributesTable = function (_a) {
         crosswalksMap,
         activeSurvivorshipGroupUri
     ]);
-    var _l = useDynamicRowCellHeight(), getDynamicRowCellHeight = _l.getDynamicRowCellHeight, changeRowCellHeight = _l.changeRowCellHeight;
-    var renderRowCell = useCallback(function (props) { return (React.createElement(RowCellAutoSizer, __assign({ onChangeHeight: changeRowCellHeight }, props),
-        React.createElement(RowCellRenderer, __assign({}, props)))); }, [changeRowCellHeight]);
+    var _l = useDynamicRowCellHeight(getRowCellKey), getDynamicRowCellHeight = _l.getDynamicRowCellHeight, changeRowCellHeight = _l.changeRowCellHeight;
+    var renderRowCell = useCallback(function (props) { return React.createElement(CommonRowCellRenderer, __assign({ changeRowCellHeight: changeRowCellHeight }, props)); }, [changeRowCellHeight]);
     var getRowCellHeight = useCallback(either(getDynamicRowCellHeight, always(DEFAULT_ROW_HEIGHT)), [
         getDynamicRowCellHeight
     ]);
@@ -67,6 +71,9 @@ var AttributesTable = function (_a) {
     var handleEdit = useCallback(function (event) {
         event.attributeValue.ignored ? setPendingIgnoredEditing(event) : onEdit(event);
     }, [onEdit, setPendingIgnoredEditing]);
+    var handleReorderAttributeTypes = useCallback(function (oldPosition, newPosition) {
+        onSelectAttributeTypes(move(oldPosition, newPosition, selectedAttributeTypes));
+    }, [onSelectAttributeTypes, selectedAttributeTypes]);
     var tableContext = useMemo(function () { return ({
         onDelete: setPendingDeletion,
         onPin: onPin,
@@ -96,7 +103,7 @@ var AttributesTable = function (_a) {
             React.createElement(ColumnsSettings, { columnsData: COLUMNS_DATA, selectedColumns: visibleColumns, onChangeColumns: onChangeVisibleColumns })),
         React.createElement("div", { className: styles.tableContent },
             isLoading && React.createElement(LinearLoadIndicator, null),
-            React.createElement(BasicTable, { fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, rowsData: rowsData, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })),
+            React.createElement(BasicTable, { fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: true, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })),
         React.createElement(ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: function () { return onDelete(pendingDeletion); } }),
         React.createElement(ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
                 onIgnore({ attributeValue: pendingIgnoredEditing.attributeValue });

package/esm/components/crosswalks/AttributesTable/cell-renderers/AttributeValuesRenderer.d.ts

@@ -1,12 +1,8 @@
 /// <reference types="react" />
-import { AttributeType, AttributeValue } from '@reltio/mdm-sdk';
-import { AddInlineAttributeEvent, CrosswalksMap, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../../../attributes/inline';
+import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../../../attributes/inline';
+import { AttributeValues } from '../../types';
 type Props = {
-    value: {
-        attributeValues?: AttributeValue[];
-        attributeType: AttributeType;
-        crosswalksMap: CrosswalksMap;
-    };
+    value: AttributeValues;
     onDelete: (event: DeleteInlineAttributeEvent) => void;
     onEdit: (event: EditInlineAttributeEvent) => void;
     onPin: (event: PinInlineAttributeEvent) => void;

package/esm/components/crosswalks/AttributesTable/cell-renderers/CommonRowCellRenderer.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { RowCellAutoSizer } from '../../../BasicTableView';
+import { RowCellRendererProps } from '../../types';
+type RowCellAutoSizerProps = React.ComponentProps<typeof RowCellAutoSizer>;
+type Props = {
+    changeRowCellHeight: RowCellAutoSizerProps['onChangeHeight'];
+    someRowIsDragging?: boolean;
+    dragRef?: boolean;
+    isDragLayer?: boolean;
+} & RowCellRendererProps;
+export declare const CommonRowCellRenderer: ({ changeRowCellHeight, ...otherProps }: Props) => JSX.Element;
+export {};

package/esm/components/crosswalks/AttributesTable/cell-renderers/CommonRowCellRenderer.js

@@ -0,0 +1,34 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import RowCellRenderer from './RowCellRenderer';
+// eslint-disable-next-line import/named
+import { RowCellAutoSizer } from '../../../BasicTableView';
+export var CommonRowCellRenderer = function (_a) {
+    var changeRowCellHeight = _a.changeRowCellHeight, otherProps = __rest(_a, ["changeRowCellHeight"]);
+    if (otherProps.isDragLayer) {
+        return React.createElement(RowCellRenderer, __assign({}, otherProps, { someRowIsDragging: false }));
+    }
+    return (React.createElement(RowCellAutoSizer, __assign({ onChangeHeight: changeRowCellHeight }, otherProps),
+        React.createElement(RowCellRenderer, __assign({}, otherProps))));
+};

package/esm/components/crosswalks/AttributesTable/cell-renderers/OvValuesRenderer.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { AttributeType, AttributeValue } from '@reltio/mdm-sdk';
+import React from 'react';
+import { OvValues } from '../../types';
 type Props = {
-    value: {
-        values?: AttributeValue[];
-        attributeType: AttributeType;
-    };
+    value: OvValues;
+    someRowIsDragging?: boolean;
+    dragRef?: React.Ref<HTMLDivElement>;
 };
-declare const OvValuesRenderer: ({ value: { values, attributeType } }: Props) => JSX.Element;
+declare const OvValuesRenderer: ({ value: { values, attributeType }, someRowIsDragging, dragRef }: Props) => JSX.Element;
 export default OvValuesRenderer;

package/esm/components/crosswalks/AttributesTable/cell-renderers/OvValuesRenderer.js

@@ -1,12 +1,15 @@
 import React from 'react';
-import AttributeTitle from '../../../Title/Title';
+import DragIndicatorIcon from '@material-ui/icons/DragIndicator';
 import ReadOnlyAttributeValuesBlock from '../../../attributes/readMode/AttributeValuesBlock/AttributeValuesBlock';
+import AttributeTitle from '../../../Title/Title';
 import { useStyles } from './styles';
 var OvValuesRenderer = function (_a) {
-    var _b = _a.value, values = _b.values, attributeType = _b.attributeType;
+    var _b = _a.value, values = _b.values, attributeType = _b.attributeType, someRowIsDragging = _a.someRowIsDragging, dragRef = _a.dragRef;
     var styles = useStyles();
     return (React.createElement("div", { className: styles.cellValueWrapper },
+        React.createElement("div", { ref: dragRef, className: styles.dragIndicator },
+            React.createElement(DragIndicatorIcon, { className: styles.dragIndicatorIcon })),
         React.createElement(AttributeTitle, { className: styles.attributeTitle, label: attributeType.label }),
-        React.createElement(ReadOnlyAttributeValuesBlock, { values: values, attributeType: attributeType, valueContainerClassName: styles.ovValue })));
+        !someRowIsDragging && (React.createElement(ReadOnlyAttributeValuesBlock, { values: values, attributeType: attributeType, valueContainerClassName: styles.ovValue }))));
 };
 export default OvValuesRenderer;

package/esm/components/crosswalks/AttributesTable/cell-renderers/RowCellRenderer.d.ts

@@ -1,12 +1,9 @@
-import React from 'react';
-import { ColumnData } from '../../../BasicTableView';
+/// <reference types="react" />
+import { RowCellRendererProps } from '../../types';
 type Props = {
-    cell: {
-        values: unknown[];
-    };
-    columnData: ColumnData;
-    CellValueRenderer: React.ElementType;
-    columnIndex: number;
-};
-declare const RowCellRenderer: ({ cell, CellValueRenderer, columnIndex, columnData, ...otherProps }: Props) => JSX.Element;
+    someRowIsDragging?: boolean;
+    dragRef?: boolean;
+    isDragLayer?: boolean;
+} & RowCellRendererProps;
+declare const RowCellRenderer: ({ cell, CellValueRenderer, columnIndex, columnData, someRowIsDragging, ...otherProps }: Props) => JSX.Element;
 export default RowCellRenderer;

package/esm/components/crosswalks/AttributesTable/cell-renderers/RowCellRenderer.js

@@ -24,9 +24,10 @@ import React from 'react';
 import classnames from 'classnames';
 import { useStyles } from './styles';
 var RowCellRenderer = function (_a) {
-    var cell = _a.cell, CellValueRenderer = _a.CellValueRenderer, columnIndex = _a.columnIndex, columnData = _a.columnData, otherProps = __rest(_a, ["cell", "CellValueRenderer", "columnIndex", "columnData"]);
+    var cell = _a.cell, CellValueRenderer = _a.CellValueRenderer, columnIndex = _a.columnIndex, columnData = _a.columnData, someRowIsDragging = _a.someRowIsDragging, otherProps = __rest(_a, ["cell", "CellValueRenderer", "columnIndex", "columnData", "someRowIsDragging"]);
     var styles = useStyles();
     var isFirstColumn = columnIndex === 0;
-    return (React.createElement("div", { className: classnames(styles.rowCell, isFirstColumn && styles.coloredCell), "data-reltio-id": "column-name-".concat(columnData.id) }, cell.values.map(function (value, index) { return (React.createElement(CellValueRenderer, __assign({ key: index, value: value }, otherProps))); })));
+    var shouldRenderCell = !someRowIsDragging || isFirstColumn;
+    return (React.createElement("div", { className: classnames(styles.rowCell, isFirstColumn && styles.coloredCell), "data-reltio-id": "column-name-".concat(columnData.id) }, shouldRenderCell && (React.createElement(React.Fragment, null, cell.values.map(function (value, index) { return (React.createElement(CellValueRenderer, __assign({ key: index, value: value, someRowIsDragging: someRowIsDragging }, otherProps))); })))));
 };
 export default RowCellRenderer;

package/esm/components/crosswalks/AttributesTable/cell-renderers/RuleTypeRenderer.d.ts

@@ -1,12 +1,7 @@
 /// <reference types="react" />
-import { SurvivorStrategy } from '@reltio/mdm-sdk';
+import { RuleTypeValues } from '../../types';
 type Props = {
-    value: {
-        ruleType: SurvivorStrategy;
-        sourcesUriOrder?: string[];
-        primaryAttributeUri?: string;
-        comparisonAttributeUri?: string;
-    };
+    value: RuleTypeValues;
 };
 declare const RuleTypeRenderer: ({ value: { ruleType, sourcesUriOrder, primaryAttributeUri, comparisonAttributeUri } }: Props) => JSX.Element;
 export default RuleTypeRenderer;