@reltio/components 1.4.2018 → 1.4.2019

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; } });

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

@@ -5,7 +5,7 @@ type Props = {
     rowData: RowData;
     setHoveredColumn: (columnValue: ColumnData) => void;
     resetHoveredColumn: () => void;
-    someRowIsDragging?: boolean;
+    rowIsDragging?: boolean;
 };
-export declare const TableCell: ({ columnValue, rowData, setHoveredColumn, resetHoveredColumn, someRowIsDragging }: Props) => React.JSX.Element;
+export declare const TableCell: ({ columnValue, rowData, setHoveredColumn, resetHoveredColumn, rowIsDragging }: Props) => React.JSX.Element;
 export {};

package/cjs/VerticalHeadingsTable/components/TableCell/TableCell.js

@@ -10,12 +10,12 @@ var helpers_1 = require("../../helpers");
 var styles_1 = require("./styles");
 var TableCell = function (_a) {
     var _b;
-    var columnValue = _a.columnValue, rowData = _a.rowData, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn, someRowIsDragging = _a.someRowIsDragging;
+    var columnValue = _a.columnValue, rowData = _a.rowData, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn, rowIsDragging = _a.rowIsDragging;
     var styles = (0, styles_1.useStyles)();
     var CellRenderer = rowData.cellRenderer || helpers_1.DefaultCellRenderer;
     var onMouseOver = setHoveredColumn ? function () { return setHoveredColumn(columnValue); } : undefined;
     return (react_1.default.createElement("td", { onMouseOver: onMouseOver, onMouseLeave: resetHoveredColumn },
-        react_1.default.createElement("div", { className: (0, classnames_1.default)((_b = {}, _b[styles.hidden] = someRowIsDragging, _b)) },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)((_b = {}, _b[styles.hidden] = rowIsDragging, _b)) },
             react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id] }))));
 };
 exports.TableCell = TableCell;

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

@@ -1,63 +1,121 @@
 "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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 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 TableCell_1 = require("./TableCell");
-var helpers_1 = require("../../helpers");
+var react_2 = require("@testing-library/react");
 var columnValue = {
-    'attributes.FirstName': { value: 'Some value' },
+    'attributes.FirstName': 'Some value',
     id: 'entities/123'
 };
-var setHoveredColumn = jest.fn();
-var resetHoveredColumn = jest.fn();
+var rowData = {
+    id: 'attributes.FirstName',
+    label: 'FirstName'
+};
+var defaultProps = {
+    columnValue: columnValue,
+    rowData: rowData,
+    setHoveredColumn: jest.fn(),
+    resetHoveredColumn: jest.fn()
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var Wrapper = function (_a) {
+        var children = _a.children;
+        return (react_1.default.createElement("table", null,
+            react_1.default.createElement("tbody", null,
+                react_1.default.createElement("tr", null, children))));
+    };
+    return (0, react_2.render)(react_1.default.createElement(TableCell_1.TableCell, __assign({}, props)), { wrapper: Wrapper });
+};
 describe('TableCell tests', function () {
     it('should render cellRenderer from rowData correctly', function () {
-        var CellRenderer = function () { return null; };
-        var rowData = {
-            id: 'attributes.FirstName',
-            label: 'FirstName',
-            cellRenderer: CellRenderer
+        var CellRenderer = function (_a) {
+            var value = _a.value;
+            return react_1.default.createElement("div", { className: "cellRenderer" }, value);
         };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableCell_1.TableCell, { rowData: rowData, columnValue: columnValue, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
-        expect(component.find(CellRenderer).prop('value')).toEqual(columnValue[rowData.id]);
+        setUp(__assign(__assign({}, defaultProps), { rowData: __assign(__assign({}, rowData), { cellRenderer: CellRenderer }) }));
+        expect(react_2.screen.getByText(columnValue['attributes.FirstName'])).toHaveClass('cellRenderer');
     });
     it('should render DefaultHeadCellRenderer if headCellRenderer is missing in rowData', function () {
-        var rowData = {
-            id: 'attributes.FirstName',
-            label: 'FirstName'
-        };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableCell_1.TableCell, { rowData: rowData, columnValue: columnValue, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
-        expect(component.find(helpers_1.DefaultCellRenderer).prop('value')).toEqual(columnValue[rowData.id]);
+        setUp();
+        expect(react_2.screen.getByText(columnValue['attributes.FirstName'])).toBeInTheDocument();
     });
-    it('setHoveredColumn handler should work correctly', function () {
-        var rowData = {
-            id: 'attributes.FirstName',
-            label: 'FirstName'
-        };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableCell_1.TableCell, { rowData: rowData, columnValue: columnValue, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
-        (0, test_utils_1.act)(function () {
-            component.find('td').prop('onMouseOver')(null);
+    it('setHoveredColumn handler should work correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var setHoveredColumn;
+        return __generator(this, function (_a) {
+            setHoveredColumn = jest.fn();
+            setUp(__assign(__assign({}, defaultProps), { setHoveredColumn: setHoveredColumn }));
+            react_2.fireEvent.mouseOver(react_2.screen.getByRole('cell', { name: columnValue['attributes.FirstName'] }));
+            expect(setHoveredColumn).toHaveBeenCalledWith(columnValue);
+            return [2 /*return*/];
         });
-        expect(setHoveredColumn).toHaveBeenCalledWith(columnValue);
-    });
-    it('should pass ".hidden" classname to div wrapper correctly if "someRowIsDragging" prop is true', function () {
-        var rowData = {
-            id: 'attributes.FirstName',
-            label: 'FirstName'
-        };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableCell_1.TableCell, { rowData: rowData, columnValue: columnValue, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: true }));
-        expect(component.find('.hidden')).toHaveLength(1);
+    }); });
+    it('resetHoveredColumn handler should work correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var resetHoveredColumn;
+        return __generator(this, function (_a) {
+            resetHoveredColumn = jest.fn();
+            setUp(__assign(__assign({}, defaultProps), { resetHoveredColumn: resetHoveredColumn }));
+            react_2.fireEvent.mouseLeave(react_2.screen.getByRole('cell', { name: columnValue['attributes.FirstName'] }));
+            expect(resetHoveredColumn).toHaveBeenCalled();
+            return [2 /*return*/];
+        });
+    }); });
+    it('should pass ".hidden" classname to div wrapper correctly if "rowIsDragging" prop is true', function () {
+        setUp(__assign(__assign({}, defaultProps), { rowIsDragging: true }));
+        expect(react_2.screen.getByText(columnValue['attributes.FirstName'])).toHaveClass('hidden');
     });
-    it('should not pass ".hidden" classname to div wrapper if "someRowIsDragging" prop is false', function () {
-        var rowData = {
-            id: 'attributes.FirstName',
-            label: 'FirstName'
-        };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableCell_1.TableCell, { rowData: rowData, columnValue: columnValue, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: false }));
-        expect(component.find('.hidden')).toHaveLength(0);
+    it('should not pass ".hidden" classname to div wrapper if "rowIsDragging" prop is false', function () {
+        setUp();
+        expect(react_2.screen.getByText(columnValue['attributes.FirstName'])).not.toHaveClass('hidden');
     });
 });

