@reltio/components 1.4.2017 → 1.4.2019

package/cjs/VerticalHeadingsTable/VerticalHeadingsTable.test.js

@@ -1,282 +1,87 @@
 "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 };
 };
 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_test_backend_1 = __importDefault(require("react-dnd-test-backend"));
-var react_dnd_1 = require("react-dnd");
-var TableRow_1 = require("./components/TableRow");
-var TableCellWithDnd_1 = require("./components/TableCellWithDnd");
-var TableRowWithDnd_1 = require("./components/TableRowWithDnd");
-var TableColumnDragPreview_1 = require("./components/TableColumnDragPreview");
-var TableColumnDragLayer_1 = require("./components/TableColumnDragLayer");
+var react_2 = require("@testing-library/react");
 var VerticalHeadingsTable_1 = __importDefault(require("./VerticalHeadingsTable"));
-var setUpWithDnd = function (_a) {
-    var rowsData = _a.rowsData, columnsData = _a.columnsData, theadRowsNumber = _a.theadRowsNumber, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, onMoveRow = _a.onMoveRow, onDropRow = _a.onDropRow;
-    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(VerticalHeadingsTable_1.default, { rowsData: rowsData, columnsData: columnsData, theadRowsNumber: theadRowsNumber, onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, onMoveRow: onMoveRow, onDropRow: onDropRow }));
-        })));
-    return [component, manager];
+var setUp = function (props) {
+    var containerRef = {
+        current: {
+            clientHeight: 500,
+            clientWidth: 500,
+            getBoundingClientRect: function () {
+                return {
+                    top: 0,
+                    left: 0
+                };
+            }
+        }
+    };
+    return (0, react_2.render)(react_1.default.createElement(VerticalHeadingsTable_1.default, __assign({ containerRef: containerRef }, props)));
 };
