@reltio/components 1.4.2018 → 1.4.2019

package/cjs/test-utils/dndKit/useDroppable.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDroppable = void 0;
+var react_1 = require("react");
+var utilities_1 = require("@dnd-kit/utilities");
+var useDndContext_1 = require("./useDndContext");
+var useDroppable = function (props) {
+    var _a = (0, useDndContext_1.useDndContext)(), droppableNodesRef = _a.droppableNodesRef, onDragOver = _a.onDragOver;
+    var _b = (0, react_1.useState)(null), element = _b[0], setElement = _b[1];
+    var onChangeElem = (0, react_1.useCallback)(function (newElement) {
+        if (newElement) {
+            newElement.setAttribute('data-test-dnd-drop-id', props.id);
+            setElement(newElement);
+        }
+    }, [props.id]);
+    var _c = (0, utilities_1.useNodeRef)(onChangeElem), node = _c[0], setNodeRef = _c[1];
+    var data = (0, react_1.useRef)(props.data);
+    (0, react_1.useEffect)(function () {
+        droppableNodesRef.current.set(props.id, { id: props.id, data: data, node: node });
+        return function () {
+            var node = droppableNodesRef.current.get(props.id);
+            if (node) {
+                droppableNodesRef.current.delete(props.id);
+            }
+        };
+    }, [props.id]);
+    (0, react_1.useEffect)(function () {
+        if (!element) {
+            return;
+        }
+        var onMouseOver = function (event) {
+            if (element === event.target) {
+                onDragOver(props.id);
+            }
+        };
+        element.addEventListener('mouseover', onMouseOver);
+        return function () {
+            element.removeEventListener('mouseover', onMouseOver);
+        };
+    }, [element, onDragOver, props.id]);
+    return {
+        setNodeRef: setNodeRef
+    };
+};
+exports.useDroppable = useDroppable;

package/cjs/types/basicTable.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DataTypeDefinition, SearchValue, SortOrder } from '@reltio/mdm-sdk';
 import { useCollapsibleTableRows } from '../hooks/useCollapsibleTableRows';
