@reltio/components 1.4.2018 → 1.4.2019

package/cjs/VerticalHeadingsTable/components/TableRow/TableRow.js

@@ -9,14 +9,14 @@ var TableCell_1 = require("../TableCell");
 var TableCellWithDnd_1 = require("../TableCellWithDnd");
 var TableHeadCell_1 = require("../TableHeadCell");
 var TableRow = function (_a) {
-    var rowData = _a.rowData, columnsData = _a.columnsData, index = _a.index, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
+    var rowData = _a.rowData, columnsData = _a.columnsData, index = _a.index, isMoveColumnEnabled = _a.isMoveColumnEnabled, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
     var isFirstRow = index === 0;
     return (react_1.default.createElement("tr", { className: rowData.rowClassName },
-        react_1.default.createElement(TableHeadCell_1.TableHeadCell, { rowData: rowData, isDraggable: false }),
+        react_1.default.createElement(TableHeadCell_1.TableHeadCell, { rowData: rowData, isDraggable: false, columnsData: columnsData }),
         columnsData.map(function (columnValue, index) {
             var isDraggableColumn = columnValue.isDraggable;
             var shouldRenderDragIndicator = isFirstRow && isDraggableColumn;
-            return onMoveColumn ? (react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, shouldRenderDragIndicator: shouldRenderDragIndicator, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableCell_1.TableCell, { key: columnValue.id || index, rowData: rowData, columnValue: columnValue, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+            return isMoveColumnEnabled ? (react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, shouldRenderDragIndicator: shouldRenderDragIndicator, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableCell_1.TableCell, { key: columnValue.id || index, rowData: rowData, columnValue: columnValue, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
         })));
 };
 exports.TableRow = TableRow;

package/cjs/VerticalHeadingsTable/components/TableRow/TableRow.test.js

@@ -15,73 +15,51 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var TableCell_1 = require("../TableCell");
-var TableCellWithDnd_1 = require("../TableCellWithDnd");
-var TableHeadCell_1 = require("../TableHeadCell");
 var TableRow_1 = require("./TableRow");
+var react_2 = require("@testing-library/react");
+var core_1 = require("@dnd-kit/core");
+var test_utils_1 = require("../../../test-utils");
 var columnsData = [
-    { 'attributes.FirstName': {}, isDraggable: false, id: 'entities/123' },
-    { 'attributes.FirstName': {}, isDraggable: true, id: 'entities/234' }
+    { 'attributes.FirstName': 'FirstNameValue1', isDraggable: false, id: 'entities/123' },
+    { 'attributes.FirstName': 'FirstNameValue2', isDraggable: true, id: 'entities/234' }
 ];
 var rowData = { id: 'attributes.FirstName', label: 'FirstName' };
-var setHoveredColumn = jest.fn();
-var resetHoveredColumn = jest.fn();
+var defaultProps = {
+    rowData: rowData,
+    columnsData: columnsData,
+    index: 0
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement(core_1.DndContext, null,
+            react_1.default.createElement("table", null,
+                react_1.default.createElement("tbody", null, children))));
+    };
+    return (0, react_2.render)(react_1.default.createElement(TableRow_1.TableRow, __assign({}, props)), { wrapper: Providers });
+};
 describe('TableRow tests', function () {
     it('should render TableHeadCell correctly', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableRow_1.TableRow, { rowData: rowData, columnsData: columnsData, index: 1, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
-        expect(component.find(TableHeadCell_1.TableHeadCell).props()).toEqual({
-            rowData: rowData,
-            isDraggable: false
-        });
-    });
-    it('should render "TableCellWithDnd" cells correctly if "onMoveColumn" exist in props', function () {
-        var onMoveColumn = jest.fn();
-        var onDropColumn = jest.fn();
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableRow_1.TableRow, { rowData: rowData, columnsData: columnsData, index: 1, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
-        expect(component.find(TableCellWithDnd_1.TableCellWithDnd)).toHaveLength(2);
-        component.find(TableCellWithDnd_1.TableCellWithDnd).forEach(function (node, index) {
-            expect(node.props()).toMatchObject({
-                rowData: rowData,
-                columnValue: columnsData[index],
-                index: index,
-                onMoveColumn: onMoveColumn,
-                onDropColumn: onDropColumn
-            });
-        });
-    });
-    it('should pass "shouldRenderDragIndicator" prop correctly to "TableCellWithDnd" cells if index === 0', function () {
-        var onMoveColumn = jest.fn();
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableRow_1.TableRow, { rowData: rowData, columnsData: columnsData, index: 0, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
-        expect(component.find(TableCellWithDnd_1.TableCellWithDnd)).toHaveLength(2);
-        component.find(TableCellWithDnd_1.TableCellWithDnd).forEach(function (node, index) {
-            expect(node.prop('shouldRenderDragIndicator')).toBe(columnsData[index].isDraggable);
-        });
+        setUp();
+        expect(react_2.screen.getByText(rowData.label)).toBeInTheDocument();
+        expect(react_2.screen.getByText(columnsData[0]['attributes.FirstName'])).toBeInTheDocument();
+        expect(react_2.screen.getByText(columnsData[1]['attributes.FirstName'])).toBeInTheDocument();
     });
-    it('should pass "shouldRenderDragIndicator" prop correctly to "TableCellWithDnd" cells if index !== 0', function () {
-        var onMoveColumn = jest.fn();
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableRow_1.TableRow, { rowData: rowData, columnsData: columnsData, index: 1, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
-        expect(component.find(TableCellWithDnd_1.TableCellWithDnd)).toHaveLength(2);
-        component.find(TableCellWithDnd_1.TableCellWithDnd).forEach(function (node) {
-            expect(node.prop('shouldRenderDragIndicator')).toBe(false);
-        });
+    it('should render "TableCellWithDnd" cells correctly if "isMoveColumnEnabled" is true in props', function () {
+        setUp(__assign(__assign({}, defaultProps), { isMoveColumnEnabled: true }));
+        expect(react_2.screen.getByText(rowData.label)).toBeInTheDocument();
+        expect(react_2.screen.getByText(columnsData[0]['attributes.FirstName'])).toBeInTheDocument();
+        expect(react_2.screen.getByText(columnsData[1]['attributes.FirstName'])).toBeInTheDocument();
+        expect((0, test_utils_1.getMuiIconByName)('DragIndicator')).toBeInTheDocument();
     });
-    it('should render "TableCell" cells correctly if "onMoveColumn" is missing in props', function () {
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableRow_1.TableRow, { rowData: rowData, columnsData: columnsData, index: 1, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
-        expect(component.find(TableCell_1.TableCell)).toHaveLength(2);
-        component.find(TableCell_1.TableCell).forEach(function (node, index) {
-            expect(node.props()).toEqual({
-                rowData: rowData,
-                columnValue: columnsData[index],
-                setHoveredColumn: setHoveredColumn,
-                resetHoveredColumn: resetHoveredColumn
-            });
-        });
+    it('should pass "shouldRenderDragIndicator" prop correctly to "TableCellWithDnd" cells if index not 0', function () {
+        setUp(__assign(__assign({}, defaultProps), { isMoveColumnEnabled: true, index: 1 }));
+        expect((0, test_utils_1.getMuiIconByName)('DragIndicator')).not.toBeInTheDocument();
     });
     it('should add rowClassName to tr element', function () {
         var rowClassName = 'class1';
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableRow_1.TableRow, { rowData: __assign(__assign({}, rowData), { rowClassName: rowClassName }), columnsData: columnsData, index: 1, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
-        expect(component.find('tr')).toHaveLength(1);
-        expect(component.find('tr').hasClass(rowClassName)).toBe(true);
+        setUp(__assign(__assign({}, defaultProps), { rowData: __assign(__assign({}, rowData), { rowClassName: rowClassName }) }));
+        expect(react_2.screen.getByRole('row')).toHaveClass(rowClassName);
     });
 });

package/cjs/VerticalHeadingsTable/components/TableRowDragPreview/TableRowDragPreview.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ColumnData, RowData } from '../../types';
+type Props = {
+    tableClassName: string;
+    tableWidth: number;
+    draggingRow: {
+        columnsData: ColumnData[];
+        rowData: RowData;
+    };
+};
+export declare const TableRowDragPreview: React.MemoExoticComponent<({ draggingRow, tableClassName, tableWidth }: Props) => React.JSX.Element>;
+export {};

package/cjs/VerticalHeadingsTable/components/TableRowDragPreview/TableRowDragPreview.js

@@ -0,0 +1,42 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableRowDragPreview = void 0;
+var react_1 = __importStar(require("react"));
+var TableRow_1 = require("../TableRow/TableRow");
+var styles_1 = require("./styles");
+exports.TableRowDragPreview = (0, react_1.memo)(function (_a) {
+    var draggingRow = _a.draggingRow, tableClassName = _a.tableClassName, tableWidth = _a.tableWidth;
+    var styles = (0, styles_1.useStyles)();
+    if (!draggingRow) {
+        return null;
+    }
+    var columnsData = draggingRow.columnsData, rowData = draggingRow.rowData;
+    return (react_1.default.createElement("div", { style: { width: tableWidth }, className: styles.root },
+        react_1.default.createElement("table", { className: tableClassName },
+            react_1.default.createElement("tbody", null,
+                react_1.default.createElement(TableRow_1.TableRow, { index: 1, key: rowData.id, rowData: rowData, columnsData: columnsData })))));
+});
+exports.TableRowDragPreview.displayName = 'TableRowDragPreview';

package/cjs/VerticalHeadingsTable/components/TableRowDragPreview/index.d.ts

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

package/cjs/VerticalHeadingsTable/components/TableRowDragPreview/index.js

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

package/cjs/{features/crosswalks/CrosswalkDragLayer → VerticalHeadingsTable/components/TableRowDragPreview}/styles.d.ts

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dragLayer">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"root">;

package/cjs/VerticalHeadingsTable/components/TableRowDragPreview/styles.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
+    root: {
+        overflow: 'hidden',
+        maskImage: 'linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0))',
+        pointerEvents: 'none'
+    }
+}); });

package/cjs/VerticalHeadingsTable/components/TableRowWithDnd/TableRowWithDnd.d.ts

@@ -2,16 +2,10 @@ import React from 'react';
 import { RowData, ColumnData } from '../../types';
 type Props = {
     rowData: RowData;
-    index: number;
     columnsData: ColumnData[];
-    onMoveRow: (dragId: string, hoverId: string) => void;
-    onDropRow?: () => void;
-    onMoveColumn?: (dragId: string, hoverId: string) => void;
-    onDropColumn?: () => void;
+    isMoveColumnEnabled?: boolean;
     setHoveredColumn: (columnValue: ColumnData) => void;
     resetHoveredColumn: () => void;
-    someRowIsDragging: boolean;
-    setSomeRowIsDragging: (isDragging: boolean) => void;
 };
-export declare const TableRowWithDnd: ({ rowData, index, columnsData, onMoveRow, onDropRow, onMoveColumn, onDropColumn, setHoveredColumn, resetHoveredColumn, someRowIsDragging, setSomeRowIsDragging }: Props) => React.JSX.Element;
+export declare const TableRowWithDnd: ({ rowData, columnsData, isMoveColumnEnabled, setHoveredColumn, resetHoveredColumn }: Props) => React.JSX.Element;
 export {};

package/cjs/VerticalHeadingsTable/components/TableRowWithDnd/TableRowWithDnd.js

@@ -25,66 +25,35 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableRowWithDnd = void 0;
 var react_1 = __importStar(require("react"));
-var react_dnd_1 = require("react-dnd");
 var TableHeadCell_1 = require("../TableHeadCell");
 var TableCell_1 = require("../TableCell");
 var TableCellWithDnd_1 = require("../TableCellWithDnd");
 var types_1 = require("../../types");
+var core_1 = require("@dnd-kit/core");
 var TableRowWithDnd = function (_a) {
-    var rowData = _a.rowData, index = _a.index, columnsData = _a.columnsData, onMoveRow = _a.onMoveRow, onDropRow = _a.onDropRow, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn, someRowIsDragging = _a.someRowIsDragging, setSomeRowIsDragging = _a.setSomeRowIsDragging;
-    var dropRef = react_1.default.useRef(null);
-    var dragRef = react_1.default.useRef(null);
-    var _b = (0, react_dnd_1.useDrop)({
-        accept: types_1.DndItemTypes.Row,
-        hover: function (item, monitor) {
-            if (!dropRef.current) {
-                return;
+    var rowData = _a.rowData, columnsData = _a.columnsData, isMoveColumnEnabled = _a.isMoveColumnEnabled, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
+    var setDroppableNodeRef = (0, core_1.useDroppable)({
+        id: rowData.id
+    }).setNodeRef;
+    var _b = (0, react_1.useState)(false), enableDropForRow = _b[0], setEnableDropForRow = _b[1];
+    var _c = (0, react_1.useState)(false), rowIsDragging = _c[0], setRowIsDragging = _c[1];
+    (0, core_1.useDndMonitor)({
+        onDragStart: function (event) {
+            if (event.active.data.current.type === types_1.DndItemTypes.Row) {
+                setEnableDropForRow(true);
+                setRowIsDragging(event.active.id === rowData.id);
             }
-            var dragIndex = item.index;
-            var hoverIndex = index;
-            if (dragIndex === hoverIndex) {
-                return;
-            }
-            var hoverBoundingRect = dropRef.current.getBoundingClientRect();
-            var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
-            var clientOffset = monitor.getClientOffset();
-            var hoverClientY = clientOffset.y - hoverBoundingRect.top;
-            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
-                return;
-            }
-            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
-                return;
-            }
-            onMoveRow(item.id, rowData.id);
-            item.index = hoverIndex;
-        },
-        drop: function () {
-            if (onDropRow)
-                onDropRow();
         },
-        collect: function (monitor) { return ({
-            targetId: monitor.getHandlerId()
-        }); }
-    }), targetId = _b[0].targetId, drop = _b[1];
-    var _c = (0, react_dnd_1.useDrag)({
-        item: { type: types_1.DndItemTypes.Row, index: index, id: rowData.id },
-        collect: function (monitor) { return ({
-            sourceId: monitor.getHandlerId(),
-            isDragging: monitor.isDragging()
-        }); }
-    }), _d = _c[0], isDragging = _d.isDragging, sourceId = _d.sourceId, drag = _c[1], preview = _c[2];
-    (0, react_1.useEffect)(function () {
-        preview(drop(dropRef));
-        drag(dragRef);
-    }, []);
-    (0, react_1.useEffect)(function () {
-        setSomeRowIsDragging(isDragging);
-    }, [isDragging, setSomeRowIsDragging]);
-    var opacity = isDragging ? 0 : 1;
-    return (react_1.default.createElement("tr", { className: rowData.rowClassName, style: { opacity: opacity }, ref: dropRef, "data-target-id": targetId, "data-source-id": sourceId },
-        react_1.default.createElement(TableHeadCell_1.TableHeadCell, { rowData: rowData, isDraggable: true, dragRef: dragRef }),
+        onDragEnd: function () {
+            setRowIsDragging(false);
+            setEnableDropForRow(false);
+        }
+    });
+    var rowStyle = (0, react_1.useMemo)(function () { return ({ opacity: rowIsDragging ? 0 : 1 }); }, [rowIsDragging]);
+    return (react_1.default.createElement("tr", { className: rowData.rowClassName, style: rowStyle, ref: enableDropForRow ? setDroppableNodeRef : undefined },
+        react_1.default.createElement(TableHeadCell_1.TableHeadCell, { rowData: rowData, isDraggable: true, columnsData: columnsData }),
         columnsData.map(function (columnValue, index) {
-            return onMoveColumn ? (react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging })) : (react_1.default.createElement(TableCell_1.TableCell, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging }));
+            return isMoveColumnEnabled ? (react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, rowIsDragging: rowIsDragging })) : (react_1.default.createElement(TableCell_1.TableCell, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, rowIsDragging: rowIsDragging }));
         })));
 };
 exports.TableRowWithDnd = TableRowWithDnd;

package/cjs/VerticalHeadingsTable/components/TableRowWithDnd/TableRowWithDnd.test.js

@@ -15,106 +15,76 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
-var enzyme_1 = require("enzyme");
-var test_utils_1 = require("react-dom/test-utils");
-var react_dnd_1 = require("react-dnd");
-var react_dnd_test_backend_1 = __importDefault(require("react-dnd-test-backend"));
-var TableCell_1 = require("../TableCell");
-var TableCellWithDnd_1 = require("../TableCellWithDnd");
-var TableHeadCell_1 = require("../TableHeadCell");
+var core_1 = require("@dnd-kit/core");
+var react_2 = require("@testing-library/react");
+var types_1 = require("../../types");
 var TableRowWithDnd_1 = require("./TableRowWithDnd");
+jest.mock('@dnd-kit/core', function () { return (__assign(__assign({}, jest.requireActual('@dnd-kit/core')), { useDndMonitor: jest.fn(), useDroppable: jest.fn().mockReturnValue({ setNodeRef: jest.fn() }) })); });
 var defaultColumnsData = [
     { 'attributes.FirstName': 'FirstName1', isDraggable: false, id: 'entities/123' },
     { 'attributes.FirstName': 'FirstName2', isDraggable: true, id: 'entities/234' }
 ];
 var defaultRowData = { id: 'attributes.FirstName', label: 'FirstName' };
-var setUp = function (_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.columnsData, columnsData = _c === void 0 ? defaultColumnsData : _c, _d = _b.rowData, rowData = _d === void 0 ? defaultRowData : _d, _e = _b.index, index = _e === void 0 ? 0 : _e, _f = _b.onMoveRow, onMoveRow = _f === void 0 ? jest.fn() : _f, _g = _b.onDropRow, onDropRow = _g === void 0 ? jest.fn() : _g, _h = _b.onMoveColumn, onMoveColumn = _h === void 0 ? jest.fn() : _h, _j = _b.onDropColumn, onDropColumn = _j === void 0 ? jest.fn() : _j, _k = _b.setHoveredColumn, setHoveredColumn = _k === void 0 ? jest.fn() : _k, _l = _b.resetHoveredColumn, resetHoveredColumn = _l === void 0 ? jest.fn() : _l, _m = _b.setSomeRowIsDragging, setSomeRowIsDragging = _m === void 0 ? jest.fn() : _m, _o = _b.someRowIsDragging, someRowIsDragging = _o === void 0 ? false : _o;
-    var manager;
-    var component = (0, enzyme_1.mount)(react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_test_backend_1.default },
-        react_1.default.createElement(react_dnd_1.DndContext.Consumer, null, function (_a) {
-            var dragDropManager = _a.dragDropManager;
-            manager = dragDropManager;
-            return (react_1.default.createElement("table", null,
-                react_1.default.createElement("tbody", null,
-                    react_1.default.createElement(TableRowWithDnd_1.TableRowWithDnd, { rowData: rowData, columnsData: columnsData, index: index, onMoveRow: onMoveRow, onDropRow: onDropRow, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, setSomeRowIsDragging: setSomeRowIsDragging, someRowIsDragging: someRowIsDragging }))));
-        })));
-    return [component, manager];
+var rowName = "".concat(defaultRowData.label, " ").concat(defaultColumnsData[0]['attributes.FirstName'], " ").concat(defaultColumnsData[1]['attributes.FirstName']);
+var defaultProps = {
+    columnsData: defaultColumnsData,
+    rowData: defaultRowData,
+    isMoveColumnEnabled: false,
+    setHoveredColumn: jest.fn(),
+    resetHoveredColumn: jest.fn()
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement(core_1.DndContext, null,
+            react_1.default.createElement("table", null,
+                react_1.default.createElement("tbody", null, children))));
+    };
+    return (0, react_2.render)(react_1.default.createElement(TableRowWithDnd_1.TableRowWithDnd, __assign({}, props)), { wrapper: Providers });
 };
 describe('TableRow tests', function () {
     it('should render TableHeadCell correctly', function () {
-        var component = setUp()[0];
-        expect(component.find(TableHeadCell_1.TableHeadCell).props()).toMatchObject({
-            rowData: defaultRowData,
-            isDraggable: true
-        });
-    });
-    it('should render "TableCellWithDnd" cells correctly if "onMoveColumn" exist in props', function () {
-        var onMoveColumn = jest.fn();
-        var onDropColumn = jest.fn();
-        var props = { onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, someRowIsDragging: true };
-        var component = setUp(props)[0];
-        expect(component.find(TableCellWithDnd_1.TableCellWithDnd)).toHaveLength(2);
-        component.find(TableCellWithDnd_1.TableCellWithDnd).forEach(function (node, index) {
-            expect(node.props()).toMatchObject({
-                rowData: defaultRowData,
-                columnValue: defaultColumnsData[index],
-                index: index,
-                onMoveColumn: onMoveColumn,
-                onDropColumn: onDropColumn,
-                shouldRenderDragIndicator: false,
-                someRowIsDragging: true
-            });
-        });
-    });
-    it('should render "TableCell" cells correctly if "onMoveColumn" is missing in props', function () {
-        var setHoveredColumn = jest.fn();
-        var resetHoveredColumn = jest.fn();
-        var props = {
-            onMoveColumn: null,
-            setHoveredColumn: setHoveredColumn,
-            resetHoveredColumn: resetHoveredColumn,
-            someRowIsDragging: false
-        };
-        var component = setUp(props)[0];
-        expect(component.find(TableCell_1.TableCell)).toHaveLength(2);
-        component.find(TableCell_1.TableCell).forEach(function (node, index) {
-            expect(node.props()).toEqual({
-                rowData: defaultRowData,
-                columnValue: defaultColumnsData[index],
-                setHoveredColumn: setHoveredColumn,
-                resetHoveredColumn: resetHoveredColumn,
-                someRowIsDragging: false
-            });
-        });
+        setUp();
+        expect(react_2.screen.getByText('FirstName1')).toBeInTheDocument();
+        expect(react_2.screen.getByText('FirstName2')).toBeInTheDocument();
     });
     it('should add rowClassName to tr element', function () {
         var rowClassName = 'class1';
-        var component = setUp({ rowData: __assign(__assign({}, defaultRowData), { rowClassName: rowClassName }) })[0];
-        expect(component.find('tr')).toHaveLength(1);
-        expect(component.find('tr').hasClass(rowClassName)).toBe(true);
+        setUp(__assign(__assign({}, defaultProps), { rowData: __assign(__assign({}, defaultRowData), { rowClassName: rowClassName }) }));
+        expect(react_2.screen.getByRole('row', { name: rowName })).toHaveClass(rowClassName);
     });
-    it('should set someRowIsDragging correctly when dragging was start and dragging was end', function () {
-        var setSomeRowIsDragging = jest.fn();
-        var props = { onMoveColumn: null, onDropRow: null, setSomeRowIsDragging: setSomeRowIsDragging };
-        var _a = setUp(props), component = _a[0], manager = _a[1];
-        var backend = manager.getBackend();
-        var sourceId = component.find('tr').prop('data-source-id');
-        (0, test_utils_1.act)(function () {
-            backend.simulateBeginDrag([sourceId], {
-                clientOffset: { x: 0, y: 0 },
-                getSourceClientOffset: function () { return ({ x: 0, y: 0 }); }
+    it('should set opacity correctly when dragging was start and dragging was end', function () {
+        var onDragStart, onDragEnd;
+        core_1.useDndMonitor.mockImplementation(function (listeners) {
+            onDragStart = listeners.onDragStart;
+            onDragEnd = listeners.onDragEnd;
+        });
+        setUp();
+        var row = react_2.screen.getByRole('row', { name: rowName });
+        expect(row).toHaveStyle({ opacity: 1 });
+        (0, react_2.act)(function () {
+            onDragStart({
+                active: {
+                    id: defaultProps.rowData.id,
+                    data: {
+                        current: {
+                            type: types_1.DndItemTypes.Row
+                        }
+                    }
+                }
             });
         });
-        component.update();
-        expect(setSomeRowIsDragging).toHaveBeenCalledWith(true);
-        var targetId = component.find('tr').prop('data-target-id');
-        (0, test_utils_1.act)(function () {
-            backend.simulateHover([targetId]);
-            backend.simulateDrop();
-            backend.simulateEndDrag();
+        expect(row).toHaveStyle({ opacity: 0 });
+        (0, react_2.act)(function () {
+            onDragEnd();
         });
-        component.update();
-        expect(setSomeRowIsDragging).toHaveBeenCalledWith(false);
+        expect(row).toHaveStyle({ opacity: 1 });
+    });
+    it('should should use TableCellWithDnd if isMoveColumnEnabled is true', function () {
+        core_1.useDroppable.mockClear();
+        setUp(__assign(__assign({}, defaultProps), { isMoveColumnEnabled: true }));
+        expect(core_1.useDroppable).toHaveBeenCalledWith({ id: defaultColumnsData[0].id });
+        expect(core_1.useDroppable).toHaveBeenCalledWith({ id: defaultColumnsData[1].id });
     });
 });

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

@@ -14,8 +14,8 @@ export declare const useHighlightedCrosswalks: () => any;
 export declare const useCrosswalkHighlight: (crosswalk?: CrosswalkBase) => {
     isHighlighted: boolean;
     isDimmed: boolean;
-    highlightCrosswalk: () => any;
-    removeHighlight: () => any;
+    highlightCrosswalk: () => void;
+    removeHighlight: () => void;
 };
 export declare const useCrosswalkFocus: (crosswalk?: CrosswalkBase) => {
     isFocused: any;

package/cjs/contexts/CrosswalksDisplayContext/index.js

@@ -60,8 +60,12 @@ var useCrosswalkHighlight = function (crosswalk) {
     return {
         isHighlighted: isHighlighted,
         isDimmed: highlightedCrosswalks.length > 0 && !isHighlighted,
-        highlightCrosswalk: (0, react_1.useCallback)(function () { return setCrosswalkHighlighted(crosswalk, true); }, [crosswalk, setCrosswalkHighlighted]),
-        removeHighlight: (0, react_1.useCallback)(function () { return setCrosswalkHighlighted(crosswalk, false); }, [crosswalk, setCrosswalkHighlighted])
+        highlightCrosswalk: (0, react_1.useCallback)(function () {
+            setCrosswalkHighlighted(crosswalk, true);
+        }, [crosswalk, setCrosswalkHighlighted]),
+        removeHighlight: (0, react_1.useCallback)(function () {
+            setCrosswalkHighlighted(crosswalk, false);
+        }, [crosswalk, setCrosswalkHighlighted])
     };
 };
 exports.useCrosswalkHighlight = useCrosswalkHighlight;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AttributeType, Entity, Relation } from '@reltio/mdm-sdk';
 import { AddInlineAttributeEvent, DeleteInlineAttributeEvent, EditInlineAttributeEvent, IgnoreInlineAttributeEvent, PinInlineAttributeEvent } from '../../../types/inlineAttributes';
+import { BasicTable } from '../../../BasicTable';
 import { CrosswalksByOwnerTypeMap } from '../types';
 type Props = {
     entity?: Entity | Relation;
@@ -20,6 +21,7 @@ type Props = {
     additionalHeaderItems?: React.ReactNode;
     className?: string;
     activeSurvivorshipGroupUri?: string;
+    tableRef?: React.ElementRef<typeof BasicTable>;
 };
-declare const _default: React.MemoExoticComponent<({ entity, isLoading, crosswalksMap, visibleColumns, onChangeVisibleColumns, readOnly, onDelete, onPin, onIgnore, onEdit, onAdd, emptyTempAttributeUris, selectedAttributeTypes, onSelectAttributeTypes, additionalHeaderItems, className, activeSurvivorshipGroupUri }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ entity, isLoading, crosswalksMap, visibleColumns, onChangeVisibleColumns, readOnly, onDelete, onPin, onIgnore, onEdit, onAdd, emptyTempAttributeUris, selectedAttributeTypes, onSelectAttributeTypes, additionalHeaderItems, className, activeSurvivorshipGroupUri, tableRef }: Props) => React.JSX.Element>;
 export default _default;

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

@@ -60,7 +60,7 @@ var getRowCellKey = function (_a) {
     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 ? ramda_1.identity : _c, _d = _a.onPin, onPin = _d === void 0 ? ramda_1.identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? ramda_1.identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? ramda_1.identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? ramda_1.identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? ramda_1.identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri;
+    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 ? ramda_1.identity : _c, _d = _a.onPin, onPin = _d === void 0 ? ramda_1.identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? ramda_1.identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? ramda_1.identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? ramda_1.identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? ramda_1.identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef;
     var styles = (0, styles_1.useStyles)();
     var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     var visibleColumnsData = (0, react_1.useMemo)(function () {
@@ -142,7 +142,7 @@ 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(BasicTable_1.BasicTable, { fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })),
+            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, 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)