-var rowsData = [
-    {
-        id: 'entityCard'
-    },
-    {
-        id: 'entityId'
-    },
-    {
-        id: 'attributes.FirstName'
-    },
-    {
-        id: 'attributes.LastName'
-    }
-];
-var columnsData = [
-    { 'attributes.FirstName': {}, entityCard: {}, entityId: '1234', 'attributes.LastName': {}, id: 'entities/1234' }
-];
 describe('VerticalHeadingsTable tests', function () {
-    describe('basic behavior', function () {
-        it('should render rows correctly if theadRowsNumber === 0', function () {
-            var onMoveColumn = jest.fn();
-            var component = (0, enzyme_1.shallow)(react_1.default.createElement(VerticalHeadingsTable_1.default, { rowsData: rowsData, columnsData: columnsData, theadRowsNumber: 0, onMoveColumn: onMoveColumn }));
-            expect(component.find('thead')).toHaveLength(0);
-            expect(component.find('tbody').find(TableRow_1.TableRow)).toHaveLength(4);
-            component
-                .find('tbody')
-                .find(TableRow_1.TableRow)
-                .forEach(function (node, index) {
-                expect(node.props()).toEqual({
-                    rowData: rowsData[index],
-                    columnsData: columnsData,
-                    index: index,
-                    onMoveColumn: onMoveColumn
-                });
-            });
-        });
-        it('should render rows correctly if theadRowsNumber > 0', function () {
-            var onMoveColumn = jest.fn();
-            var theadRowsNumber = 2;
-            var component = (0, enzyme_1.shallow)(react_1.default.createElement(VerticalHeadingsTable_1.default, { rowsData: rowsData, columnsData: columnsData, theadRowsNumber: theadRowsNumber, onMoveColumn: onMoveColumn }));
-            var theadTableRow = component.find('thead').find(TableRow_1.TableRow);
-            expect(theadTableRow).toHaveLength(2);
-            theadTableRow.forEach(function (node, index) {
-                expect(node.props()).toEqual({
-                    rowData: rowsData[index],
-                    columnsData: columnsData,
-                    index: index,
-                    onMoveColumn: onMoveColumn
-                });
-            });
-            expect(component.find('tbody').find(TableRow_1.TableRow)).toHaveLength(2);
-            component
-                .find('tbody')
-                .find(TableRow_1.TableRow)
-                .forEach(function (node, index) {
-                expect(node.props()).toEqual({
-                    rowData: rowsData[index + theadRowsNumber],
-                    columnsData: columnsData,
-                    index: index + theadRowsNumber,
-                    onMoveColumn: onMoveColumn
-                });
-            });
-        });
-        it('should render TableRowWithDnd in table body if component has onMoveColumn prop', function () {
-            var onMoveColumn = jest.fn();
-            var onMoveRow = jest.fn();
-            var component = (0, enzyme_1.shallow)(react_1.default.createElement(VerticalHeadingsTable_1.default, { rowsData: rowsData, columnsData: columnsData, onMoveColumn: onMoveColumn, onMoveRow: onMoveRow }));
-            expect(component.find('tbody').find(TableRowWithDnd_1.TableRowWithDnd)).toHaveLength(4);
-            component
-                .find('tbody')
-                .find(TableRow_1.TableRow)
-                .forEach(function (node, index) {
-                expect(node.props()).toEqual({
-                    rowData: rowsData[index],
-                    columnsData: columnsData,
-                    index: index,
-                    onMoveColumn: onMoveColumn,
-                    onMoveRow: onMoveRow
-                });
-            });
-        });
-        it('should render ColumnDragLayer', function () {
-            var component = (0, enzyme_1.shallow)(react_1.default.createElement(VerticalHeadingsTable_1.default, { rowsData: rowsData, columnsData: columnsData, onMoveColumn: jest.fn(), theadRowsNumber: 0 }));
-            expect(component.find(TableColumnDragLayer_1.TableColumnDragLayer)).toHaveLength(1);
+    var rowsData = [
+        {
+            id: 'entityCard'
+        },
+        {
+            id: 'entityId'
+        },
+        {
+            id: 'attributes.FirstName'
+        },
+        {
+            id: 'attributes.LastName'
+        }
+    ];
+    var columnsData = [
+        {
+            'attributes.FirstName': 'attributes.FirstName-value',
+            entityCard: 'entityCard-value',
+            entityId: '1234',
+            'attributes.LastName': 'attributes.LastName-value',
+            id: 'entities/1234'
+        }
+    ];
+    var defaultProps = {
+        theadRowsNumber: 2,
+        rowsData: rowsData,
+        columnsData: columnsData,
+        onMoveColumn: jest.fn(),
+        onDropColumn: jest.fn(),
+        onMoveRow: jest.fn(),
+        onDropRow: jest.fn()
+    };
+    it('should render rows correctly if theadRowsNumber === 0', function () {
+        var props = __assign(__assign({}, defaultProps), { theadRowsNumber: 0 });
+        setUp(props);
+        expect(rowsData.length).toBeGreaterThan(1);
+        expect(react_2.screen.getByRole('rowgroup').tagName.toLowerCase()).toBe('tbody');
+        rowsData.forEach(function (rowData) {
+            expect(react_2.screen.getByText(columnsData[0][rowData.id])).toBeInTheDocument();
         });
     });
-    describe('drag and drop behavior', function () {
-        var cellRenderer = function () { return react_1.default.createElement("div", null, "Cell"); };
-        var headCellRenderer = function () { return react_1.default.createElement("div", null, "Head cell"); };
-        var rowsData = [
-            { id: 'entityCard', label: '', cellRenderer: cellRenderer, headCellRenderer: headCellRenderer },
-            { id: 'matchMethod', label: 'Match Method', cellRenderer: cellRenderer, headCellRenderer: headCellRenderer },
-            { id: 'workflowCard', label: '', cellRenderer: cellRenderer, headCellRenderer: headCellRenderer },
-            { id: 'attributes.FirstName', label: 'First Name', cellRenderer: cellRenderer, headCellRenderer: headCellRenderer },
-            { id: 'attributes.LastName', label: 'Last Name', cellRenderer: cellRenderer, headCellRenderer: headCellRenderer },
-            { id: 'attributes.Int', label: 'Int', cellRenderer: cellRenderer, headCellRenderer: headCellRenderer }
-        ];
-        var columnsData = [
-            {
-                entityCard: {},
-                matchMethod: {},
-                workflowCard: {},
-                'attributes.FirstName': {},
-                'attributes.LastName': {},
-                'attributes.Int': {},
-                id: 'entities/1',
-                isDraggable: false
-            },
-            {
-                entityCard: {},
-                matchMethod: {},
-                workflowCard: {},
-                'attributes.FirstName': {},
-                'attributes.LastName': {},
-                'attributes.Int': {},
-                id: 'entities/2',
-                isDraggable: true
-            },
-            {
-                entityCard: {},
-                matchMethod: {},
-                workflowCard: {},
-                'attributes.FirstName': {},
-                'attributes.LastName': {},
-                'attributes.Int': {},
-                id: 'entities/3',
-                isDraggable: true
-            }
-        ];
-        var onMoveColumn = jest.fn();
-        var onMoveRow = jest.fn();
-        var onDropRow = jest.fn();
-        var onDropColumn = jest.fn();
-        it('should reorder columns correctly', function () {
-            var _a = setUpWithDnd({
-                rowsData: rowsData,
-                columnsData: columnsData,
-                theadRowsNumber: 3,
-                onMoveColumn: onMoveColumn,
-                onMoveRow: onMoveRow,
-                onDropRow: onDropRow,
-                onDropColumn: onDropColumn
-            }), component = _a[0], manager = _a[1];
-            var backend = manager.getBackend();
-            var DRAGGED_CELL_INDEX = 2;
-            var HOVER_CELL_INDEX = 1;
-            var checkOpacityForCell = function (row, cellIndex, expectedOpacity) {
-                component.find(row).forEach(function (node) {
-                    var _a;
-                    var cells = node.find(TableCellWithDnd_1.TableCellWithDnd);
-                    var draggedCell = cells.findWhere(function (node) { return node.prop('index') === cellIndex; });
-                    var opacity = (_a = draggedCell.find('td').prop('style')) === null || _a === void 0 ? void 0 : _a.opacity;
-                    expect(opacity).toBe(expectedOpacity);
-                });
-            };
-            expect(component.find(TableRow_1.TableRow)).toHaveLength(3);
-            checkOpacityForCell(TableRow_1.TableRow, DRAGGED_CELL_INDEX, 1);
-            expect(component.find(TableRowWithDnd_1.TableRowWithDnd)).toHaveLength(3);
-            checkOpacityForCell(TableRowWithDnd_1.TableRowWithDnd, DRAGGED_CELL_INDEX, 1);
-            expect(component.find(TableColumnDragPreview_1.TableColumnDragPreview)).toHaveLength(0);
-            var sourceId = component
-                .find(TableRow_1.TableRow)
-                .at(0)
-                .find(TableCellWithDnd_1.TableCellWithDnd)
-                .at(DRAGGED_CELL_INDEX)
-                .find('td')
-                .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 }); }
-                });
-            });
-            component.update();
-            expect(component.find(TableRow_1.TableRow)).toHaveLength(3);
-            checkOpacityForCell(TableRow_1.TableRow, DRAGGED_CELL_INDEX, 0);
-            expect(component.find(TableRowWithDnd_1.TableRowWithDnd)).toHaveLength(3);
-            checkOpacityForCell(TableRowWithDnd_1.TableRowWithDnd, DRAGGED_CELL_INDEX, 0);
-            expect(component.find(TableColumnDragPreview_1.TableColumnDragPreview)).toHaveLength(1);
-            expect(component.find(TableColumnDragPreview_1.TableColumnDragPreview).props()).toEqual({
-                columnHeight: undefined,
-                columnWidth: 0,
-                item: {
-                    rowData: rowsData[0],
-                    columnValue: columnsData[DRAGGED_CELL_INDEX],
-                    index: DRAGGED_CELL_INDEX,
-                    type: 'Column',
-                    getColumnWidth: expect.anything()
-                }
-            });
-            var targetId = component
-                .find(TableRow_1.TableRow)
-                .at(0)
-                .find(TableCellWithDnd_1.TableCellWithDnd)
-                .at(HOVER_CELL_INDEX)
-                .find('td')
-                .prop('data-target-id');
-            (0, test_utils_1.act)(function () {
-                backend.simulateHover([targetId]);
-            });
-            expect(onMoveColumn).toHaveBeenCalledWith('entities/3', 'entities/2');
-            (0, test_utils_1.act)(function () {
-                backend.simulateDrop();
-                backend.simulateEndDrag();
-            });
-            expect(onDropColumn).toHaveBeenCalled();
-            component.update();
-            expect(component.find(TableRow_1.TableRow)).toHaveLength(3);
-            checkOpacityForCell(TableRow_1.TableRow, DRAGGED_CELL_INDEX, 1);
-            expect(component.find(TableRowWithDnd_1.TableRowWithDnd)).toHaveLength(3);
-            checkOpacityForCell(TableRowWithDnd_1.TableRowWithDnd, DRAGGED_CELL_INDEX, 1);
-            expect(component.find(TableColumnDragPreview_1.TableColumnDragPreview)).toHaveLength(0);
-        });
-        it('should reorder rows correctly', function () {
-            var _a, _b, _c;
-            var _d = setUpWithDnd({
-                rowsData: rowsData,
-                columnsData: columnsData,
-                theadRowsNumber: 3,
-                onMoveColumn: onMoveColumn,
-                onMoveRow: onMoveRow,
-                onDropRow: onDropRow,
-                onDropColumn: onDropColumn
-            }), component = _d[0], manager = _d[1];
-            var backend = manager.getBackend();
-            var DRAGGED_ROW_INDEX = 3;
-            var HOVER_ROW_INDEX = 5;
-            var findRowByIndex = function (index) {
-                return component.find(TableRowWithDnd_1.TableRowWithDnd).findWhere(function (node) { return node.prop('index') === index; });
-            };
-            expect((_a = findRowByIndex(DRAGGED_ROW_INDEX).find('tr').prop('style')) === null || _a === void 0 ? void 0 : _a.opacity).toBe(1);
-            var sourceId = findRowByIndex(DRAGGED_ROW_INDEX).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 }); }
-                });
-            });
-            component.update();
-            expect((_b = findRowByIndex(DRAGGED_ROW_INDEX).find('tr').prop('style')) === null || _b === void 0 ? void 0 : _b.opacity).toBe(0);
-            var targetId = findRowByIndex(HOVER_ROW_INDEX).find('tr').prop('data-target-id');
-            (0, test_utils_1.act)(function () {
-                backend.simulateHover([targetId]);
-            });
-            expect(onMoveRow).toHaveBeenCalledWith('attributes.FirstName', 'attributes.Int');
-            (0, test_utils_1.act)(function () {
-                backend.simulateDrop();
-                backend.simulateEndDrag();
-            });
-            expect(onDropRow).toHaveBeenCalled();
-            component.update();
-            expect((_c = findRowByIndex(DRAGGED_ROW_INDEX).find('tr').prop('style')) === null || _c === void 0 ? void 0 : _c.opacity).toBe(1);
-        });
+    it('should render rows correctly if theadRowsNumber is greater than 0', function () {
+        setUp(defaultProps);
+        var _a = react_2.screen.getAllByRole('rowgroup'), thead = _a[0], tbody = _a[1];
+        expect(thead.tagName.toLowerCase()).toBe('thead');
+        expect((0, react_2.within)(thead).getByText(columnsData[0].entityCard)).toBeInTheDocument();
+        expect((0, react_2.within)(thead).getByText(columnsData[0].entityId)).toBeInTheDocument();
+        expect(tbody.tagName.toLowerCase()).toBe('tbody');
+        expect((0, react_2.within)(tbody).getByText(columnsData[0]['attributes.FirstName'])).toBeInTheDocument();
+        expect((0, react_2.within)(tbody).getByText(columnsData[0]['attributes.LastName'])).toBeInTheDocument();
     });
 });

