@reltio/components 1.4.2017 → 1.4.2019

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

@@ -0,0 +1,97 @@
+"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.DndContextComponent = void 0;
+var react_1 = __importStar(require("react"));
+var DndContext_1 = require("./DndContext");
+var DndMonitorContext_1 = require("./DndMonitorContext");
+var useDndMonitorProvider_1 = require("./useDndMonitorProvider");
+var DndContextComponent = function (_a) {
+    var onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, onDragOver = _a.onDragOver, children = _a.children;
+    var draggableNodesRef = (0, react_1.useRef)(new Map());
+    var droppableNodesRef = (0, react_1.useRef)(new Map());
+    var _b = (0, useDndMonitorProvider_1.useDndMonitorProvider)(), dispatchMonitorEvent = _b[0], registerMonitorListener = _b[1];
+    var dragActiveIdRef = (0, react_1.useRef)(null);
+    var dragOverIdRef = (0, react_1.useRef)(null);
+    var _c = (0, react_1.useState)(null), dragActive = _c[0], setDragActive = _c[1];
+    var handleDragStart = (0, react_1.useCallback)(function (nodeId) {
+        var draggableNode = draggableNodesRef.current.get(nodeId);
+        dragActiveIdRef.current = nodeId;
+        setDragActive(true);
+        var event = {
+            active: draggableNode
+        };
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event);
+        dispatchMonitorEvent({
+            type: 'onDragStart',
+            event: event
+        });
+    }, [dispatchMonitorEvent, onDragStart]);
+    var handleDragOver = (0, react_1.useCallback)(function (nodeId) {
+        dragOverIdRef.current = nodeId;
+        var draggableNode = draggableNodesRef.current.get(dragActiveIdRef.current);
+        var droppableNode = droppableNodesRef.current.get(nodeId);
+        var event = {
+            active: draggableNode,
+            over: droppableNode
+        };
+        onDragOver === null || onDragOver === void 0 ? void 0 : onDragOver(event);
+        dispatchMonitorEvent({
+            type: 'onDragOver',
+            event: {
+                active: draggableNode,
+                over: droppableNode
+            }
+        });
+    }, [dispatchMonitorEvent, onDragOver]);
+    var handleDragEnd = (0, react_1.useCallback)(function () {
+        var draggableNode = draggableNodesRef.current.get(dragActiveIdRef.current);
+        var droppableNode = droppableNodesRef.current.get(dragOverIdRef.current);
+        var event = {
+            active: draggableNode,
+            over: droppableNode
+        };
+        setDragActive(false);
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event);
+        dispatchMonitorEvent({
+            type: 'onDragEnd',
+            event: event
+        });
+        dragActiveIdRef.current = null;
+        dragOverIdRef.current = null;
+    }, [dispatchMonitorEvent, onDragEnd]);
+    var contextValue = (0, react_1.useMemo)(function () { return ({
+        draggableNodesRef: draggableNodesRef,
+        droppableNodesRef: droppableNodesRef,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragOver: handleDragOver,
+        dragActive: dragActive,
+        measureDroppableContainers: function () { }
+    }); }, [dragActive, handleDragStart, handleDragEnd, handleDragOver]);
+    return (react_1.default.createElement(DndContext_1.DndContext.Provider, { value: contextValue },
+        react_1.default.createElement(DndMonitorContext_1.DndMonitorContext.Provider, { value: registerMonitorListener }, children)));
+};
+exports.DndContextComponent = DndContextComponent;

package/cjs/test-utils/dndKit/DndMonitorContext.d.ts

@@ -0,0 +1,2 @@
+import { RegisterListener } from '@dnd-kit/core/dist/components/DndMonitor/types';
+export declare const DndMonitorContext: import("react").Context<RegisterListener>;

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DndMonitorContext = void 0;
+var react_1 = require("react");
+exports.DndMonitorContext = (0, react_1.createContext)(null);

package/cjs/test-utils/dndKit/DragOverlay.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DragOverlay as DndKitDragOverLay } from '@dnd-kit/core';
+type Props = React.ComponentProps<typeof DndKitDragOverLay>;
+export declare const DragOverlay: ({ children }: Props) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DragOverlay = void 0;
+var react_1 = __importDefault(require("react"));
+var useDndContext_1 = require("./useDndContext");
+var DragOverlay = function (_a) {
+    var children = _a.children;
+    var dndContext = (0, useDndContext_1.useDndContext)();
+    return react_1.default.createElement("div", null, dndContext.dragActive ? children : null);
+};
+exports.DragOverlay = DragOverlay;

