@reltio/components 1.4.2018 → 1.4.2020

package/ProfileBandNavigation/useSearchNavigation.test.js

@@ -534,6 +534,94 @@ describe('useSearchNavigation behavior', function () {
                 }
             });
         }); });
+        it('should catch and handle checkEntity error when checking previous entity', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var warnSpy, _a, result, waitFor;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        warnSpy = jest.spyOn(global.console, 'warn');
+                        searchProvider.checkEntity.mockRejectedValue({ errorCode: 403, errorMessage: 'Access is denied' });
+                        _a = setUp(), result = _a.result, waitFor = _a.waitFor;
+                        act(function () {
+                            result.current.onPrev();
+                        });
+                        return [4 /*yield*/, waitFor(function () { return expect(result.current.isPrevDisabled).toBe(false); })];
+                    case 1:
+                        _b.sent();
+                        expect(warnSpy).toHaveBeenCalledWith("Can't load previous page of search", {
+                            errorCode: 403,
+                            errorMessage: 'Access is denied'
+                        });
+                        warnSpy.mockRestore();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should catch and handle requestTotal error when requesting previous entities page', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var warnSpy, searchNavigationData, entity, mdmValues, _a, result, waitFor;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        warnSpy = jest.spyOn(global.console, 'warn');
+                        searchProvider.requestTotal.mockRejectedValue({ errorCode: 403, errorMessage: 'Access is denied' });
+                        searchNavigationData = {
+                            uri: 'uri3',
+                            cache: ['uri3', 'uri4', 'uri5'],
+                            index: 3,
+                            total: 10,
+                            tenant: 't1'
+                        };
+                        entity = { uri: 'uri3' };
+                        mdmValues = __assign(__assign({}, defaultMdmValues), { searchNavigationData: searchNavigationData, entity: entity });
+                        _a = setUp({ mdmValues: mdmValues }), result = _a.result, waitFor = _a.waitFor;
+                        act(function () {
+                            result.current.onPrev();
+                        });
+                        return [4 /*yield*/, waitFor(function () { return expect(result.current.isPrevDisabled).toBe(false); })];
+                    case 1:
+                        _b.sent();
+                        expect(warnSpy).toHaveBeenCalledWith('Failed to load total count of entities', {
+                            errorCode: 403,
+                            errorMessage: 'Access is denied'
+                        });
+                        warnSpy.mockRestore();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should catch and handle requestEntities error when requesting previous entities page', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var warnSpy, searchNavigationData, entity, mdmValues, _a, result, waitFor;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        warnSpy = jest.spyOn(global.console, 'warn');
+                        searchProvider.requestTotal.mockResolvedValue(11);
+                        searchProvider.requestEntities.mockRejectedValue({ errorCode: 403, errorMessage: 'Access is denied' });
+                        searchNavigationData = {
+                            uri: 'uri3',
+                            cache: ['uri3', 'uri4', 'uri5'],
+                            index: 5,
+                            total: 10,
+                            tenant: 't1'
+                        };
+                        entity = { uri: 'uri3' };
+                        mdmValues = __assign(__assign({}, defaultMdmValues), { searchNavigationData: searchNavigationData, entity: entity });
+                        _a = setUp({ mdmValues: mdmValues }), result = _a.result, waitFor = _a.waitFor;
+                        act(function () {
+                            result.current.onPrev();
+                        });
+                        return [4 /*yield*/, waitFor(function () { return expect(result.current.isPrevDisabled).toBe(false); })];
+                    case 1:
+                        _b.sent();
+                        expect(warnSpy).toHaveBeenCalledWith("Can't load previous page of search", {
+                            errorCode: 403,
+                            errorMessage: 'Access is denied'
+                        });
+                        warnSpy.mockRestore();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
     describe('onNext behavior', function () {
         it('should do nothing if cache or uri in searchNavigationData are not specified', function () {
@@ -901,5 +989,93 @@ describe('useSearchNavigation behavior', function () {
                 }
             });
         }); });
