@reltio/components 1.4.2018 → 1.4.2019

package/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/VerticalHeadingsTable/components/TableRowWithDnd/TableRowWithDnd.js

@@ -1,63 +1,32 @@
-import React, { useEffect } from 'react';
-import { useDrag, useDrop } from 'react-dnd';
+import React, { useMemo, useState } from 'react';
 import { TableHeadCell } from '../TableHeadCell';
 import { TableCell } from '../TableCell';
 import { TableCellWithDnd } from '../TableCellWithDnd';
 import { DndItemTypes } from '../../types';
+import { useDndMonitor, useDroppable } from '@dnd-kit/core';
 export 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.useRef(null);
-    var dragRef = React.useRef(null);
-    var _b = useDrop({
-        accept: 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 = useDroppable({
+        id: rowData.id
+    }).setNodeRef;
+    var _b = useState(false), enableDropForRow = _b[0], setEnableDropForRow = _b[1];
+    var _c = useState(false), rowIsDragging = _c[0], setRowIsDragging = _c[1];
+    useDndMonitor({
+        onDragStart: function (event) {
+            if (event.active.data.current.type === 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 = useDrag({
-        item: { type: 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];
-    useEffect(function () {
-        preview(drop(dropRef));
-        drag(dragRef);
-    }, []);
-    useEffect(function () {
-        setSomeRowIsDragging(isDragging);
-    }, [isDragging, setSomeRowIsDragging]);
-    var opacity = isDragging ? 0 : 1;
-    return (React.createElement("tr", { className: rowData.rowClassName, style: { opacity: opacity }, ref: dropRef, "data-target-id": targetId, "data-source-id": sourceId },
-        React.createElement(TableHeadCell, { rowData: rowData, isDraggable: true, dragRef: dragRef }),
+        onDragEnd: function () {
+            setRowIsDragging(false);
+            setEnableDropForRow(false);
+        }
+    });
+    var rowStyle = useMemo(function () { return ({ opacity: rowIsDragging ? 0 : 1 }); }, [rowIsDragging]);
+    return (React.createElement("tr", { className: rowData.rowClassName, style: rowStyle, ref: enableDropForRow ? setDroppableNodeRef : undefined },
+        React.createElement(TableHeadCell, { rowData: rowData, isDraggable: true, columnsData: columnsData }),
         columnsData.map(function (columnValue, index) {
-            return onMoveColumn ? (React.createElement(TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging })) : (React.createElement(TableCell, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging }));
+            return isMoveColumnEnabled ? (React.createElement(TableCellWithDnd, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, index: index, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, rowIsDragging: rowIsDragging })) : (React.createElement(TableCell, { key: columnValue.id || index, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, rowIsDragging: rowIsDragging }));
         })));
 };

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

@@ -10,106 +10,76 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
-import { mount } from 'enzyme';
-import { act } from 'react-dom/test-utils';
-import { DndContext, DndProvider } from 'react-dnd';
-import TestBackend from 'react-dnd-test-backend';
-import { TableCell } from '../TableCell';
-import { TableCellWithDnd } from '../TableCellWithDnd';
-import { TableHeadCell } from '../TableHeadCell';
+import { DndContext, useDndMonitor, useDroppable } from '@dnd-kit/core';
+import { act, render, screen } from '@testing-library/react';
+import { DndItemTypes } from '../../types';
 import { TableRowWithDnd } from './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 = mount(React.createElement(DndProvider, { backend: TestBackend },
-        React.createElement(DndContext.Consumer, null, function (_a) {
-            var dragDropManager = _a.dragDropManager;
-            manager = dragDropManager;
-            return (React.createElement("table", null,
-                React.createElement("tbody", null,
-                    React.createElement(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.createElement(DndContext, null,
+            React.createElement("table", null,
+                React.createElement("tbody", null, children))));
+    };
+    return render(React.createElement(TableRowWithDnd, __assign({}, props)), { wrapper: Providers });
 };
 describe('TableRow tests', function () {
     it('should render TableHeadCell correctly', function () {
-        var component = setUp()[0];
-        expect(component.find(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)).toHaveLength(2);
-        component.find(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)).toHaveLength(2);
-        component.find(TableCell).forEach(function (node, index) {
-            expect(node.props()).toEqual({
-                rowData: defaultRowData,
-                columnValue: defaultColumnsData[index],
-                setHoveredColumn: setHoveredColumn,
-                resetHoveredColumn: resetHoveredColumn,
-                someRowIsDragging: false
-            });
-        });
+        setUp();
+        expect(screen.getByText('FirstName1')).toBeInTheDocument();
+        expect(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(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');
+    it('should set opacity correctly when dragging was start and dragging was end', function () {
+        var onDragStart, onDragEnd;
+        useDndMonitor.mockImplementation(function (listeners) {
+            onDragStart = listeners.onDragStart;
+            onDragEnd = listeners.onDragEnd;
+        });
+        setUp();
+        var row = screen.getByRole('row', { name: rowName });
+        expect(row).toHaveStyle({ opacity: 1 });
         act(function () {
-            backend.simulateBeginDrag([sourceId], {
-                clientOffset: { x: 0, y: 0 },
-                getSourceClientOffset: function () { return ({ x: 0, y: 0 }); }
+            onDragStart({
+                active: {
+                    id: defaultProps.rowData.id,
+                    data: {
+                        current: {
+                            type: DndItemTypes.Row
+                        }
+                    }
+                }
             });
         });
-        component.update();
-        expect(setSomeRowIsDragging).toHaveBeenCalledWith(true);
-        var targetId = component.find('tr').prop('data-target-id');
+        expect(row).toHaveStyle({ opacity: 0 });
         act(function () {
-            backend.simulateHover([targetId]);
-            backend.simulateDrop();
-            backend.simulateEndDrag();
+            onDragEnd();
         });
-        component.update();
-        expect(setSomeRowIsDragging).toHaveBeenCalledWith(false);
+        expect(row).toHaveStyle({ opacity: 1 });
+    });
+    it('should should use TableCellWithDnd if isMoveColumnEnabled is true', function () {
+        useDroppable.mockClear();
+        setUp(__assign(__assign({}, defaultProps), { isMoveColumnEnabled: true }));
+        expect(useDroppable).toHaveBeenCalledWith({ id: defaultColumnsData[0].id });
+        expect(useDroppable).toHaveBeenCalledWith({ id: defaultColumnsData[1].id });
     });
 });

package/cjs/BarChart/helpers.d.ts

@@ -4,8 +4,8 @@ import { BarChartOptions } from '@reltio/mdm-sdk';
 type BarChartSettings = {
     barChart: React.ComponentProps<typeof BarChart>;
     bar: Omit<BarProps, 'ref'>;
-    xAxis: XAxisProps;
-    yAxis: YAxisProps;
+    xAxis: Omit<XAxisProps, 'ref'>;
+    yAxis: Omit<YAxisProps, 'ref'>;
     cartesianGrid: Omit<CartesianGridProps, 'ref'>;
     tooltip: TooltipProps<number, string>;
 };

package/cjs/BasicTable/IntegrationBasicTable.test.js

@@ -53,16 +53,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var react_2 = require("@testing-library/react");
 var user_event_1 = __importDefault(require("@testing-library/user-event"));
-var react_dnd_html5_backend_1 = __importDefault(require("react-dnd-html5-backend"));
-var react_dnd_1 = require("react-dnd");
+var dndKit_1 = require("../test-utils/dndKit");
+jest.mock('@dnd-kit/core', function () { return dndKit_1.mockDndKit; });
 var BasicTable_1 = require("./BasicTable");
 var CollapseRowButton_1 = require("../CollapseRowButton");
 var test_utils_1 = require("../test-utils");
 var FirstColumnRenderer = function (_a) {
-    var value = _a.value, rowValue = _a.rowValue, rowIndex = _a.rowIndex, dragRef = _a.dragRef;
+    var value = _a.value, rowValue = _a.rowValue, rowIndex = _a.rowIndex, draggableProps = _a.draggableProps;
     return (react_1.default.createElement("div", null,
         react_1.default.createElement(CollapseRowButton_1.CollapseRowButton, { rowIndex: rowIndex, rowValue: rowValue }),
-        react_1.default.createElement("div", { ref: dragRef }, "drag el"),
+        react_1.default.createElement("div", __assign({}, draggableProps), "drag el"),
         react_1.default.createElement("div", null, value.name)));
 };
 var SecondColumnRenderer = function (_a) {
@@ -122,11 +122,7 @@ var defaultProps = {
 };
 var setUp = function (props) {
     var user = user_event_1.default.setup();
-    var Providers = function (_a) {
-        var children = _a.children;
-        return react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.default }, children);
-    };
-    return __assign(__assign({}, (0, react_2.render)(react_1.default.createElement(BasicTable_1.BasicTable, __assign({}, props)), { wrapper: Providers })), { user: user });
+    return __assign(__assign({}, (0, react_2.render)(react_1.default.createElement(BasicTable_1.BasicTable, __assign({}, props)))), { user: user });
 };
 describe('basic table tests', function () {
     it('should collapse all rows after start dragging', function () { return __awaiter(void 0, void 0, void 0, function () {
@@ -158,7 +154,7 @@ describe('basic table tests', function () {
                     dragIndicator = (0, react_2.within)(getCellByIndexes(1, 0)).queryByText('drag el');
                     return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
                             return __generator(this, function (_a) {
-                                react_2.fireEvent.dragStart(dragIndicator);
+                                react_2.fireEvent.mouseDown(dragIndicator);
                                 return [2 /*return*/];
                             });
                         }); })];
@@ -169,14 +165,6 @@ describe('basic table tests', function () {
                     expect((0, react_2.within)(getCellByIndexes(0, 1)).queryByText('row 1 value 3')).not.toBeInTheDocument();
                     expect((0, react_2.within)(getCellByIndexes(1, 1)).queryByText('row 2 value 1')).toBeInTheDocument();
                     expect((0, react_2.within)(getCellByIndexes(1, 1)).queryByText('row 2 value 2')).not.toBeInTheDocument();
-                    return [4 /*yield*/, (0, react_2.act)(function () { return __awaiter(void 0, void 0, void 0, function () {
-                            return __generator(this, function (_a) {
-                                react_2.fireEvent.dragEnd(getCellByIndexes(1, 0));
-                                return [2 /*return*/];
-                            });
-                        }); })];
-                case 4:
-                    _a.sent();
                     unmockTableSizing();
                     return [2 /*return*/];
             }

package/cjs/EditModeAttributesView/IntegrationEditModeAttributesView.test.js

@@ -53,8 +53,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var user_event_1 = __importDefault(require("@testing-library/user-event"));
 var react_2 = require("@testing-library/react");
-var react_dnd_1 = require("react-dnd");
-var react_dnd_html5_backend_1 = __importDefault(require("react-dnd-html5-backend"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var EditModeAttributesView_1 = require("./EditModeAttributesView");
 var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
@@ -111,9 +109,8 @@ describe('EditModeAttributesView tests', function () {
         var user = user_event_1.default.setup(userOptions);
         var Providers = function (_a) {
             var children = _a.children;
-            return (react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.default },
-                react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: mdmActions },
-                    react_1.default.createElement(ScrollToElementContext_1.ScrollToElementProvider, null, children))));
+            return (react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: mdmActions },
+                react_1.default.createElement(ScrollToElementContext_1.ScrollToElementProvider, null, children)));
         };
         return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(EditModeAttributesView_1.EditModeAttributesView, __assign({}, props)), { wrapper: Providers }));
     };

package/cjs/ImageAttributesLineEditor/ImageAttributesLineEditor.test.js

@@ -18,8 +18,6 @@ var react_1 = __importDefault(require("react"));
 var test_utils_1 = require("react-dom/test-utils");
 var react_resize_detector_1 = __importDefault(require("react-resize-detector"));
 var enzyme_1 = require("enzyme");
-var react_dnd_1 = require("react-dnd");
-var react_dnd_html5_backend_1 = __importDefault(require("react-dnd-html5-backend"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var Image_1 = require("../Image");
 var EmptyStub_1 = require("../EmptyStub");
@@ -96,9 +94,8 @@ var defaultProps = {
 };
 var setUp = function (_a) {
     var _b = _a === void 0 ? {} : _a, _c = _b.props, props = _c === void 0 ? defaultProps : _c, _d = _b.mdmValues, mdmValues = _d === void 0 ? defaultMdmValues : _d, _e = _b.mdmActions, mdmActions = _e === void 0 ? defaultMdmActions : _e;
-    return (0, enzyme_1.mount)(react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.default },
-        react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: mdmActions },
-            react_1.default.createElement(ImageAttributesLineEditor_1.ImageAttributesLineEditor, __assign({}, props)))));
+    return (0, enzyme_1.mount)(react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: mdmValues, actions: mdmActions },
+        react_1.default.createElement(ImageAttributesLineEditor_1.ImageAttributesLineEditor, __assign({}, props))));
 };
 describe('ImageAttributesLineEditor edit tests', function () {
     beforeAll(function () {

package/cjs/InlineAttributesPager/components/InlineSimpleAttributesBlock/InlineSimpleAttributesBlock.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __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)
@@ -26,37 +49,48 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineSimpleAttributesBlock = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
-var react_dnd_1 = require("react-dnd");
+var core_1 = require("@dnd-kit/core");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var InlineSimpleAttribute_1 = require("../../../InlineSimpleAttribute");
 var styles_1 = require("./styles");
 var InlineSimpleAttributesBlock = function (_a) {
     var attributeValues = _a.attributeValues, attributeType = _a.attributeType, parentUri = _a.parentUri, disableEdit = _a.disableEdit, crosswalksMap = _a.crosswalksMap, onAdd = _a.onAdd, emptyTempAttributeUris = _a.emptyTempAttributeUris, props = __rest(_a, ["attributeValues", "attributeType", "parentUri", "disableEdit", "crosswalksMap", "onAdd", "emptyTempAttributeUris"]);
     var styles = (0, styles_1.useStyles)();
-    var _b = (0, react_dnd_1.useDrop)({
-        accept: 'Crosswalk',
-        canDrop: function (_a) {
-            var crosswalk = _a.crosswalk;
-            var isRelationCrosswalk = (0, mdm_sdk_1.isRelationUri)(crosswalk.uri) || crosswalk.ownerType === 'relation';
-            var isEntityCrosswalk = (0, mdm_sdk_1.isEntityUri)(crosswalk.uri) && crosswalk.ownerType === 'entity';
-            return ((0, mdm_sdk_1.checkMetadataForCreate)(mdm_sdk_1.Mode.Editing, attributeType) &&
-                !disableEdit &&
-                ((isRelationCrosswalk && (0, mdm_sdk_1.isRelationTypeUri)(attributeType.uri)) ||
-                    (isEntityCrosswalk && (0, mdm_sdk_1.isEntityTypeUri)(attributeType.uri))));
+    var _b = (0, react_1.useState)(false), isDragItemOver = _b[0], setIsDragItemOver = _b[1];
+    var checkCanAddCrosswalk = (0, react_1.useCallback)(function (event) {
+        var _a;
+        var draggingData = event.active.data.current;
+        var crosswalk = draggingData === null || draggingData === void 0 ? void 0 : draggingData.crosswalk;
+        return (!disableEdit &&
+            (draggingData === null || draggingData === void 0 ? void 0 : draggingData.type) === 'Crosswalk' &&
+            attributeType.uri === ((_a = event.over) === null || _a === void 0 ? void 0 : _a.id) &&
+            crosswalk &&
+            (0, mdm_sdk_1.canAddCrosswalk)(crosswalk, attributeType));
+    }, [disableEdit, attributeType]);
+    (0, core_1.useDndMonitor)({
+        onDragOver: function (event) {
+            setIsDragItemOver(checkCanAddCrosswalk(event));
         },
-        collect: function (monitor) { return ({
-            isDragItemOver: monitor.isOver() && monitor.canDrop()
-        }); },
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        drop: function (_a, monitor) {
-            var crosswalk = _a.crosswalk;
-            onAdd({ attributeType: attributeType, crosswalk: crosswalk, parentUri: parentUri, index: attributeValues.length });
+        onDragEnd: function (event) {
+            var draggingData = event.active.data.current;
+            var crosswalk = draggingData === null || draggingData === void 0 ? void 0 : draggingData.crosswalk;
+            if (checkCanAddCrosswalk(event)) {
+                onAdd({ attributeType: attributeType, crosswalk: crosswalk, parentUri: parentUri, index: attributeValues.length });
+            }
+            setIsDragItemOver(false);
+        }
+    });
+    var setNodeRef = (0, core_1.useDroppable)({
+        id: attributeType.uri,
+        data: {
+            type: 'Crosswalk',
+            attributeType: attributeType
         }
-    }), isDragItemOver = _b[0].isDragItemOver, drop = _b[1];
+    }).setNodeRef;
     var attributeIndex = 0;
-    return (react_1.default.createElement("div", { ref: drop, className: styles.simpleAttributesWrapper, "data-reltio-id": 'simple-attributes-wrapper' },
+    return (react_1.default.createElement("div", { ref: setNodeRef, className: styles.simpleAttributesWrapper, "data-reltio-id": 'simple-attributes-wrapper' },
         attributeValues.map(function (value) {
             var _a;
             return (_a = crosswalksMap[value.uri]) === null || _a === void 0 ? void 0 : _a.map(function (crosswalk) { return (react_1.default.createElement(InlineSimpleAttribute_1.InlineSimpleAttribute, __assign({ key: value.uri + crosswalk.uri, attributeType: attributeType, attributeValue: value, crosswalk: crosswalk, disableEdit: disableEdit, isEmpty: emptyTempAttributeUris.includes(value.uri), dataReltioId: "value-index-".concat(attributeIndex++) }, props))); });