package/cjs/VerticalHeadingsTable/components/TableCellWithDnd/ColumnDragIndicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { ColumnData, RowData } from '../../types';
+type Props = {
+    columnValue: ColumnData;
+    rowData: RowData;
+    index: number;
+    getColumnWidth: () => number;
+};
+export declare const ColumnDragIndicator: ({ columnValue, rowData, index, getColumnWidth }: Props) => React.JSX.Element;
+export {};

package/cjs/VerticalHeadingsTable/components/TableCellWithDnd/ColumnDragIndicator.js

@@ -0,0 +1,39 @@
+"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 });
+exports.ColumnDragIndicator = void 0;
+var react_1 = __importDefault(require("react"));
+var DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
+var core_1 = require("@dnd-kit/core");
+var types_1 = require("../../types");
+var styles_1 = require("./styles");
+var ColumnDragIndicator = function (_a) {
+    var columnValue = _a.columnValue, rowData = _a.rowData, index = _a.index, getColumnWidth = _a.getColumnWidth;
+    var styles = (0, styles_1.useStyles)();
+    var _b = (0, core_1.useDraggable)({
+        id: columnValue.id,
+        data: {
+            type: types_1.DndItemTypes.Column,
+            getColumnWidth: getColumnWidth,
+            columnValue: columnValue,
+            rowData: rowData,
+            index: index
+        }
+    }), setDraggableNodeRef = _b.setNodeRef, attributes = _b.attributes, listeners = _b.listeners;
+    return (react_1.default.createElement("div", __assign({ ref: setDraggableNodeRef, className: styles.dragIndicator }, attributes, listeners),
+        react_1.default.createElement(DragIndicator_1.default, { className: styles.dragIndicatorIcon })));
+};
+exports.ColumnDragIndicator = ColumnDragIndicator;

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

@@ -4,12 +4,10 @@ type Props = {
     columnValue: ColumnData;
     rowData: RowData;
     index: number;
-    onMoveColumn: (dragId: string, hoverId: string) => void;
-    onDropColumn?: () => void;
     shouldRenderDragIndicator: boolean;
     setHoveredColumn: (columnValue: ColumnData) => void;
     resetHoveredColumn: () => void;
-    someRowIsDragging?: boolean;
+    rowIsDragging?: boolean;
 };
-export declare const TableCellWithDnd: ({ columnValue, rowData, index, onMoveColumn, onDropColumn, shouldRenderDragIndicator, setHoveredColumn, resetHoveredColumn, someRowIsDragging }: Props) => React.JSX.Element;
+export declare const TableCellWithDnd: ({ columnValue, rowData, index, shouldRenderDragIndicator, setHoveredColumn, resetHoveredColumn, rowIsDragging }: Props) => React.JSX.Element;
 export {};