@reltio/components 1.4.2017 → 1.4.2019

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

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

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

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

package/cjs/contexts/CrosswalksDisplayContext/index.js

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

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

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

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

@@ -60,7 +60,7 @@ var getRowCellKey = function (_a) {
     return "".concat(id, "[").concat(getIdFromRowValue(rowValue), "][").concat(cellIndex, "]");
 };
 var AttributesTable = function (_a) {
-    var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? helpers_1.DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? ramda_1.identity : _c, _d = _a.onPin, onPin = _d === void 0 ? ramda_1.identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? ramda_1.identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? ramda_1.identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? ramda_1.identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? ramda_1.identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri;
+    var entity = _a.entity, isLoading = _a.isLoading, crosswalksMap = _a.crosswalksMap, _b = _a.visibleColumns, visibleColumns = _b === void 0 ? helpers_1.DEFAULT_VISIBLE_COLUMNS : _b, onChangeVisibleColumns = _a.onChangeVisibleColumns, readOnly = _a.readOnly, _c = _a.onDelete, onDelete = _c === void 0 ? ramda_1.identity : _c, _d = _a.onPin, onPin = _d === void 0 ? ramda_1.identity : _d, _e = _a.onIgnore, onIgnore = _e === void 0 ? ramda_1.identity : _e, _f = _a.onEdit, onEdit = _f === void 0 ? ramda_1.identity : _f, _g = _a.onAdd, onAdd = _g === void 0 ? ramda_1.identity : _g, emptyTempAttributeUris = _a.emptyTempAttributeUris, selectedAttributeTypes = _a.selectedAttributeTypes, _h = _a.onSelectAttributeTypes, onSelectAttributeTypes = _h === void 0 ? ramda_1.identity : _h, additionalHeaderItems = _a.additionalHeaderItems, className = _a.className, activeSurvivorshipGroupUri = _a.activeSurvivorshipGroupUri, tableRef = _a.tableRef;
     var styles = (0, styles_1.useStyles)();
     var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     var visibleColumnsData = (0, react_1.useMemo)(function () {
@@ -142,7 +142,7 @@ var AttributesTable = function (_a) {
             react_1.default.createElement(ColumnsSettings_1.ColumnsSettings, { columnsData: helpers_1.COLUMNS_DATA, selectedColumns: visibleColumns, onChangeColumns: onChangeVisibleColumns })),
         react_1.default.createElement("div", { className: styles.tableContent },
             isLoading && react_1.default.createElement(LinearLoadIndicator_1.LinearLoadIndicator, null),
-            react_1.default.createElement(BasicTable_1.BasicTable, { fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })),
+            react_1.default.createElement(BasicTable_1.BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext })),
         react_1.default.createElement(ConfirmDeleteDialog_1.ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
         react_1.default.createElement(ConfirmEditIgnoredDialog_1.ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
                 if (pendingIgnoredEditing)

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

@@ -62,13 +62,14 @@ 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_1 = require("react-dnd");
-var react_dnd_html5_backend_1 = __importDefault(require("react-dnd-html5-backend"));
 var react_transition_group_1 = require("react-transition-group");
+var dndKit_1 = require("../../../test-utils/dndKit");
+var core_1 = require("@dnd-kit/core");
 var test_utils_1 = require("../../../test-utils");
 var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
 var AttributesTable_test_data_1 = require("./AttributesTable.test-data");
 var AttributesTable_1 = __importDefault(require("./AttributesTable"));
+jest.mock('@dnd-kit/core', function () { return dndKit_1.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 = {
@@ -121,7 +122,7 @@ var setUp = function (props) {
     var user = user_event_1.default.setup({ delay: null, skipHover: true });
     var Providers = function (_a) {
         var children = _a.children;
-        return (react_1.default.createElement(react_dnd_1.DndProvider, { backend: react_dnd_html5_backend_1.default },
+        return (react_1.default.createElement(core_1.DndContext, null,
             react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { metadata: metadata } }, children)));
     };
     var renderer = (0, react_2.render)(react_1.default.createElement(AttributesTable_1.default, __assign({}, props)), { wrapper: Providers });
@@ -356,23 +357,29 @@ describe('attribute table tests', function () {
         expect((0, react_2.within)(getCellByIndexes(1, 0)).queryByText('Boolean')).toBeInTheDocument();
         expect((0, react_2.within)(getCellByIndexes(1, 1)).queryByText('Yes')).toBeInTheDocument();
         expect((0, react_2.within)(getCellByIndexes(0, 0)).queryByText('text field value')).toBeInTheDocument();
-        expect((0, react_2.within)(getCellByIndexes(0, 0)).queryByText('<h1>String</h1>')).toBeInTheDocument();
+        expect((0, react_2.within)(getCellByIndexes(0, 0)).queryByText('String Label')).toBeInTheDocument();
         expect((0, react_2.within)(getCellByIndexes(0, 1)).queryByText('text field value')).toBeInTheDocument();
         var dragIndicator = getCellByIndexes(0, 0).querySelector('.dragIndicator');
-        react_2.fireEvent.dragStart(dragIndicator);
+        react_2.fireEvent.mouseDown(dragIndicator);
         jest.runAllTimers();
         expect((0, react_2.within)(getCellByIndexes(1, 0)).queryByText('Yes')).not.toBeInTheDocument();
         expect((0, react_2.within)(getCellByIndexes(1, 0)).queryByText('Boolean')).toBeInTheDocument();
         expect((0, react_2.within)(getCellByIndexes(1, 1)).queryByText('Yes')).not.toBeInTheDocument();
         expect((0, react_2.within)(getCellByIndexes(0, 0)).queryByText('text field value')).not.toBeInTheDocument();
-        expect((0, react_2.within)(getCellByIndexes(0, 0)).queryByText('<h1>String</h1>')).toBeInTheDocument();
+        expect((0, react_2.within)(getCellByIndexes(0, 0)).queryByText('String Label')).toBeInTheDocument();
         expect((0, react_2.within)(getCellByIndexes(0, 1)).queryByText('text field value')).not.toBeInTheDocument();
         var dropRow = getCellByIndexes(1, 0);
-        react_2.fireEvent.dragEnter(dropRow);
+        react_2.fireEvent.mouseOver(dropRow);
         expect((0, react_2.within)(getCellByIndexes(0, 0)).queryByText('Boolean')).toBeInTheDocument();
-        expect((0, react_2.within)(getCellByIndexes(1, 0)).queryByText('<h1>String</h1>')).toBeInTheDocument();
-        react_2.fireEvent.dragEnd(dropRow);
-        expect(onSelectAttributeTypes).toHaveBeenCalledWith([AttributesTable_test_data_1.selectedAttributeTypes[1], AttributesTable_test_data_1.selectedAttributeTypes[0]]);
+        expect((0, react_2.within)(getCellByIndexes(1, 0)).queryByText('String Label')).toBeInTheDocument();
+        react_2.fireEvent.mouseUp(dragIndicator);
+        expect(onSelectAttributeTypes).toHaveBeenCalledWith([
+            AttributesTable_test_data_1.selectedAttributeTypes[1],
+            AttributesTable_test_data_1.selectedAttributeTypes[0],
+            AttributesTable_test_data_1.selectedAttributeTypes[2],
+            AttributesTable_test_data_1.selectedAttributeTypes[3],
+            AttributesTable_test_data_1.selectedAttributeTypes[4]
+        ]);
         unmockTableSizing();
     });
     it('should pin and ignore attributes', function () { return __awaiter(void 0, void 0, void 0, function () {

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

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -14,12 +25,12 @@ var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
 var styles_1 = require("../../styles");
 var styles_2 = require("./styles");
 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 = (0, styles_2.useStyles)();
     var commonStyles = (0, styles_1.useCommonStyles)();
     var entity = (0, MdmModuleContext_1.useMdmEntity)();
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.root, commonStyles.basicCell) },
-        react_1.default.createElement("div", { ref: dragRef, className: styles.dragIndicator },
+        react_1.default.createElement("div", __assign({}, draggableProps, { className: styles.dragIndicator }),
             react_1.default.createElement(DragIndicator_1.default, { className: styles.dragIndicatorIcon })),
         react_1.default.createElement(AttributeTitle_1.AttributeTitle, { className: styles.attributeTitle, label: attributeType.label }),
         !someRowIsDragging && (react_1.default.createElement(EntityContext_1.EntityContext.Provider, { value: entity },

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

@@ -0,0 +1,51 @@
+"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.CrosswalkDndComponent = void 0;
+var react_1 = __importStar(require("react"));
+var useDndBasicTableScrollModifier_1 = require("../../../hooks/useDndBasicTableScrollModifier");
+var useDraggingCrosswalk_1 = require("../hooks/useDraggingCrosswalk");
+var modifiers_1 = require("@dnd-kit/modifiers");
+var core_1 = require("@dnd-kit/core");
+var CrosswalkDragPreview_1 = require("../CrosswalkDragPreview");
+var CrosswalkDndComponent = function (_a) {
+    var children = _a.children, tableRef = _a.tableRef;
+    var _b = (0, useDndBasicTableScrollModifier_1.useDndBasicTableScrollModifier)({ tableRef: tableRef }), scrollModifier = _b.scrollModifier, stopScroll = _b.stopScroll;
+    var dragOverlayStyles = (0, react_1.useMemo)(function () { return ({ width: 'max-content' }); }, []);
+    var _c = (0, useDraggingCrosswalk_1.useDraggingCrosswalk)(), draggingCrosswalk = _c.draggingCrosswalk, onDragEndCrosswalk = _c.onDragEnd, onDragStart = _c.onDragStart;
+    var onDragEnd = (0, react_1.useCallback)(function () {
+        onDragEndCrosswalk();
+        stopScroll();
+    }, [onDragEndCrosswalk, stopScroll]);
+    var dndContextModifiers = (0, react_1.useMemo)(function () { return [scrollModifier]; }, [scrollModifier]);
+    var dragOverlayModifiers = (0, react_1.useMemo)(function () { return [modifiers_1.snapCenterToCursor]; }, []);
+    var mouseSensor = (0, core_1.useSensor)(core_1.MouseSensor);
+    var sensors = (0, core_1.useSensors)(mouseSensor);
+    return (react_1.default.createElement(core_1.DndContext, { sensors: sensors, modifiers: dndContextModifiers, autoScroll: false, onDragStart: onDragStart, onDragEnd: onDragEnd },
+        react_1.default.createElement(core_1.DragOverlay, { style: dragOverlayStyles, modifiers: dragOverlayModifiers, dropAnimation: null },
+            react_1.default.createElement(CrosswalkDragPreview_1.CrosswalkDragPreview, { crosswalk: draggingCrosswalk })),
+        children));
+};
+exports.CrosswalkDndComponent = CrosswalkDndComponent;

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

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

package/cjs/features/crosswalks/CrosswalkDndComponent/index.js

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

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

@@ -28,20 +28,31 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CrosswalkDragPreview = void 0;
 var react_1 = __importStar(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
+var core_1 = require("@dnd-kit/core");
 var Typography_1 = __importDefault(require("@mui/material/Typography"));
-var MdmModuleContext_1 = require("../../../../../contexts/MdmModuleContext");
-var CrosswalksDisplayContext_1 = require("../../../../../contexts/CrosswalksDisplayContext");
-var SourceIcon_1 = require("../../../../../SourceIcon");
-var ColoredBlock_1 = require("../../../ColoredBlock");
+var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var CrosswalksDisplayContext_1 = require("../../../contexts/CrosswalksDisplayContext");
+var SourceIcon_1 = require("../../../SourceIcon");
+var ColoredBlock_1 = require("../ColoredBlock");
 var styles_1 = require("./styles");
 exports.CrosswalkDragPreview = (0, react_1.memo)(function (_a) {
+    var _b;
     var crosswalk = _a.crosswalk;
     var styles = (0, styles_1.useStyles)();
     var metadata = (0, MdmModuleContext_1.useMdmMetadata)();
     var color = (0, CrosswalksDisplayContext_1.useCrosswalkColor)(crosswalk);
     var sourceSystemLabel = (0, mdm_sdk_1.getSourceSystemLabel)(metadata, crosswalk.type);
-    return (react_1.default.createElement(ColoredBlock_1.ColoredBlock, { color: color, className: styles.crosswalkPreview },
+    var _c = (0, react_1.useState)(false), canDrop = _c[0], setCanDrop = _c[1];
+    (0, core_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 && (0, mdm_sdk_1.canAddCrosswalk)(crosswalk, attributeType));
+        }
+    });
+    return (react_1.default.createElement(ColoredBlock_1.ColoredBlock, { color: color, className: (0, classnames_1.default)(styles.crosswalkPreview, (_b = {}, _b[styles.noDrop] = !canDrop, _b)) },
         react_1.default.createElement(SourceIcon_1.SourceIcon, { className: styles.sourceIcon, sourceType: crosswalk.type }),
         react_1.default.createElement(Typography_1.default, { className: styles.sourceLabel, variant: 'body2' }, sourceSystemLabel)));
 });

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

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

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

@@ -0,0 +1,97 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var CrosswalksDisplay = __importStar(require("../../../contexts/CrosswalksDisplayContext"));
+var MdmModuleContext_1 = require("../../../contexts/MdmModuleContext");
+var CrosswalkDragPreview_1 = require("./CrosswalkDragPreview");
+var react_2 = require("@testing-library/react");
+var core_1 = require("@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_1.default.createElement(core_1.DndContext, null,
+            react_1.default.createElement(MdmModuleContext_1.MdmModuleProvider, { values: { metadata: metadata } }, children)));
+    };
+    return (0, react_2.render)(react_1.default.createElement(CrosswalkDragPreview_1.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(react_2.screen.getByText('Facebook')).toBeInTheDocument();
+        expect(react_2.screen.getByText('F')).toBeInTheDocument();
+        expect(react_2.screen.getByTestId('cw-colored-block')).toHaveClass('noDrop');
+    });
+    it('should able for drop', function () {
+        var onDragOver;
+        core_1.useDndMonitor.mockImplementation(function (listeners) {
+            onDragOver = listeners.onDragOver;
+        });
+        setUp();
+        (0, react_2.act)(function () {
+            onDragOver({
+                over: {
+                    data: {
+                        current: {
+                            attributeType: 'testAttrTypeUri'
+                        }
+                    }
+                }
+            });
+        });
+        expect(react_2.screen.getByTestId('cw-colored-block')).not.toHaveClass('noDrop');
+    });
+});

package/{features/crosswalks/CrosswalkDragLayer/components → cjs/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/cjs/features/crosswalks/{CrosswalkDragLayer/components/CrosswalkDragPreview → CrosswalkDragPreview}/styles.js

@@ -5,12 +5,14 @@ var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.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',
@@ -22,5 +24,8 @@ exports.useStyles = (0, styles_1.makeStyles)({
         width: '16px',
         height: '16px',
         marginRight: '9px'
+    },
+    noDrop: {
+        cursor: 'no-drop'
     }
 });