+        it('should catch and handle checkEntity error when checking next entity', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var warnSpy, _a, result, waitFor;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        warnSpy = jest.spyOn(global.console, 'warn');
+                        searchProvider.checkEntity.mockRejectedValue({ errorCode: 403, errorMessage: 'Access is denied' });
+                        _a = setUp(), result = _a.result, waitFor = _a.waitFor;
+                        act(function () {
+                            result.current.onNext();
+                        });
+                        return [4 /*yield*/, waitFor(function () { return expect(result.current.isNextDisabled).toBe(false); })];
+                    case 1:
+                        _b.sent();
+                        expect(warnSpy).toHaveBeenCalledWith("Can't load next page of search", {
+                            errorCode: 403,
+                            errorMessage: 'Access is denied'
+                        });
+                        warnSpy.mockRestore();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should catch and handle requestTotal error when requesting next entities page', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var warnSpy, searchNavigationData, entity, mdmValues, _a, result, waitFor;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        warnSpy = jest.spyOn(global.console, 'warn');
+                        searchProvider.requestTotal.mockRejectedValue({ errorCode: 403, errorMessage: 'Access is denied' });
+                        searchNavigationData = {
+                            uri: 'uri5',
+                            cache: ['uri3', 'uri4', 'uri5'],
+                            index: 5,
+                            total: 10,
+                            tenant: 't1'
+                        };
+                        entity = { uri: 'uri5' };
+                        mdmValues = __assign(__assign({}, defaultMdmValues), { searchNavigationData: searchNavigationData, entity: entity });
+                        _a = setUp({ mdmValues: mdmValues }), result = _a.result, waitFor = _a.waitFor;
+                        act(function () {
+                            result.current.onNext();
+                        });
+                        return [4 /*yield*/, waitFor(function () { return expect(result.current.isNextDisabled).toBe(false); })];
+                    case 1:
+                        _b.sent();
+                        expect(warnSpy).toHaveBeenCalledWith('Failed to load total count of entities', {
+                            errorCode: 403,
+                            errorMessage: 'Access is denied'
+                        });
+                        warnSpy.mockRestore();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('should catch and handle requestEntities error when requesting next entities page', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var warnSpy, searchNavigationData, entity, mdmValues, _a, result, waitFor;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        warnSpy = jest.spyOn(global.console, 'warn');
+                        searchProvider.requestTotal.mockResolvedValue(11);
+                        searchProvider.requestEntities.mockRejectedValue({ errorCode: 403, errorMessage: 'Access is denied' });
+                        searchNavigationData = {
+                            uri: 'uri5',
+                            cache: ['uri3', 'uri4', 'uri5'],
+                            index: 5,
+                            total: 10,
+                            tenant: 't1'
+                        };
+                        entity = { uri: 'uri5' };
+                        mdmValues = __assign(__assign({}, defaultMdmValues), { searchNavigationData: searchNavigationData, entity: entity });
+                        _a = setUp({ mdmValues: mdmValues }), result = _a.result, waitFor = _a.waitFor;
+                        act(function () {
+                            result.current.onNext();
+                        });
+                        return [4 /*yield*/, waitFor(function () { return expect(result.current.isNextDisabled).toBe(false); })];
+                    case 1:
+                        _b.sent();
+                        expect(warnSpy).toHaveBeenCalledWith("Can't load next page of search", {
+                            errorCode: 403,
+                            errorMessage: 'Access is denied'
+                        });
+                        warnSpy.mockRestore();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
     });
 });

package/UploadImageDialog/UploadImageDialog.specs.js

@@ -48,8 +48,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 import React from 'react';
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import TestBackend from 'react-dnd-test-backend';
-import { DndProvider } from 'react-dnd';
 import { uploadImage } from '@reltio/mdm-sdk';
 import { MAX_IMAGE_SIZE } from './constants';
 import { UploadImageDialog } from './UploadImageDialog';
