@reltio/components 1.4.1571 → 1.4.1573

package/cjs/components/BasicTableView/BasicTable/BasicTable.js

@@ -62,21 +62,32 @@ var RowCollapseContext_1 = require("./contexts/RowCollapseContext");
 var ramda_1 = require("ramda");
 var useCollapsibleTableRows_1 = __importDefault(require("./hooks/useCollapsibleTableRows"));
 var BasicTable = (0, react_1.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_1.default : _b, _c = _a.getRowCellHeight, getRowCellHeight = _c === void 0 ? defaultGetRowCellHeight_1.default : _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_1.default : _b, _c = _a.getRowCellHeight, getRowCellHeight = _c === void 0 ? defaultGetRowCellHeight_1.default : _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 = (0, react_1.useMemo)(function () { return (0, dataHelpers_1.getTableHeadData)(columnsData, filters, onFilter); }, [columnsData, filters, onFilter]);
     var _e = (0, useCollapsibleTableRows_1.default)({
         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 = (0, react_1.useCallback)(function () {
+        setTimeout(function () {
+            tableRowsData.forEach(function (_, index) {
+                if (!getIsRowCollapsed(index)) {
+                    toggleRowCollapse(index);
+                }
+            });
+        }, 0);
+    }, [getIsRowCollapsed, toggleRowCollapse, tableRowsData]);
     if (!tableHeadData.length) {
         return null;
     }
     return (react_1.default.createElement(RowCollapseContext_1.RowCollapseContext.Provider, { value: collapseContextValue },
         react_1.default.createElement(TableContext_1.TableContext.Provider, { value: context },
-            react_1.default.createElement(Table_1.default, __assign({ autosizing: autosizing, maxHeight: maxHeight, defaultRowHeight: 48 }, otherProps, { fixHead: tableRowsData.length > 0, headData: tableHeadData, rowsData: tableRowsData, sortField: (0, ramda_1.prop)('field', sorting), sortOrder: (0, ramda_1.prop)('order', sorting), onSort: onSort, headRowHeight: filters ? headRowHeight + styles_1.COLUMN_FILTER_HEIGHT : headRowHeight, ref: ref })))));
+            react_1.default.createElement(Table_1.default, __assign({ autosizing: autosizing, maxHeight: maxHeight, defaultRowHeight: 48, onStartDragRow: onStartDragRow }, otherProps, { fixHead: tableRowsData.length > 0, headData: tableHeadData, rowsData: tableRowsData, sortField: (0, ramda_1.prop)('field', sorting), sortOrder: (0, ramda_1.prop)('order', sorting), onSort: onSort, headRowHeight: filters ? headRowHeight + styles_1.COLUMN_FILTER_HEIGHT : headRowHeight, ref: ref })))));
 });
 exports.BasicTableType = {
     columnsData: prop_types_1.default.arrayOf(prop_types_2.ColumnDataType).isRequired,

package/cjs/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/cjs/components/BasicTableView/BasicTable/CellRenderer/CellRenderer.js

@@ -32,13 +32,14 @@ var RowCollapseContext_1 = require("../contexts/RowCollapseContext");
 var tableUtils_1 = require("react-components/dist/Table/tableUtils");
 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_1.default.createElement(RowCollapseContext_1.RowCollapseContext.Provider, { value: collapseContextValue },
-        react_1.default.createElement("div", __assign({}, otherProps, { style: { height: getRowHeight(rowIndex) } }), tableRowsData.length > 0 &&
+        react_1.default.createElement("div", __assign({}, otherProps, { style: { height: getRowHeight(rowData === null || rowData === void 0 ? void 0 : rowData.id) } }), tableRowsData.length > 0 &&
             (0, tableUtils_1.getCellContentFromRowsData)({
                 columnIndex: columnsData.findIndex((0, ramda_1.propEq)('id', columnId)),
                 headData: columnsData,
-                rowsData: tableRowsData,
-                rowIndex: rowIndex,
+                rowData: rowData,
+                id: rowData.id,
                 getHeightForSubRow: getHeightForSubRow
             }))));
 };

package/cjs/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/cjs/components/BasicTableView/BasicTable/helpers/dataHelpers.js