package/cjs/VerticalHeadingsTable/components/DndComponent/DndComponent.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+type Props = {
+    children: React.ReactNode;
+    containerRef: React.MutableRefObject<HTMLDivElement>;
+    onMoveColumn: (dragId: string, hoverId: string) => void;
+    onDropColumn: () => void;
+    onMoveRow: (dragId: string, hoverId: string) => void;
+    onDropRow: () => void;
+    columnsId: string[];
+    rowsId: string[];
+    tableClassName: string;
+};
+export declare const DndComponent: ({ children, containerRef, onMoveColumn, onDropColumn, onMoveRow, onDropRow, columnsId, rowsId, tableClassName }: Props) => React.JSX.Element;
+export {};

package/cjs/VerticalHeadingsTable/components/DndComponent/DndComponent.js

@@ -0,0 +1,123 @@
+"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.DndComponent = void 0;
+var core_1 = require("@dnd-kit/core");
+var react_1 = __importStar(require("react"));
+var react_dom_1 = require("react-dom");
+var types_1 = require("../../types");
+var DndMeasurer_1 = require("../DndMeasurer");
+var TableColumnDragPreview_1 = require("../TableColumnDragPreview");
+var TableRowDragPreview_1 = require("../TableRowDragPreview");
+var helpers_1 = require("./helpers");
+var styles_1 = require("./styles");
+var DndComponent = function (_a) {
+    var _b, _c;
+    var children = _a.children, containerRef = _a.containerRef, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, onMoveRow = _a.onMoveRow, onDropRow = _a.onDropRow, columnsId = _a.columnsId, rowsId = _a.rowsId, tableClassName = _a.tableClassName;
+    var styles = (0, styles_1.useStyles)();
+    var containerHeight = (_b = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight;
+    var containerWidth = (_c = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth;
+    var _d = (0, react_1.useState)(null), draggingType = _d[0], setDraggingType = _d[1];
+    var _e = (0, react_1.useState)(null), draggingColumn = _e[0], setDraggingColumn = _e[1];
+    var _f = (0, react_1.useState)(null), draggingRow = _f[0], setDraggingRow = _f[1];
+    var onDragStart = (0, react_1.useCallback)(function (event) {
+        var _a, _b;
+        var dndData = (_b = (_a = event.active) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.current;
+        if (dndData) {
+            setDraggingType(dndData === null || dndData === void 0 ? void 0 : dndData.type);
+        }
+        if ((dndData === null || dndData === void 0 ? void 0 : dndData.type) === types_1.DndItemTypes.Column) {
+            setDraggingColumn(dndData);
+        }
+        if ((dndData === null || dndData === void 0 ? void 0 : dndData.type) === types_1.DndItemTypes.Row) {
+            setDraggingRow(dndData);
+        }
+    }, []);
+    var onDragEnd = (0, react_1.useCallback)(function (event) {
+        var _a, _b, _c;
+        var draggingType = (_c = (_b = (_a = event.active) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.type;
+        setDraggingType(null);
+        setDraggingColumn(null);
+        setDraggingRow(null);
+        if (draggingType === types_1.DndItemTypes.Column) {
+            onDropColumn();
+        }
+        if (draggingType === types_1.DndItemTypes.Row) {
+            onDropRow();
+        }
+    }, [onDropColumn, onDropRow]);
+    var modifiers = (0, react_1.useMemo)(function () {
+        switch (draggingType) {
+            case types_1.DndItemTypes.Column:
+                return [helpers_1.columnMoveModifier];
+            case types_1.DndItemTypes.Row:
+                return [helpers_1.rowMoveModifier];
+            default:
+                return [];
+        }
+    }, [draggingType]);
+    var onDragOver = (0, react_1.useCallback)(function (_a) {
+        var _b, _c;
+        var active = _a.active, over = _a.over;
+        if (active.id === (over === null || over === void 0 ? void 0 : over.id))
+            return;
+        switch ((_c = (_b = active === null || active === void 0 ? void 0 : active.data) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.type) {
+            case types_1.DndItemTypes.Column:
+                return onMoveColumn(active.id, over === null || over === void 0 ? void 0 : over.id);
+            case types_1.DndItemTypes.Row:
+                return onMoveRow(active.id, over === null || over === void 0 ? void 0 : over.id);
+        }
+    }, [onMoveColumn, onMoveRow]);
+    var dragOverlayStyle = (0, react_1.useMemo)(function () {
+        var _a;
+        var containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        switch (draggingType) {
+            case types_1.DndItemTypes.Column:
+                return {
+                    top: containerRect.top,
+                    width: 'auto',
+                    height: 'auto'
+                };
+            case types_1.DndItemTypes.Row:
+                return {
+                    left: containerRect.left,
+                    width: 'auto',
+                    height: 'auto'
+                };
+            default:
+                return {};
+        }
+    }, [containerRef, draggingType]);
+    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, collisionDetection: core_1.closestCenter, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver },
+        children,
+        draggingType && (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: styles.backDrop }), document.body),
+        react_1.default.createElement(DndMeasurer_1.DndMeasurer, { columnsId: columnsId, rowsId: rowsId }),
+        (0, react_dom_1.createPortal)(react_1.default.createElement(core_1.DragOverlay, { dropAnimation: null, style: dragOverlayStyle, modifiers: modifiers },
+            react_1.default.createElement(TableColumnDragPreview_1.TableColumnDragPreview, { columnHeight: containerHeight, draggingColumn: draggingColumn }),
+            react_1.default.createElement(TableRowDragPreview_1.TableRowDragPreview, { tableWidth: containerWidth, draggingRow: draggingRow, tableClassName: tableClassName })), document.body)));
+};
+exports.DndComponent = DndComponent;

package/cjs/VerticalHeadingsTable/components/DndComponent/helpers.d.ts

@@ -0,0 +1,3 @@
+import { Modifier } from '@dnd-kit/core';
+export declare const columnMoveModifier: Modifier;
+export declare const rowMoveModifier: Modifier;

package/cjs/VerticalHeadingsTable/components/DndComponent/helpers.js

@@ -0,0 +1,40 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rowMoveModifier = exports.columnMoveModifier = void 0;
+var utilities_1 = require("@dnd-kit/utilities");
+var columnMoveModifier = function (_a) {
+    var activatorEvent = _a.activatorEvent, draggingNodeRect = _a.draggingNodeRect, transform = _a.transform;
+    if (draggingNodeRect && activatorEvent) {
+        var activatorCoordinates = (0, utilities_1.getEventCoordinates)(activatorEvent);
+        if (!activatorCoordinates) {
+            return transform;
+        }
+        var offsetX = activatorCoordinates.x - draggingNodeRect.left;
+        return __assign(__assign({}, transform), { x: transform.x + offsetX - draggingNodeRect.width / 2, y: 0 });
+    }
+    return transform;
+};
+exports.columnMoveModifier = columnMoveModifier;
+var rowMoveModifier = function (_a) {
+    var activatorEvent = _a.activatorEvent, draggingNodeRect = _a.draggingNodeRect, transform = _a.transform;
+    if (draggingNodeRect && activatorEvent) {
+        var activatorCoordinates = (0, utilities_1.getEventCoordinates)(activatorEvent);
+        if (!activatorCoordinates) {
+            return transform;
+        }
+        return __assign(__assign({}, transform), { x: 0, y: transform.y });
+    }
+    return transform;
+};
+exports.rowMoveModifier = rowMoveModifier;

package/cjs/VerticalHeadingsTable/components/DndComponent/index.d.ts

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

package/cjs/VerticalHeadingsTable/components/DndComponent/index.js

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

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

@@ -1 +1 @@
-export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"dragLayer">;
+export declare const useStyles: (props?: any) => import("@mui/styles").ClassNameMap<"backDrop">;

package/cjs/VerticalHeadingsTable/components/DndComponent/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@mui/styles");
+exports.useStyles = (0, styles_1.makeStyles)(function () { return ({
+    backDrop: {
+        position: 'fixed',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+    }
+}); });

package/cjs/VerticalHeadingsTable/components/DndComponent/types.d.ts

@@ -0,0 +1,14 @@
+import { ColumnData, DndItemTypes, RowData } from '../../types';
+export type ColumnDndData = {
+    type: DndItemTypes.Column;
+    getColumnWidth: () => number;
+    columnValue: ColumnData;
+    rowData: RowData;
+    index: number;
+};
+export type RowDndData = {
+    type: DndItemTypes.Row;
+    rowData: RowData;
+    columnsData: ColumnData[];
+};
+export type DndData = ColumnDndData | RowDndData | null;

package/cjs/VerticalHeadingsTable/components/DndComponent/types.js

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

package/cjs/VerticalHeadingsTable/components/DndMeasurer/DndMeasurer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type Props = {
+    columnsId: string[];
+    rowsId: string[];
+};
+export declare const DndMeasurer: ({ columnsId, rowsId }: Props) => React.JSX.Element;
+export {};

package/cjs/VerticalHeadingsTable/components/DndMeasurer/DndMeasurer.js

@@ -0,0 +1,40 @@
+"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.DndMeasurer = void 0;
+var react_1 = __importStar(require("react"));
+var core_1 = require("@dnd-kit/core");
+var DndMeasurer = function (_a) {
+    var columnsId = _a.columnsId, rowsId = _a.rowsId;
+    var measureDroppableContainers = (0, core_1.useDndContext)().measureDroppableContainers;
+    (0, react_1.useEffect)(function () {
+        measureDroppableContainers(columnsId);
+    }, [columnsId]);
+    (0, react_1.useEffect)(function () {
+        measureDroppableContainers(rowsId);
+    }, [rowsId]);
+    return react_1.default.createElement(react_1.default.Fragment, null);
+};
+exports.DndMeasurer = DndMeasurer;

package/cjs/VerticalHeadingsTable/components/DndMeasurer/index.d.ts

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

package/cjs/VerticalHeadingsTable/components/DndMeasurer/index.js

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