@@ -68,8 +66,7 @@ describe('UploadImageDialog tests', function () {
         var props = { onClose: onClose, onUpload: onUpload, open: true };
         var Providers = function (_a) {
             var children = _a.children;
-            return (React.createElement(MdmModuleProvider, { values: { imageServicePath: imageServicePath, environment: environment, tenant: tenant } },
-                React.createElement(DndProvider, { backend: TestBackend }, children)));
+            return (React.createElement(MdmModuleProvider, { values: { imageServicePath: imageServicePath, environment: environment, tenant: tenant } }, children));
         };
         return __assign({ user: user }, render(React.createElement(UploadImageDialog, __assign({}, props)), { wrapper: Providers }));
     };

package/UploadImageDialog/components/TargetBox/TargetBox.js

@@ -1,34 +1,45 @@
-import React from 'react';
+import React, { useCallback, useState } from 'react';
 import classnames from 'classnames';
 import i18n from 'ui-i18n';
-import { useDrop } from 'react-dnd';
-import { NativeTypes } from 'react-dnd-html5-backend';
 import Typography from '@mui/material/Typography';
 import { SelectImageButton } from '../SelectImageButton';
 import UploadIcon from '../../../icons/UploadIcon';
 import { MAX_IMAGE_SIZE } from '../../constants';
 import { useStyles } from './styles';
+var ACCEPTABLE_FILE_TYPE = 'Files';
 export var TargetBox = function (_a) {
     var _b;
     var onAppendFile = _a.onAppendFile, className = _a.className;
     var styles = useStyles();
-    var _c = useDrop({
-        accept: [NativeTypes.FILE],
-        drop: function (item) {
-            if (item) {
-                // TODO remove after update react-dnd
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                onAppendFile(item.files[0]);
-            }
-        },
-        collect: function (monitor) { return ({
-            isOver: monitor.isOver(),
-            canDrop: monitor.canDrop()
-        }); }
-    }), _d = _c[0], canDrop = _d.canDrop, isOver = _d.isOver, drop = _c[1];
-    var isActive = canDrop && isOver;
-    return (React.createElement("div", { ref: drop, className: classnames(styles.root, (_b = {}, _b[styles.isActive] = isActive, _b), className) },
+    var _c = useState(false), isActive = _c[0], setIsActive = _c[1];
+    var handleDragOver = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var filesType = e.dataTransfer.types[0];
+        var isValidType = filesType === ACCEPTABLE_FILE_TYPE;
+        e.dataTransfer.dropEffect = isValidType ? 'copy' : 'none';
+        setIsActive(isValidType);
+    }, []);
+    var handleDragLeave = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var relatedTarget = e.relatedTarget;
+        var isLeave = relatedTarget && !e.currentTarget.contains(relatedTarget);
+        if (isLeave || !relatedTarget) {
+            setIsActive(false);
+        }
+    }, []);
+    var handleDrop = useCallback(function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsActive(false);
+        var filesType = e.dataTransfer.types[0];
+        if (filesType === ACCEPTABLE_FILE_TYPE) {
+            var file = e.dataTransfer.files[0];
+            onAppendFile(file);
+        }
+    }, [onAppendFile]);
+    return (React.createElement("div", { className: classnames(styles.root, (_b = {}, _b[styles.isActive] = isActive, _b), className), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop },
         React.createElement(UploadIcon, { className: styles.icon }),
         React.createElement(Typography, { className: styles.title }, i18n.text('Drag an image here')),
         React.createElement(Typography, { className: styles.description }, i18n.text('Acceptable image types would include JPG, PNG, TIFF, GIF, BMP. Maximum image size: ${MAX_IMAGE_SIZE}Mb', {

package/UploadImageDialog/components/TargetBox/TargetBox.specs.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

package/UploadImageDialog/components/TargetBox/TargetBox.specs.js

@@ -1,22 +1,63 @@
 import React from 'react';
-import { mount } from 'enzyme';
-import { DndProvider } from 'react-dnd';
-import TestBackend from 'react-dnd-test-backend';
-import { SelectImageButton } from '../SelectImageButton';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { TargetBox } from './TargetBox';
-describe('TargetBox tests', function () {
-    var onAppendFile;
-    beforeEach(function () {
-        onAppendFile = jest.fn();
+var mockOnAppendFile = jest.fn();
+var setUp = function () {
+    return render(React.createElement(TargetBox, { onAppendFile: mockOnAppendFile }));
+};
+describe('TargetBox', function () {
+    afterEach(function () {
+        jest.clearAllMocks();
     });
-    it('should not pass .isActive className to root element if dnd zone is not active', function () {
-        var component = mount(React.createElement(DndProvider, { backend: TestBackend },
-            React.createElement(TargetBox, { onAppendFile: onAppendFile })));
-        expect(component.find('.root').prop('className')).toBe('root');
+    it('should renders well', function () {
+        var getByText = setUp().getByText;
+        expect(getByText('Drag an image here')).toBeInTheDocument();
     });
-    it('should onAppendFile prop correctly to SelectImageButton', function () {
-        var component = mount(React.createElement(DndProvider, { backend: TestBackend },
-            React.createElement(TargetBox, { onAppendFile: onAppendFile })));
-        expect(component.find(SelectImageButton).prop('onAppendFile')).toEqual(onAppendFile);
+    it('should activates drag state on drag over with acceptable file type', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        fireEvent.dragOver(dropZone, {
+            dataTransfer: { types: ['Files'], dropEffect: 'copy' }
+        });
+        expect(dropZone).toHaveClass('isActive');
+    });
+    it('should does not activate drag state with unacceptable file type', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        fireEvent.dragOver(dropZone, {
+            dataTransfer: { types: ['Text'], dropEffect: 'none' }
+        });
+        expect(dropZone).not.toHaveClass('isActive');
+    });
+    it('should deactivates drag state on drag leave', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        fireEvent.dragOver(dropZone, { dataTransfer: { types: ['Files'] } });
+        expect(dropZone).toHaveClass('isActive');
+        fireEvent.dragLeave(dropZone);
+        expect(dropZone).not.toHaveClass('isActive');
+    });
+    it('should calls onAppendFile with the dropped file', function () {
+        var file = new File(['test content'], 'test.png', { type: 'image/png' });
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        fireEvent.drop(dropZone, {
+            dataTransfer: {
+                files: [file],
+                types: ['Files']
+            }
+        });
+        expect(mockOnAppendFile).toHaveBeenCalledWith(file);
+    });
+    it('should does not call onAppendFile if dropped item is not of file type', function () {
+        var container = setUp().container;
+        var dropZone = container.firstChild;
+        fireEvent.drop(dropZone, {
+            dataTransfer: {
+                types: ['Text']
+            }
+        });
+        expect(mockOnAppendFile).not.toHaveBeenCalled();
     });
 });

package/UploadImageDialog/components/TargetBox/styles.js

@@ -9,7 +9,8 @@ export var useStyles = makeStyles(function (theme) { return ({
     icon: {
         width: '190px',
         height: '190px',
-        marginBottom: '24px'
+        marginBottom: '24px',
+        pointerEvents: 'none'
     },
     title: {
         marginBottom: '8px',

package/VerticalHeadingsTable/DndVerticalHeadingsTable.test.js

@@ -0,0 +1,114 @@
+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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { mockDndKit } from '../test-utils/dndKit';
+jest.mock('@dnd-kit/core', function () { return mockDndKit; });
+import VerticalHeadingsTable from './VerticalHeadingsTable';
+var setUp = function (props) {
+    var containerRef = {
+        current: {
+            clientHeight: 500,
+            clientWidth: 500,
+            getBoundingClientRect: function () {
+                return {
+                    top: 0,
+                    left: 0
+                };
+            }
+        }
+    };
+    return render(React.createElement(VerticalHeadingsTable, __assign({ containerRef: containerRef }, props)));
+};
+describe('VerticalHeadingsTable drag and drop tests', function () {
+    var rowsData = [
+        { id: 'entityCard', label: '' },
+        { id: 'matchMethod', label: 'Match Method' },
+        { id: 'workflowCard', label: '' },
+        { id: 'attributes.FirstName', label: 'First Name' },
+        { id: 'attributes.LastName', label: 'Last Name' },
+        { id: 'attributes.Int', label: 'Int' }
+    ];
+    var columnsData = __spreadArray([], new Array(3), true).map(function (_, index) { return ({
+        entityCard: "entityCard-".concat(index),
+        matchMethod: "matchMethod-".concat(index),
+        workflowCard: "workflowCard-".concat(index),
+        'attributes.FirstName': "attributes.FirstName-".concat(index),
+        'attributes.LastName': "attributes.LastName-".concat(index),
+        'attributes.Int': "attributes.Int-".concat(index),
+        id: "entities/".concat(index),
+        isDraggable: index !== 0
+    }); });
+    var defaultProps = {
+        theadRowsNumber: 2,
+        rowsData: rowsData,
+        columnsData: columnsData,
+        onMoveColumn: jest.fn(),
+        onDropColumn: jest.fn(),
+        onMoveRow: jest.fn(),
+        onDropRow: jest.fn()
+    };
+    it('should reorder draggable columns correctly', function () {
+        setUp(defaultProps);
+        var from = screen.getByText(columnsData[1].entityCard);
+        var to = screen.getByText(columnsData[2].entityCard);
+        fireEvent.mouseDown(from.firstChild);
+        fireEvent.mouseOver(to.parentNode);
+        fireEvent.mouseUp(from.firstChild);
+        expect(defaultProps.onMoveColumn).toHaveBeenCalledWith(columnsData[1].id, columnsData[2].id);
+        expect(defaultProps.onDropColumn).toHaveBeenCalled();
+    });
+    it('should reorder draggable rows correctly', function () {
+        setUp(defaultProps);
+        var from = screen.getByText(rowsData[3].label);
+        var to = screen.getByText(rowsData[5].label);
+        fireEvent.mouseDown(from.firstChild);
+        fireEvent.mouseOver(to.parentNode);
+        fireEvent.mouseUp(from.firstChild);
+        expect(defaultProps.onMoveRow).toHaveBeenCalledWith(rowsData[3].id, rowsData[5].id);
+        expect(defaultProps.onDropRow).toHaveBeenCalled();
+    });
+    it('should render backdrop during drag', function () {
+        setUp(defaultProps);
+        var draggingRow = screen.getByText(rowsData[3].label);
+        fireEvent.mouseDown(draggingRow.firstChild);
+        expect(document.getElementsByClassName('backDrop')).toHaveLength(1);
+        fireEvent.mouseUp(draggingRow.firstChild);
+        expect(document.getElementsByClassName('backDrop')).toHaveLength(0);
+        var draggingColumn = screen.getByText(columnsData[1].entityCard);
+        fireEvent.mouseDown(draggingColumn.firstChild);
+        expect(document.getElementsByClassName('backDrop')).toHaveLength(1);
+        fireEvent.mouseUp(draggingColumn.firstChild);
+        expect(document.getElementsByClassName('backDrop')).toHaveLength(0);
+    });
+    it('should render column overlay', function () {
+        setUp(defaultProps);
+        var draggingColumn = screen.getByText(columnsData[1].entityCard);
+        fireEvent.mouseDown(draggingColumn.firstChild);
+        expect(screen.getAllByText(columnsData[1].entityCard)).toHaveLength(2);
+    });
+    it('should render row overlay', function () {
+        setUp(defaultProps);
+        var draggingRow = screen.getByText(rowsData[3].label);
+        fireEvent.mouseDown(draggingRow.firstChild);
+        expect(screen.getAllByText(rowsData[3].label)).toHaveLength(2);
+    });
+});

package/VerticalHeadingsTable/VerticalHeadingsTable.d.ts

@@ -4,6 +4,7 @@ type Props = {
     className?: string;
     rowsData: RowData[];
     columnsData: ColumnData[];
+    containerRef: React.MutableRefObject<HTMLDivElement>;
     theadRowsNumber?: number;
     onMoveRow?: (dragId: string, hoverId: string) => void;
     onDropRow?: () => void;
@@ -12,5 +13,5 @@ type Props = {
     setHoveredColumn?: (columnValue: ColumnData) => void;
     resetHoveredColumn?: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ className, rowsData, columnsData, theadRowsNumber, onMoveRow, onDropRow, onMoveColumn, onDropColumn, setHoveredColumn, resetHoveredColumn }: Props) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ className, rowsData, columnsData, containerRef, theadRowsNumber, onMoveRow, onDropRow, onMoveColumn, onDropColumn, setHoveredColumn, resetHoveredColumn }: Props) => React.JSX.Element>;
 export default _default;

package/VerticalHeadingsTable/VerticalHeadingsTable.js

@@ -1,20 +1,17 @@
-import React, { memo, useRef, useState } from 'react';
+import React, { memo, useMemo } from 'react';
 import { TableRow } from './components/TableRow';
 import { TableRowWithDnd } from './components/TableRowWithDnd';
-import { TableColumnDragLayer } from './components/TableColumnDragLayer';
+import { DndComponent } from './components/DndComponent';
 var VerticalHeadingsTable = function (_a) {
-    var _b;
-    var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, _c = _a.theadRowsNumber, theadRowsNumber = _c === void 0 ? 0 : _c, onMoveRow = _a.onMoveRow, onDropRow = _a.onDropRow, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
-    var _d = useState(false), someRowIsDragging = _d[0], setSomeRowIsDragging = _d[1];
-    var tableRef = useRef(null);
-    var tableHeight = (_b = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
-    var isDNDActive = !!onMoveRow || !!onMoveColumn;
-    return (React.createElement(React.Fragment, null,
-        isDNDActive && React.createElement(TableColumnDragLayer, { columnHeight: tableHeight }),
-        React.createElement("table", { ref: tableRef, className: className },
-            theadRowsNumber > 0 && (React.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(function (rowData, index) { return (React.createElement(TableRow, { key: rowData.id || index, rowData: rowData, columnsData: columnsData, index: index, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
+    var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, containerRef = _a.containerRef, _b = _a.theadRowsNumber, theadRowsNumber = _b === void 0 ? 0 : _b, onMoveRow = _a.onMoveRow, onDropRow = _a.onDropRow, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
+    var columnsId = useMemo(function () { return columnsData.map(function (columnData) { return columnData.id; }); }, [columnsData]);
+    var rowsId = useMemo(function () { return rowsData.map(function (rowData) { return rowData.id; }); }, [rowsData]);
+    var isMoveColumnEnabled = !!onMoveColumn;
+    return (React.createElement(DndComponent, { containerRef: containerRef, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, onMoveRow: onMoveRow, onDropRow: onDropRow, columnsId: columnsId, rowsId: rowsId, tableClassName: className },
+        React.createElement("table", { className: className },
+            theadRowsNumber > 0 && (React.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(function (rowData, index) { return (React.createElement(TableRow, { key: rowData.id || index, rowData: rowData, columnsData: columnsData, index: index, isMoveColumnEnabled: isMoveColumnEnabled, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
             React.createElement("tbody", null, rowsData.slice(theadRowsNumber).map(function (rowData, index) {
-                return onMoveRow ? (React.createElement(TableRowWithDnd, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveRow: onMoveRow, onDropRow: onDropRow, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging, setSomeRowIsDragging: setSomeRowIsDragging })) : (React.createElement(TableRow, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+                return onMoveRow ? (React.createElement(TableRowWithDnd, { key: rowData.id || index, rowData: rowData, columnsData: columnsData, isMoveColumnEnabled: isMoveColumnEnabled, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (React.createElement(TableRow, { key: rowData.id || index, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, isMoveColumnEnabled: isMoveColumnEnabled, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
             })))));
 };
 export default memo(VerticalHeadingsTable);