@@ -81,11 +81,13 @@ var applyValuesCountConstraint = function (maxValuesCount) {
         values: (0, ramda_1.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 = (0, ramda_1.always)(Infinity); }
-    return rowValues.map((0, ramda_1.pipe)(function (rowValue, rowIndex) {
-        return (0, ramda_1.pipe)(buildRowValues(rowValue), applyValuesCountConstraint(getRowMaxValuesCount(rowIndex)), calcRowSpans, calcHeights(columnsData, getRowCellHeight, rowIndex, rowValue), applyCellRenderer(columnsData, renderRowCell, rowIndex, rowValue))(columnsData);
-    }, (0, ramda_1.objOf)('data')));
+    if (getIdFromRowValue === void 0) { getIdFromRowValue = defaultGetIdFromRowValue; }
+    return rowValues.map(function (rowValue, rowIndex) {
+        return (0, ramda_1.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);
+    });
 };
 exports.getTableRowsData = getTableRowsData;
 var getTableHeadData = function (columnsData, filters, onFilter) {

package/cjs/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/cjs/components/BasicTableView/BasicTable/hooks/useBasicTableCellRenderer.js

@@ -10,25 +10,26 @@ var defaultGetRowCellHeight_1 = __importDefault(require("../helpers/defaultGetRo
 var ramda_1 = require("ramda");
 var useCollapsibleTableRows_1 = __importDefault(require("./useCollapsibleTableRows"));
 var useBasicTableCellRenderer = function (_a) {
-    var rowsData = _a.rowsData, columnsData = _a.columnsData, _b = _a.renderRowCell, renderRowCell = _b === void 0 ? defaultRenderRowCell_1.default : _b, _c = _a.getRowCellHeight, getRowCellHeight = _c === void 0 ? defaultGetRowCellHeight_1.default : _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_1.default : _b, _c = _a.getRowCellHeight, getRowCellHeight = _c === void 0 ? defaultGetRowCellHeight_1.default : _c, _d = _a.defaultRowHeight, defaultRowHeight = _d === void 0 ? 48 : _d, _e = _a.maxRowValuesCount, maxRowValuesCount = _e === void 0 ? Infinity : _e;
     var _f = (0, useCollapsibleTableRows_1.default)({
         rowsData: rowsData,
         columnsData: columnsData,
         renderRowCell: renderRowCell,
         getRowCellHeight: getRowCellHeight,
-        maxRowValuesCount: maxRowValuesCount
+        maxRowValuesCount: maxRowValuesCount,
+        getIdFromRowValue: getIdFromRowValue
     }), tableRowsData = _f.tableRowsData, collapseContextValue = _f.collapseContextValue;
     return (0, react_1.useMemo)(function () {
-        var rowHeightCache = tableRowsData.reduce(function (cache, rowData, rowIndex) {
-            var data = rowData.data;
-            cache[rowIndex] = (0, tableUtils_1.calculateRowHeight)(data, defaultRowHeight);
+        var rowHeightCache = tableRowsData.reduce(function (cache, rowData) {
+            var data = rowData.data, id = rowData.id;
+            cache[id] = (0, tableUtils_1.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 (0, ramda_1.pathOr)(0, heightPath, rowHeightCache);
         };
-        var getRowHeight = function (rowIndex) { return (0, ramda_1.pathOr)(0, [rowIndex, 'height'], rowHeightCache); };
+        var getRowHeight = function (rowId) { return (0, ramda_1.pathOr)(0, [rowId, 'height'], rowHeightCache); };
         return { getRowHeight: getRowHeight, collapseContextValue: collapseContextValue, getHeightForSubRow: getHeightForSubRow, tableRowsData: tableRowsData };
     }, [tableRowsData, defaultRowHeight, collapseContextValue]);
 };

package/cjs/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/cjs/components/BasicTableView/BasicTable/hooks/useCollapsibleTableRows.js

@@ -5,12 +5,12 @@ var ramda_1 = require("ramda");
 var dataHelpers_1 = require("../helpers/dataHelpers");
 var hooks_1 = require("../../../../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 = (0, react_1.useState)([]), expandedIndexes = _b[0], setExpandedIndexes = _b[1];
     var getRowMaxValuesCount = (0, react_1.useCallback)(function (rowIndex) {
         return expandedIndexes.includes(rowIndex) ? Infinity : maxRowValuesCount;
     }, [expandedIndexes, maxRowValuesCount]);
-    var tableRowsData = (0, react_1.useMemo)(function () { return (0, dataHelpers_1.getTableRowsData)(rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount); }, [rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount]);
+    var tableRowsData = (0, react_1.useMemo)(function () { return (0, dataHelpers_1.getTableRowsData)(rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount, getIdFromRowValue); }, [rowsData, columnsData, renderRowCell, getRowCellHeight, getRowMaxValuesCount, getIdFromRowValue]);
     var toggleRowCollapse = (0, react_1.useCallback)(function (rowIndex) {
         setExpandedIndexes(function (expandedIndexes) {
             var index = expandedIndexes.findIndex((0, ramda_1.equals)(rowIndex));

package/cjs/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/cjs/components/BasicTableView/BasicTable/hooks/useDynamicRowCellHeight.js

@@ -14,11 +14,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@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 = (0, react_1.useState)({}), rowCellHeightsMap = _a[0], setRowCellHeightsMap = _a[1];
     var rowCellHeightsMapCache = (0, react_1.useRef)({});
     var batchHeightUpdate = function (key, value) {

package/cjs/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/cjs/components/BasicTableView/RowCellAutoSizer/RowCellAutoSizer.js

@@ -44,7 +44,7 @@ var RowCellAutoSizer = function (_a) {
     var onChangeHeight = _a.onChangeHeight, cell = _a.children, cellProps = __rest(_a, ["onChangeHeight", "children"]);
     var cellRef = (0, react_1.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); };
     (0, hooks_1.useDidUpdateEffect)(adjustCellHeight, [rowValue.rawValue]);
     return (react_1.default.createElement("div", { ref: cellRef },

package/cjs/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/cjs/components/crosswalks/AttributesTable/AttributesTable.js

@@ -45,15 +45,20 @@ var mdm_module_1 = __importDefault(require("@reltio/mdm-module"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var BasicTableView_1 = require("../../BasicTableView");
 var BasicViewHeader_1 = __importDefault(require("../../BasicViewHeader/BasicViewHeader"));
+var CommonRowCellRenderer_1 = require("./cell-renderers/CommonRowCellRenderer");
 var helpers_1 = require("./helpers");
 var ramda_1 = require("ramda");
-var RowCellRenderer_1 = __importDefault(require("./cell-renderers/RowCellRenderer"));
 var LinearLoadIndicator_1 = __importDefault(require("../../LinearLoadIndicator/LinearLoadIndicator"));
 var ConfirmDeleteDialog_1 = __importDefault(require("../../ConfirmDeleteDialog/ConfirmDeleteDialog"));
 var ConfirmEditIgnoredDialog_1 = __importDefault(require("./ConfirmEditIgnoredDialog/ConfirmEditIgnoredDialog"));
 var core_1 = require("../../../core");
 var styles_1 = require("./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 ? helpers_1.DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? core_1.noop : _c, _d = _a.onPin, onPin = _d === void 0 ? core_1.noop : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? core_1.noop : _e, _f = _a.onEdit, onEdit = _f === void 0 ? core_1.noop : _f, _g = _a.onAdd, onAdd = _g === void 0 ? core_1.noop : _g, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? core_1.noop : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri;
     var styles = (0, styles_1.useStyles)();
@@ -84,9 +89,8 @@ var AttributesTable = function (_a) {
         crosswalksMap,
         activeSurvivorshipGroupUri
     ]);
-    var _l = (0, BasicTableView_1.useDynamicRowCellHeight)(), getDynamicRowCellHeight = _l.getDynamicRowCellHeight, changeRowCellHeight = _l.changeRowCellHeight;
-    var renderRowCell = (0, react_1.useCallback)(function (props) { return (react_1.default.createElement(BasicTableView_1.RowCellAutoSizer, __assign({ onChangeHeight: changeRowCellHeight }, props),
-        react_1.default.createElement(RowCellRenderer_1.default, __assign({}, props)))); }, [changeRowCellHeight]);
+    var _l = (0, BasicTableView_1.useDynamicRowCellHeight)(getRowCellKey), getDynamicRowCellHeight = _l.getDynamicRowCellHeight, changeRowCellHeight = _l.changeRowCellHeight;
+    var renderRowCell = (0, react_1.useCallback)(function (props) { return react_1.default.createElement(CommonRowCellRenderer_1.CommonRowCellRenderer, __assign({ changeRowCellHeight: changeRowCellHeight }, props)); }, [changeRowCellHeight]);
     var getRowCellHeight = (0, react_1.useCallback)((0, ramda_1.either)(getDynamicRowCellHeight, (0, ramda_1.always)(DEFAULT_ROW_HEIGHT)), [
         getDynamicRowCellHeight
     ]);
@@ -95,6 +99,9 @@ var AttributesTable = function (_a) {
     var handleEdit = (0, react_1.useCallback)(function (event) {
         event.attributeValue.ignored ? setPendingIgnoredEditing(event) : onEdit(event);
     }, [onEdit, setPendingIgnoredEditing]);
+    var handleReorderAttributeTypes = (0, react_1.useCallback)(function (oldPosition, newPosition) {
+        onSelectAttributeTypes((0, ramda_1.move)(oldPosition, newPosition, selectedAttributeTypes));
+    }, [onSelectAttributeTypes, selectedAttributeTypes]);
     var tableContext = (0, react_1.useMemo)(function () { return ({
         onDelete: setPendingDeletion,
         onPin: onPin,
@@ -124,7 +131,7 @@ var AttributesTable = function (_a) {
             react_1.default.createElement(BasicTableView_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.default, null),
-            react_1.default.createElement(BasicTableView_1.BasicTable, { fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, rowsData: rowsData, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })),
+            react_1.default.createElement(BasicTableView_1.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_1.default.createElement(ConfirmDeleteDialog_1.default, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: function () { return onDelete(pendingDeletion); } }),
         react_1.default.createElement(ConfirmEditIgnoredDialog_1.default, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
                 onIgnore({ attributeValue: pendingIgnoredEditing.attributeValue });

package/cjs/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/cjs/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/cjs/components/crosswalks/AttributesTable/cell-renderers/CommonRowCellRenderer.js

@@ -0,0 +1,41 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CommonRowCellRenderer = void 0;
+var react_1 = __importDefault(require("react"));
+var RowCellRenderer_1 = __importDefault(require("./RowCellRenderer"));
+// eslint-disable-next-line import/named
+var BasicTableView_1 = require("../../../BasicTableView");
+var CommonRowCellRenderer = function (_a) {
+    var changeRowCellHeight = _a.changeRowCellHeight, otherProps = __rest(_a, ["changeRowCellHeight"]);
+    if (otherProps.isDragLayer) {
+        return react_1.default.createElement(RowCellRenderer_1.default, __assign({}, otherProps, { someRowIsDragging: false }));
+    }
+    return (react_1.default.createElement(BasicTableView_1.RowCellAutoSizer, __assign({ onChangeHeight: changeRowCellHeight }, otherProps),
+        react_1.default.createElement(RowCellRenderer_1.default, __assign({}, otherProps))));
+};
+exports.CommonRowCellRenderer = CommonRowCellRenderer;

package/cjs/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/cjs/components/crosswalks/AttributesTable/cell-renderers/OvValuesRenderer.js

@@ -4,14 +4,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var Title_1 = __importDefault(require("../../../Title/Title"));
+var DragIndicator_1 = __importDefault(require("@material-ui/icons/DragIndicator"));
 var AttributeValuesBlock_1 = __importDefault(require("../../../attributes/readMode/AttributeValuesBlock/AttributeValuesBlock"));
+var Title_1 = __importDefault(require("../../../Title/Title"));
 var styles_1 = require("./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 = (0, styles_1.useStyles)();
     return (react_1.default.createElement("div", { className: styles.cellValueWrapper },
+        react_1.default.createElement("div", { ref: dragRef, className: styles.dragIndicator },
+            react_1.default.createElement(DragIndicator_1.default, { className: styles.dragIndicatorIcon })),
         react_1.default.createElement(Title_1.default, { className: styles.attributeTitle, label: attributeType.label }),
-        react_1.default.createElement(AttributeValuesBlock_1.default, { values: values, attributeType: attributeType, valueContainerClassName: styles.ovValue })));
+        !someRowIsDragging && (react_1.default.createElement(AttributeValuesBlock_1.default, { values: values, attributeType: attributeType, valueContainerClassName: styles.ovValue }))));
 };
 exports.default = OvValuesRenderer;

package/cjs/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/cjs/components/crosswalks/AttributesTable/cell-renderers/RowCellRenderer.js

@@ -29,9 +29,10 @@ var react_1 = __importDefault(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
 var styles_1 = require("./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 = (0, styles_1.useStyles)();
     var isFirstColumn = columnIndex === 0;
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.rowCell, isFirstColumn && styles.coloredCell), "data-reltio-id": "column-name-".concat(columnData.id) }, cell.values.map(function (value, index) { return (react_1.default.createElement(CellValueRenderer, __assign({ key: index, value: value }, otherProps))); })));
+    var shouldRenderCell = !someRowIsDragging || isFirstColumn;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.rowCell, isFirstColumn && styles.coloredCell), "data-reltio-id": "column-name-".concat(columnData.id) }, shouldRenderCell && (react_1.default.createElement(react_1.default.Fragment, null, cell.values.map(function (value, index) { return (react_1.default.createElement(CellValueRenderer, __assign({ key: index, value: value, someRowIsDragging: someRowIsDragging }, otherProps))); })))));
 };
 exports.default = RowCellRenderer;

package/cjs/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;

package/cjs/components/crosswalks/AttributesTable/cell-renderers/WinnerSourcesRenderer.d.ts

@@ -1,9 +1,7 @@
 /// <reference types="react" />
-import { CrosswalkBase } from '@reltio/mdm-sdk';
+import { WinnerSources } from '../../types';
 type Props = {
-    value: {
-        crosswalks: CrosswalkBase[];
-    };
+    value: WinnerSources;
 };
 declare const WinnerSourcesRenderer: ({ value: { crosswalks } }: Props) => JSX.Element;
 export default WinnerSourcesRenderer;

package/cjs/components/crosswalks/AttributesTable/cell-renderers/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"count" | "popupTitle" | "closeButton" | "headCell" | "sourceIcon" | "coloredCell" | "rowCell" | "cellValueWrapper" | "attributeTitle" | "ovValue" | "ruleType" | "ruleTypeLabel" | "rulePopup" | "popupItem" | "popupTitleWrapper" | "popupItemsWrapper" | "winnerSourceItemWrapper" | "winnerSourceItem" | "winnerSourceItemLabel">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"count" | "popupTitle" | "closeButton" | "headCell" | "dragIndicator" | "dragIndicatorIcon" | "sourceIcon" | "ruleType" | "coloredCell" | "rowCell" | "cellValueWrapper" | "attributeTitle" | "ovValue" | "ruleTypeLabel" | "rulePopup" | "popupItem" | "popupTitleWrapper" | "popupItemsWrapper" | "winnerSourceItemWrapper" | "winnerSourceItem" | "winnerSourceItemLabel">;

package/cjs/components/crosswalks/AttributesTable/cell-renderers/styles.js

@@ -27,10 +27,26 @@ exports.useStyles = (0, styles_1.makeStyles)(function (theme) { return ({
         overflow: 'hidden'
     },
     cellValueWrapper: {
+        position: 'relative',
         padding: '15px 15px 0 15px',
         '&:last-child': {
             paddingBottom: '15px'
-        }
+        },
+        '&:hover $dragIndicator': {
+            display: 'block'
+        },
+    },
+    dragIndicator: {
+        display: 'none',
+        position: 'absolute',
+        top: '15px',
+        left: 0,
+        cursor: 'grab'
+    },
+    dragIndicatorIcon: {
+        fill: theme.palette.text.secondary,
+        width: '14px',
+        height: '14px'
     },
     attributeTitle: {
         display: 'block',

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

@@ -1,6 +1,6 @@
-import { AttributeType, AttributeValue, Metadata, RecordAttributesType, SurvivorStrategy } from '@reltio/mdm-sdk';
+import { AttributeType, AttributeValue, Crosswalk, Metadata, RecordAttributesType } from '@reltio/mdm-sdk';
 import { CrosswalksMap } from '../../attributes/inline';
-import { CrosswalksByOwnerTypeMap } from '../types';
+import { CrosswalksByOwnerTypeMap, AttributesTableRowValue, RuleTypeValues } from '../types';
 export declare const COLUMNS_DATA: ({
     id: string;
     readonly label: string;
@@ -28,12 +28,7 @@ export declare const COLUMNS_DATA: ({
 })[];
 export declare const DEFAULT_VISIBLE_COLUMNS: string[];
 export declare const countAttributeValues: (type: string, values: AttributeValue[], crosswalksMap: CrosswalksMap) => number;
-export declare const getRuleTypeValues: (metadata: Metadata, attributeType: AttributeType, parentTypeUri: string, activeSurvivorshipGroupUri?: string) => {
-    ruleType: SurvivorStrategy;
-    sourcesUriOrder: any;
-    primaryAttributeUri: any;
-    comparisonAttributeUri: any;
-};
-export declare const getWinnerCrosswalks: (attributeValues: AttributeValue[], crosswalksMap: CrosswalksMap) => any;
+export declare const getRuleTypeValues: (metadata: Metadata, attributeType: AttributeType, parentTypeUri: string, activeSurvivorshipGroupUri?: string) => RuleTypeValues;
+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) => any[];
+export declare const getBasicTableRowsData: (metadata: Metadata, parentTypeUri: string, attrTypes: AttributeType[], columns: string[], crosswalksMap: CrosswalksByOwnerTypeMap, attributes: RecordAttributesType, activeSurvivorshipGroupUri?: string) => AttributesTableRowValue[];