+import { DraggableAttributes } from '@dnd-kit/core';
 export type Sorting = {
     field: string;
     order: SortOrder;
@@ -89,4 +90,7 @@ export type OnFilter = (event: {
     columnId: string;
     filter: ColumnFilter;
 }) => void;
+export type DraggableProps = DraggableAttributes & {
+    ref: (element: HTMLElement | null) => void;
+};
 export {};

package/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/contexts/CrosswalksDisplayContext/index.js

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

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

@@ -32,7 +32,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 ? DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? identity : _c, _d = _a.onPin, onPin = _d === void 0 ? identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? 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 ? DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? identity : _c, _d = _a.onPin, onPin = _d === void 0 ? identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef;
     var styles = useStyles();
     var metadata = useMdmMetadata();
     var visibleColumnsData = useMemo(function () {
@@ -114,7 +114,7 @@ var AttributesTable = function (_a) {
             React.createElement(ColumnsSettings, { columnsData: COLUMNS_DATA, selectedColumns: visibleColumns, onChangeColumns: onChangeVisibleColumns })),
         React.createElement("div", { className: styles.tableContent },
             isLoading && React.createElement(LinearLoadIndicator, null),
-            React.createElement(BasicTable, { fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })),
+            React.createElement(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.createElement(ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
         React.createElement(ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
                 if (pendingIgnoredEditing)

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

@@ -57,13 +57,14 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import React from 'react';
 import { render, fireEvent, within, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { DndProvider } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
 import { config } from 'react-transition-group';
+import { mockDndKit } from '../../../test-utils/dndKit';
+import { DndContext } from '@dnd-kit/core';
 import { mockBasicTableSizing } from '../../../test-utils';
 import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
 import { createEntity, createMetadata, selectedAttributeTypes } from './AttributesTable.test-data';
 import AttributesTable from './AttributesTable';
+jest.mock('@dnd-kit/core', function () { return mockDndKit; });
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { debounce: function (x) { return x; } })); });
 var visibleColumns = ['ovValues', 'values'];
 var crosswalksMap = {
@@ -116,7 +117,7 @@ var setUp = function (props) {
     var user = userEvent.setup({ delay: null, skipHover: true });
     var Providers = function (_a) {
         var children = _a.children;
-        return (React.createElement(DndProvider, { backend: HTML5Backend },
+        return (React.createElement(DndContext, null,
             React.createElement(MdmModuleProvider, { values: { metadata: metadata } }, children)));
     };
     var renderer = render(React.createElement(AttributesTable, __assign({}, props)), { wrapper: Providers });
@@ -351,23 +352,29 @@ describe('attribute table tests', function () {
         expect(within(getCellByIndexes(1, 0)).queryByText('Boolean')).toBeInTheDocument();
         expect(within(getCellByIndexes(1, 1)).queryByText('Yes')).toBeInTheDocument();
         expect(within(getCellByIndexes(0, 0)).queryByText('text field value')).toBeInTheDocument();
-        expect(within(getCellByIndexes(0, 0)).queryByText('<h1>String</h1>')).toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 0)).queryByText('String Label')).toBeInTheDocument();
         expect(within(getCellByIndexes(0, 1)).queryByText('text field value')).toBeInTheDocument();
         var dragIndicator = getCellByIndexes(0, 0).querySelector('.dragIndicator');
-        fireEvent.dragStart(dragIndicator);
+        fireEvent.mouseDown(dragIndicator);
         jest.runAllTimers();
         expect(within(getCellByIndexes(1, 0)).queryByText('Yes')).not.toBeInTheDocument();
         expect(within(getCellByIndexes(1, 0)).queryByText('Boolean')).toBeInTheDocument();
         expect(within(getCellByIndexes(1, 1)).queryByText('Yes')).not.toBeInTheDocument();
         expect(within(getCellByIndexes(0, 0)).queryByText('text field value')).not.toBeInTheDocument();
-        expect(within(getCellByIndexes(0, 0)).queryByText('<h1>String</h1>')).toBeInTheDocument();
+        expect(within(getCellByIndexes(0, 0)).queryByText('String Label')).toBeInTheDocument();
         expect(within(getCellByIndexes(0, 1)).queryByText('text field value')).not.toBeInTheDocument();
         var dropRow = getCellByIndexes(1, 0);
-        fireEvent.dragEnter(dropRow);
+        fireEvent.mouseOver(dropRow);
         expect(within(getCellByIndexes(0, 0)).queryByText('Boolean')).toBeInTheDocument();
-        expect(within(getCellByIndexes(1, 0)).queryByText('<h1>String</h1>')).toBeInTheDocument();
-        fireEvent.dragEnd(dropRow);
-        expect(onSelectAttributeTypes).toHaveBeenCalledWith([selectedAttributeTypes[1], selectedAttributeTypes[0]]);
+        expect(within(getCellByIndexes(1, 0)).queryByText('String Label')).toBeInTheDocument();
+        fireEvent.mouseUp(dragIndicator);
+        expect(onSelectAttributeTypes).toHaveBeenCalledWith([
+            selectedAttributeTypes[1],
+            selectedAttributeTypes[0],
+            selectedAttributeTypes[2],
+            selectedAttributeTypes[3],
+            selectedAttributeTypes[4]
+        ]);
         unmockTableSizing();
     });
     it('should pin and ignore attributes', function () { return __awaiter(void 0, void 0, void 0, function () {

package/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
 import { OvValues } from '../../types';
+import { DraggableProps } from '../../../../../types/basicTable';
 type Props = {
     value: OvValues;
     someRowIsDragging?: boolean;
-    dragRef?: React.Ref<HTMLDivElement>;
+    draggableProps?: DraggableProps;
 };
-export declare const OvValuesRenderer: ({ value: { values, attributeType }, someRowIsDragging, dragRef }: Props) => React.JSX.Element;
+export declare const OvValuesRenderer: ({ value: { values, attributeType }, someRowIsDragging, draggableProps }: Props) => React.JSX.Element;
 export {};

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

@@ -1,3 +1,14 @@
+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);
+};
 import React from 'react';
 import classnames from 'classnames';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
@@ -8,12 +19,12 @@ import { useMdmEntity } from '../../../../../contexts/MdmModuleContext';
 import { useCommonStyles } from '../../styles';
 import { useStyles } from './styles';
 export var OvValuesRenderer = function (_a) {
-    var _b = _a.value, values = _b.values, attributeType = _b.attributeType, someRowIsDragging = _a.someRowIsDragging, dragRef = _a.dragRef;
+    var _b = _a.value, values = _b.values, attributeType = _b.attributeType, someRowIsDragging = _a.someRowIsDragging, draggableProps = _a.draggableProps;
     var styles = useStyles();
     var commonStyles = useCommonStyles();
     var entity = useMdmEntity();
     return (React.createElement("div", { className: classnames(styles.root, commonStyles.basicCell) },
-        React.createElement("div", { ref: dragRef, className: styles.dragIndicator },
+        React.createElement("div", __assign({}, draggableProps, { className: styles.dragIndicator }),
             React.createElement(DragIndicatorIcon, { className: styles.dragIndicatorIcon })),
         React.createElement(AttributeTitle, { className: styles.attributeTitle, label: attributeType.label }),
         !someRowIsDragging && (React.createElement(EntityContext.Provider, { value: entity },

package/features/crosswalks/CrosswalkDndComponent/CrosswalkDndComponent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BasicTable } from '../../../BasicTable';
+type Props = {
+    tableRef: React.ElementRef<typeof BasicTable>;
+    children: React.ReactNode;
+};
+export declare const CrosswalkDndComponent: ({ children, tableRef }: Props) => React.JSX.Element;
+export {};

package/features/crosswalks/CrosswalkDndComponent/CrosswalkDndComponent.js

@@ -0,0 +1,24 @@
+import React, { useCallback, useMemo } from 'react';
+import { useDndBasicTableScrollModifier } from '../../../hooks/useDndBasicTableScrollModifier';
+import { useDraggingCrosswalk } from '../hooks/useDraggingCrosswalk';
+import { snapCenterToCursor } from '@dnd-kit/modifiers';
+import { DndContext, DragOverlay, MouseSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { CrosswalkDragPreview } from '../CrosswalkDragPreview';
+export var CrosswalkDndComponent = function (_a) {
+    var children = _a.children, tableRef = _a.tableRef;
+    var _b = useDndBasicTableScrollModifier({ tableRef: tableRef }), scrollModifier = _b.scrollModifier, stopScroll = _b.stopScroll;
+    var dragOverlayStyles = useMemo(function () { return ({ width: 'max-content' }); }, []);
+    var _c = useDraggingCrosswalk(), draggingCrosswalk = _c.draggingCrosswalk, onDragEndCrosswalk = _c.onDragEnd, onDragStart = _c.onDragStart;
+    var onDragEnd = useCallback(function () {
+        onDragEndCrosswalk();
+        stopScroll();
+    }, [onDragEndCrosswalk, stopScroll]);
+    var dndContextModifiers = useMemo(function () { return [scrollModifier]; }, [scrollModifier]);
+    var dragOverlayModifiers = useMemo(function () { return [snapCenterToCursor]; }, []);
+    var mouseSensor = useSensor(MouseSensor);
+    var sensors = useSensors(mouseSensor);
+    return (React.createElement(DndContext, { sensors: sensors, modifiers: dndContextModifiers, autoScroll: false, onDragStart: onDragStart, onDragEnd: onDragEnd },
+        React.createElement(DragOverlay, { style: dragOverlayStyles, modifiers: dragOverlayModifiers, dropAnimation: null },
+            React.createElement(CrosswalkDragPreview, { crosswalk: draggingCrosswalk })),
+        children));
+};

package/features/crosswalks/CrosswalkDndComponent/index.d.ts

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

package/features/crosswalks/CrosswalkDndComponent/index.js

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

package/features/crosswalks/CrosswalkDragPreview/CrosswalkDragPreview.js

@@ -0,0 +1,30 @@
+import React, { memo, useState } from 'react';
+import classnames from 'classnames';
+import { canAddCrosswalk, getSourceSystemLabel } from '@reltio/mdm-sdk';
+import { useDndMonitor } from '@dnd-kit/core';
+import Typography from '@mui/material/Typography';
+import { useMdmMetadata } from '../../../contexts/MdmModuleContext';
+import { useCrosswalkColor } from '../../../contexts/CrosswalksDisplayContext';
+import { SourceIcon } from '../../../SourceIcon';
+import { ColoredBlock } from '../ColoredBlock';
+import { useStyles } from './styles';
+export var CrosswalkDragPreview = memo(function (_a) {
+    var _b;
+    var crosswalk = _a.crosswalk;
+    var styles = useStyles();
+    var metadata = useMdmMetadata();
+    var color = useCrosswalkColor(crosswalk);
+    var sourceSystemLabel = getSourceSystemLabel(metadata, crosswalk.type);
+    var _c = useState(false), canDrop = _c[0], setCanDrop = _c[1];
+    useDndMonitor({
+        onDragOver: function (event) {
+            var _a, _b, _c;
+            var attributeType = (_c = (_b = (_a = event.over) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.attributeType;
+            setCanDrop(!!attributeType && canAddCrosswalk(crosswalk, attributeType));
+        }
+    });
+    return (React.createElement(ColoredBlock, { color: color, className: classnames(styles.crosswalkPreview, (_b = {}, _b[styles.noDrop] = !canDrop, _b)) },
+        React.createElement(SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),
+        React.createElement(Typography, { className: styles.sourceLabel, variant: 'body2' }, sourceSystemLabel)));
+});
+CrosswalkDragPreview.displayName = 'CrosswalkDragPreview';

package/features/crosswalks/CrosswalkDragPreview/CrosswalkDragPreview.test.d.ts

@@ -0,0 +1 @@
+export {};

package/features/crosswalks/CrosswalkDragPreview/CrosswalkDragPreview.test.js

@@ -0,0 +1,69 @@
+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);
+};
+import React from 'react';
+import * as CrosswalksDisplay from '../../../contexts/CrosswalksDisplayContext';
+import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
+import { CrosswalkDragPreview } from './CrosswalkDragPreview';
+import { act, render, screen } from '@testing-library/react';
+import { DndContext, useDndMonitor } from '@dnd-kit/core';
+jest.mock('@dnd-kit/core', function () { return (__assign(__assign({}, jest.requireActual('@dnd-kit/core')), { useDndMonitor: jest.fn() })); });
+jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { canAddCrosswalk: jest.fn().mockReturnValue(true) })); });
+var defaultProps = {
+    crosswalk: { uri: 'entities/1/crosswalks/1', type: 'configuration/sources/FB', value: '123' }
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var metadata = {
+        sources: [
+            {
+                uri: 'configuration/sources/FB',
+                label: 'Facebook'
+            }
+        ]
+    };
+    var Providers = function (_a) {
+        var children = _a.children;
+        return (React.createElement(DndContext, null,
+            React.createElement(MdmModuleProvider, { values: { metadata: metadata } }, children)));
+    };
+    return render(React.createElement(CrosswalkDragPreview, __assign({}, props)), { wrapper: Providers });
+};
+describe('CrosswalkDragPreview tests', function () {
+    beforeAll(function () {
+        jest.spyOn(CrosswalksDisplay, 'useCrosswalkColor').mockImplementation(function (crosswalks) { return crosswalks === null || crosswalks === void 0 ? void 0 : crosswalks.value; });
+    });
+    it('should render correctly', function () {
+        setUp();
+        expect(screen.getByText('Facebook')).toBeInTheDocument();
+        expect(screen.getByText('F')).toBeInTheDocument();
+        expect(screen.getByTestId('cw-colored-block')).toHaveClass('noDrop');
+    });
+    it('should able for drop', function () {
+        var onDragOver;
+        useDndMonitor.mockImplementation(function (listeners) {
+            onDragOver = listeners.onDragOver;
+        });
+        setUp();
+        act(function () {
+            onDragOver({
+                over: {
+                    data: {
+                        current: {
+                            attributeType: 'testAttrTypeUri'
+                        }
+                    }
+                }
+            });
+        });
+        expect(screen.getByTestId('cw-colored-block')).not.toHaveClass('noDrop');
+    });
+});

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

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"sourceIcon" | "crosswalkPreview" | "sourceLabel">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"sourceIcon" | "crosswalkPreview" | "sourceLabel" | "noDrop">;

package/features/crosswalks/{CrosswalkDragLayer/components/CrosswalkDragPreview → CrosswalkDragPreview}/styles.js

@@ -2,12 +2,14 @@ import { makeStyles } from '@mui/styles';
 export var useStyles = makeStyles({
     crosswalkPreview: {
         height: '28px',
+        width: 'max-content',
         maxWidth: '394px',
         display: 'flex',
         overflow: 'hidden',
         padding: '6px',
         alignItems: 'center',
-        boxSizing: 'border-box'
+        boxSizing: 'border-box',
+        cursor: 'copy'
     },
     sourceLabel: {
         fontSize: '13px',
@@ -19,5 +21,8 @@ export var useStyles = makeStyles({
         width: '16px',
         height: '16px',
         marginRight: '9px'
+    },
+    noDrop: {
+        cursor: 'no-drop'
     }
 });

package/features/crosswalks/CrosswalkRow/CrosswalkRow.js

@@ -1,7 +1,17 @@
+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);
+};
 import React, { useEffect, useRef, useState, memo } from 'react';
 import i18n from 'ui-i18n';
-import { useDrag } from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
+import { useDraggable } from '@dnd-kit/core';
 import { eqCrosswalks, getLastUriPart, getSourceSystemLabel, isCrosswalkDisabled } from '@reltio/mdm-sdk';
 import Typography from '@mui/material/Typography';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -34,17 +44,15 @@ export var CrosswalkRow = memo(function (_a) {
     var crosswalkId = getLastUriPart(crosswalk.uri);
     var crosswalkDisabled = isCrosswalkDisabled(crosswalk);
     var styles = useStyles({ color: color, isOpaque: !isDimmed, isFocused: isFocused });
-    var _j = useDrag({
-        item: {
+    var _j = useDraggable({
+        id: crosswalk.uri,
+        data: {
             type: 'Crosswalk',
             crosswalk: crosswalk
         },
-        canDrag: !crosswalkDisabled
-    }), drag = _j[1], preview = _j[2];
+        disabled: crosswalkDisabled
+    }), setNodeRef = _j.setNodeRef, attributes = _j.attributes, listeners = _j.listeners;
     var canDelete = !crosswalkDisabled && crosswalk.ownerType !== 'relation';
-    useEffect(function () {
-        preview(getEmptyImage(), { captureDraggingState: true });
-    }, []);
     useEffect(function () {
         var _a, _b;
         if (focusable &&
@@ -62,15 +70,16 @@ export var CrosswalkRow = memo(function (_a) {
     return (React.createElement("div", { className: styles.root, ref: ref },
         React.createElement(SmallIconButtonWithTooltip, { size: "XXS", className: styles.focusedIcon, icon: focusable && VisibilityIcon, onClick: function () { return toggleCrosswalkFocus(); }, disabled: !focusable, tooltipTitle: focusable && i18n.text('Focus') }),
         React.createElement("div", { className: styles.crosswalkWrapper },
-            React.createElement(ColoredBlock, { ref: drag, className: styles.header, color: color, variant: crosswalkDisabled ? 'disabled' : 'standart', onMouseEnter: function () { return highlightCrosswalk(); }, onMouseLeave: function () { return removeHighlight(); } },
+            React.createElement(ColoredBlock, { className: styles.header, color: color, variant: crosswalkDisabled ? 'disabled' : 'standart', onMouseEnter: highlightCrosswalk, onMouseLeave: removeHighlight },
                 isDependent && React.createElement(DependentIcon, { className: styles.dependentIcon }),
                 React.createElement(ArrowExpandButton, { onClick: function () { return setExpanded(function (value) { return !value; }); }, expanded: expanded }),
-                React.createElement(SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),
-                React.createElement(ExpandedValueTooltip, { value: sourceSystemLabel },
-                    React.createElement(Typography, { variant: 'body2', noWrap: true }, sourceSystemLabel)),
-                React.createElement(Spacer, null),
-                React.createElement(ExpandedValueTooltip, { value: crosswalk.value },
-                    React.createElement(Typography, { variant: 'body2', className: styles.labelValue, noWrap: true }, crosswalk.value))),
+                React.createElement("div", __assign({ className: styles.dragWrapper, ref: setNodeRef }, listeners, attributes),
+                    React.createElement(SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),
+                    React.createElement(ExpandedValueTooltip, { value: sourceSystemLabel },
+                        React.createElement(Typography, { variant: 'body2', noWrap: true }, sourceSystemLabel)),
+                    React.createElement(Spacer, null),
+                    React.createElement(ExpandedValueTooltip, { value: crosswalk.value },
+                        React.createElement(Typography, { variant: 'body2', className: styles.labelValue, noWrap: true }, crosswalk.value)))),
             expanded && (React.createElement("div", { className: styles.attributesWrapper },
                 canDelete && (React.createElement("div", { className: styles.deleteCrosswalkButton },
                     React.createElement(SmallIconButtonWithTooltip, { icon: DeleteIcon, disabled: disableDelete, onClick: function () { return setDeleteDialogOpen(true); }, size: "XS", tooltipTitle: disableDelete

package/features/crosswalks/CrosswalkRow/CrosswalkRow.test.js

@@ -52,14 +52,12 @@ import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment';
 import { ThemeProvider } from '@mui/styles';
 import { createTheme } from '@mui/material/styles';
-import * as reactDnd from 'react-dnd';
-import { getEmptyImage } from 'react-dnd-html5-backend';
 import { isCrosswalkDisabled, theme } from '@reltio/mdm-sdk';
 import * as CrosswalksDisplay from '../../../contexts/CrosswalksDisplayContext';
 import { MdmModuleProvider } from '../../../contexts/MdmModuleContext';
 import { CrosswalkRow } from './CrosswalkRow';
+import { DndContext } from '@dnd-kit/core';
 jest.unmock('@mui/styles');
-jest.mock('react-dnd', function () { return (__assign(__assign({}, jest.requireActual('react-dnd')), { useDrag: jest.fn() })); });
 jest.mock('@reltio/mdm-sdk', function () { return (__assign(__assign({}, jest.requireActual('@reltio/mdm-sdk')), { isCrosswalkDisabled: jest.fn() })); });
 var metadata = {
     sources: [
@@ -95,14 +93,16 @@ var defaultProps = {
     onDelete: jest.fn(),
     onEdit: jest.fn()
 };
-var setUp = function (props) {
+var setUp = function (props, dndProps) {
     if (props === void 0) { props = defaultProps; }
+    if (dndProps === void 0) { dndProps = {}; }
     var user = userEvent.setup({ delay: null });
     var Providers = function (_a) {
         var children = _a.children;
-        return (React.createElement(MdmModuleProvider, { values: { metadata: metadata } },
-            React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
-                React.createElement(ThemeProvider, { theme: createTheme(theme) }, children))));
+        return (React.createElement(DndContext, __assign({}, dndProps),
+            React.createElement(MdmModuleProvider, { values: { metadata: metadata } },
+                React.createElement(LocalizationProvider, { dateAdapter: AdapterMoment },
+                    React.createElement(ThemeProvider, { theme: createTheme(theme) }, children)))));
     };
     var renderer = render(React.createElement(CrosswalkRow, __assign({}, props)), { wrapper: Providers });
     return __assign(__assign({}, renderer), { user: user });
@@ -111,8 +111,6 @@ describe('CrosswalkRow tests', function () {
     var highlightCrosswalk = jest.fn();
     var removeHighlight = jest.fn();
     var toggleCrosswalkFocus = jest.fn();
-    var preview = jest.fn();
-    var useDragMock = jest.spyOn(reactDnd, 'useDrag').mockReturnValue([undefined, function () { return null; }, preview]);
     var useHighlightedCrosswalksMock = jest.spyOn(CrosswalksDisplay, 'useHighlightedCrosswalks').mockReturnValue([]);
     beforeEach(function () {
         isCrosswalkDisabled.mockReturnValue(false);
@@ -444,28 +442,4 @@ describe('CrosswalkRow tests', function () {
         rerender(React.createElement(CrosswalkRow, __assign({}, props, { crosswalk: __assign({}, crosswalk) })));
         expect(node.scrollIntoView).toHaveBeenCalled();
     });
-    describe('dnd', function () {
-        afterEach(function () {
-            useDragMock.mockClear();
-        });
-        it('should use correct drag item', function () {
-            setUp();
-            var _a = useDragMock.mock.calls[0][0], item = _a.item, canDrag = _a.canDrag;
-            expect(item).toEqual({
-                type: 'Crosswalk',
-                crosswalk: defaultProps.crosswalk
-            });
-            expect(canDrag).toBe(true);
-        });
-        it('should use empty image preview', function () {
-            setUp();
-            expect(preview).toHaveBeenCalledWith(getEmptyImage(), { captureDraggingState: true });
-        });
-        it('should not allow drag if crosswalk is disabled', function () {
-            isCrosswalkDisabled.mockReturnValue(true);
-            setUp();
-            var canDrag = useDragMock.mock.calls[0][0].canDrag;
-            expect(canDrag).toBe(false);
-        });
-    });
 });

package/features/crosswalks/CrosswalkRow/DndCrosswalkRow.test.d.ts

@@ -0,0 +1 @@
+export {};