package/cjs/test-utils/dndKit/index.d.ts

@@ -0,0 +1,32 @@
+export declare const mockDndKit: {
+    DndContext: ({ onDragStart, onDragEnd, onDragOver, children }: import("@dnd-kit/core").DndContextProps) => import("react").JSX.Element;
+    DragOverlay: ({ children }: import("@dnd-kit/core").DragOverlayProps) => import("react").JSX.Element;
+    useDraggable: (props: import("./type").MockUseDraggableArguments) => {
+        attributes: {};
+        listeners: {
+            onMouseDown?: undefined;
+            onMouseUp?: undefined;
+        } | {
+            onMouseDown(): void;
+            onMouseUp(): void;
+        };
+        setNodeRef: (element: HTMLElement | null) => void;
+    };
+    useDroppable: (props: import("./type").MockUseDraggableArguments) => {
+        setNodeRef: (element: HTMLElement | null) => void;
+    };
+    useDndContext: () => {
+        draggableNodesRef: React.MutableRefObject<Map<string, import("./type").MockUseDraggableArguments>>;
+        droppableNodesRef: React.MutableRefObject<Map<string, import("./type").MockUseDraggableArguments>>;
+        onDragStart: (nodeId: string) => void;
+        onDragOver: (nodeId: string) => void;
+        onDragEnd: () => void;
+        dragActive: boolean;
+    };
+    useDndMonitor: (listener: import("@dnd-kit/core").DndMonitorListener) => void;
+    useSensor: jest.Mock<any, any, any>;
+    useSensors: jest.Mock<any, any, any>;
+    MeasuringStrategy: {
+        Always: string;
+    };
+};

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mockDndKit = void 0;
+var DndContextComponent_1 = require("./DndContextComponent");
+var DragOverlay_1 = require("./DragOverlay");
+var useDndContext_1 = require("./useDndContext");
+var useDndMonitor_1 = require("./useDndMonitor");
+var useDraggable_1 = require("./useDraggable");
+var useDroppable_1 = require("./useDroppable");
+exports.mockDndKit = {
+    DndContext: DndContextComponent_1.DndContextComponent,
+    DragOverlay: DragOverlay_1.DragOverlay,
+    useDraggable: useDraggable_1.useDraggable,
+    useDroppable: useDroppable_1.useDroppable,
+    useDndContext: useDndContext_1.useDndContext,
+    useDndMonitor: useDndMonitor_1.useDndMonitor,
+    useSensor: jest.fn(),
+    useSensors: jest.fn(),
+    MeasuringStrategy: {
+        Always: 'Always'
+    }
+};

package/cjs/test-utils/dndKit/type.d.ts

@@ -0,0 +1,17 @@
+import { UseDraggableArguments, UseDroppableArguments } from '@dnd-kit/core';
+export type MockUseDraggableArguments = Omit<UseDraggableArguments, 'id'> & {
+    id: string;
+    node: React.MutableRefObject<HTMLElement>;
+    rect?: unknown;
+    data: {
+        current: any;
+    };
+};
+export type MockUseDroppableArguments = Omit<UseDroppableArguments, 'id'> & {
+    id: string;
+    node: React.MutableRefObject<HTMLElement>;
+    rect?: unknown;
+    data: {
+        current: any;
+    };
+};

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

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

package/cjs/test-utils/dndKit/useDndContext.d.ts

@@ -0,0 +1,8 @@
+export declare const useDndContext: () => {
+    draggableNodesRef: React.MutableRefObject<Map<string, import("./type").MockUseDraggableArguments>>;
+    droppableNodesRef: React.MutableRefObject<Map<string, import("./type").MockUseDraggableArguments>>;
+    onDragStart: (nodeId: string) => void;
+    onDragOver: (nodeId: string) => void;
+    onDragEnd: () => void;
+    dragActive: boolean;
+};

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDndContext = void 0;
+var react_1 = require("react");
+var DndContext_1 = require("./DndContext");
+var useDndContext = function () {
+    var contextValue = (0, react_1.useContext)(DndContext_1.DndContext);
+    if (!contextValue) {
+        throw Error('Must use inside DndContext');
+    }
+    return contextValue;
+};
+exports.useDndContext = useDndContext;

package/cjs/test-utils/dndKit/useDndMonitor.d.ts

@@ -0,0 +1,2 @@
+import { DndMonitorArguments } from '@dnd-kit/core';
+export declare const useDndMonitor: (listener: DndMonitorArguments) => void;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDndMonitor = void 0;
+var react_1 = require("react");
+var DndMonitorContext_1 = require("./DndMonitorContext");
+var useDndMonitor = function (listener) {
+    var registerListener = (0, react_1.useContext)(DndMonitorContext_1.DndMonitorContext);
+    (0, react_1.useEffect)(function () {
+        var unsubscribe = registerListener(listener);
+        return unsubscribe;
+    }, [listener, registerListener]);
+};
+exports.useDndMonitor = useDndMonitor;

package/cjs/test-utils/dndKit/useDndMonitorProvider.d.ts

@@ -0,0 +1 @@
+export declare const useDndMonitorProvider: () => readonly [({ type, event }: any) => void, (listener: any) => () => boolean];

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDndMonitorProvider = void 0;
+var react_1 = require("react");
+var useDndMonitorProvider = function () {
+    var listeners = (0, react_1.useState)(function () { return new Set(); })[0];
+    var registerListener = (0, react_1.useCallback)(function (listener) {
+        listeners.add(listener);
+        return function () { return listeners.delete(listener); };
+    }, [listeners]);
+    var dispatch = (0, react_1.useCallback)(function (_a) {
+        var type = _a.type, event = _a.event;
+        listeners.forEach(function (listener) { var _a; return (_a = listener[type]) === null || _a === void 0 ? void 0 : _a.call(listener, event); });
+    }, [listeners]);
+    return [dispatch, registerListener];
+};
+exports.useDndMonitorProvider = useDndMonitorProvider;

package/cjs/test-utils/dndKit/useDraggable.d.ts

@@ -0,0 +1,12 @@
+import { MockUseDraggableArguments } from './type';
+export declare const useDraggable: (props: MockUseDraggableArguments) => {
+    attributes: {};
+    listeners: {
+        onMouseDown?: undefined;
+        onMouseUp?: undefined;
+    } | {
+        onMouseDown(): void;
+        onMouseUp(): void;
+    };
+    setNodeRef: (element: HTMLElement | null) => void;
+};

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDraggable = void 0;
+var react_1 = require("react");
+var utilities_1 = require("@dnd-kit/utilities");
+var useDndContext_1 = require("./useDndContext");
+var useDraggable = function (props) {
+    var _a = (0, useDndContext_1.useDndContext)(), draggableNodesRef = _a.draggableNodesRef, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd;
+    var onChangeNode = (0, react_1.useCallback)(function (newElement) {
+        if (newElement) {
+            newElement.setAttribute('data-test-dnd-drag-id', props.id);
+        }
+    }, [props.id]);
+    var _b = (0, utilities_1.useNodeRef)(onChangeNode), node = _b[0], setNodeRef = _b[1];
+    var data = (0, react_1.useRef)(props.data);
+    (0, react_1.useEffect)(function () {
+        draggableNodesRef.current.set(props.id, { id: props.id, data: data, node: node });
+        return function () {
+            var node = draggableNodesRef.current.get(props.id);
+            if (node) {
+                draggableNodesRef.current.delete(props.id);
+            }
+        };
+    }, [props.id]);
+    var listeners = (0, react_1.useMemo)(function () {
+        return props.disabled
+            ? {}
+            : {
+                onMouseDown: function () {
+                    onDragStart(props.id);
+                },
+                onMouseUp: function () {
+                    onDragEnd();
+                }
+            };
+    }, [props.id, onDragStart, onDragEnd, props.disabled]);
+    return {
+        attributes: {},
+        listeners: listeners,
+        setNodeRef: setNodeRef
+    };
+};
+exports.useDraggable = useDraggable;

package/cjs/test-utils/dndKit/useDroppable.d.ts

@@ -0,0 +1,4 @@
+import { MockUseDraggableArguments } from './type';
+export declare const useDroppable: (props: MockUseDraggableArguments) => {
+    setNodeRef: (element: HTMLElement | null) => void;
+};

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';