@reltio/components 1.4.2018 → 1.4.2019

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

@@ -29,73 +29,44 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableCellWithDnd = void 0;
 var react_1 = __importStar(require("react"));
 var classnames_1 = __importDefault(require("classnames"));
-var DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
-var react_dnd_1 = require("react-dnd");
-var react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
 var types_1 = require("../../types");
 var helpers_1 = require("../../helpers");
 var styles_1 = require("./styles");
+var core_1 = require("@dnd-kit/core");
+var ColumnDragIndicator_1 = require("./ColumnDragIndicator");
 var TableCellWithDnd = function (_a) {
     var _b;
-    var columnValue = _a.columnValue, rowData = _a.rowData, index = _a.index, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, shouldRenderDragIndicator = _a.shouldRenderDragIndicator, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn, someRowIsDragging = _a.someRowIsDragging;
+    var columnValue = _a.columnValue, rowData = _a.rowData, index = _a.index, shouldRenderDragIndicator = _a.shouldRenderDragIndicator, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn, rowIsDragging = _a.rowIsDragging;
     var styles = (0, styles_1.useStyles)();
-    var dropRef = react_1.default.useRef(null);
-    var dragRef = react_1.default.useRef(null);
-    var getColumnWidth = function () { var _a; return (_a = dropRef === null || dropRef === void 0 ? void 0 : dropRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth; };
-    var CellRenderer = rowData.cellRenderer || helpers_1.DefaultCellRenderer;
-    var _c = (0, react_dnd_1.useDrop)({
-        accept: types_1.DndItemTypes.Column,
-        hover: function (item, monitor) {
-            var _a;
-            if (!dropRef.current) {
-                return;
-            }
-            var dragIndex = item.index;
-            var hoverIndex = index;
-            if (dragIndex === hoverIndex) {
-                return;
-            }
-            var hoverBoundingRect = (_a = dropRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-            var hoverMiddleX = (hoverBoundingRect.right - hoverBoundingRect.left) / 2;
-            var clientOffset = monitor.getClientOffset();
-            var hoverClientX = clientOffset.x - hoverBoundingRect.left;
-            if (dragIndex < hoverIndex && hoverClientX < hoverMiddleX) {
-                return;
-            }
-            if (dragIndex > hoverIndex && hoverClientX > hoverMiddleX) {
-                return;
+    var _c = (0, react_1.useState)(false), enableDropForColumn = _c[0], setEnableDropForColumn = _c[1];
+    var _d = (0, react_1.useState)(false), isColumnDragging = _d[0], setIsColumnDragging = _d[1];
+    (0, core_1.useDndMonitor)({
+        onDragStart: function (event) {
+            if (event.active.data.current.type === types_1.DndItemTypes.Column) {
+                setEnableDropForColumn(true);
+                setIsColumnDragging(event.active.id === columnValue.id);
             }
-            onMoveColumn(item.columnValue.id, columnValue.id);
-            item.index = hoverIndex;
         },
-        drop: function () {
-            if (onDropColumn)
-                onDropColumn();
-        },
-        collect: function (monitor) { return ({
-            targetId: monitor.getHandlerId()
-        }); }
-    }), targetId = _c[0].targetId, drop = _c[1];
-    var _d = (0, react_dnd_1.useDrag)({
-        item: { type: types_1.DndItemTypes.Column, index: index, getColumnWidth: getColumnWidth, columnValue: columnValue, rowData: rowData },
-        isDragging: function (monitor) {
-            return monitor.getItem().index === index;
-        },
-        collect: function (monitor) { return ({
-            opacity: monitor.isDragging() ? 0 : 1,
-            sourceId: monitor.getHandlerId()
-        }); }
-    }), _e = _d[0], opacity = _e.opacity, sourceId = _e.sourceId, drag = _d[1], preview = _d[2];
-    (0, react_1.useEffect)(function () {
-        preview((0, react_dnd_html5_backend_1.getEmptyImage)(), { captureDraggingState: true });
-        drop(dropRef);
-        drag(dragRef);
-    }, []);
+        onDragEnd: function () {
+            setEnableDropForColumn(false);
+            setIsColumnDragging(false);
+        }
+    });
+    var setDroppableNodeRef = (0, core_1.useDroppable)({
+        id: columnValue.id
+    }).setNodeRef;
+    var columnRef = (0, react_1.useRef)(null);
+    var setColumnRef = (0, react_1.useCallback)(function (elem) {
+        setDroppableNodeRef(elem);
+        columnRef.current = elem;
+    }, [setDroppableNodeRef]);
+    var getColumnWidth = function () { var _a; return (_a = columnRef === null || columnRef === void 0 ? void 0 : columnRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth; };
+    var CellRenderer = rowData.cellRenderer || helpers_1.DefaultCellRenderer;
     var onMouseOver = setHoveredColumn ? function () { return setHoveredColumn(columnValue); } : undefined;
-    return (react_1.default.createElement("td", { style: { opacity: opacity }, ref: dropRef, className: styles.tableData, "data-source-id": sourceId, "data-target-id": targetId, onMouseOver: onMouseOver, onMouseLeave: resetHoveredColumn },
-        react_1.default.createElement("div", { className: (0, classnames_1.default)((_b = {}, _b[styles.hidden] = someRowIsDragging, _b)) },
-            shouldRenderDragIndicator && (react_1.default.createElement("div", { ref: dragRef, className: styles.dragIndicator },
-                react_1.default.createElement(DragIndicator_1.default, { className: styles.dragIndicatorIcon }))),
+    var draggingColumnStyle = (0, react_1.useMemo)(function () { return ({ opacity: isColumnDragging ? 0 : 1 }); }, [isColumnDragging]);
+    return (react_1.default.createElement("td", { style: draggingColumnStyle, ref: enableDropForColumn ? setColumnRef : undefined, className: styles.tableData, onMouseOver: onMouseOver, onMouseLeave: resetHoveredColumn },
+        react_1.default.createElement("div", { className: (0, classnames_1.default)((_b = {}, _b[styles.hidden] = rowIsDragging, _b)) },
+            shouldRenderDragIndicator && (react_1.default.createElement(ColumnDragIndicator_1.ColumnDragIndicator, { columnValue: columnValue, rowData: rowData, index: index, getColumnWidth: getColumnWidth })),
             react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id] }))));
 };
 exports.TableCellWithDnd = TableCellWithDnd;

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

@@ -1,16 +1,67 @@
 "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 react_dnd_test_backend_1 = __importDefault(require("react-dnd-test-backend"));
-var react_dnd_1 = require("react-dnd");
 var TableCellWithDnd_1 = require("./TableCellWithDnd");
-var helpers_1 = require("../../helpers");
-var CellRenderer = function () { return react_1.default.createElement("div", { className: "cellRenderer" }); };
+var core_1 = require("@dnd-kit/core");
+var react_2 = require("@testing-library/react");
+var user_event_1 = __importDefault(require("@testing-library/user-event"));
+var test_utils_1 = require("../../../test-utils");
+var types_1 = require("../../types");
+jest.mock('@dnd-kit/core', function () { return (__assign(__assign({}, jest.requireActual('@dnd-kit/core')), { useDndMonitor: jest.fn() })); });
+var CellRenderer = function (_a) {
+    var value = _a.value;
+    return (react_1.default.createElement("div", { className: "cellRenderer", "data-reltio-id": "cellRenderer" }, value));
+};
 var defaultColumnValue = {
     'attributes.FirstName': 'Some Value',
     id: 'entities/123'
@@ -20,77 +71,96 @@ var defaultRowData = {
     label: 'FirstName',
     cellRenderer: CellRenderer
 };
-var setUp = function (_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.columnValue, columnValue = _c === void 0 ? defaultColumnValue : _c, _d = _b.rowData, rowData = _d === void 0 ? defaultRowData : _d, _e = _b.index, index = _e === void 0 ? 0 : _e, _f = _b.shouldRenderDragIndicator, shouldRenderDragIndicator = _f === void 0 ? true : _f, _g = _b.onMoveColumn, onMoveColumn = _g === void 0 ? jest.fn() : _g, _h = _b.onDropColumn, onDropColumn = _h === void 0 ? jest.fn() : _h, _j = _b.setHoveredColumn, setHoveredColumn = _j === void 0 ? jest.fn() : _j, _k = _b.resetHoveredColumn, resetHoveredColumn = _k === void 0 ? jest.fn() : _k, _l = _b.someRowIsDragging, someRowIsDragging = _l === void 0 ? false : _l;
-    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,
+var defaultProps = {
+    columnValue: defaultColumnValue,
+    rowData: defaultRowData,
+    index: 0,
+    shouldRenderDragIndicator: true,
+    setHoveredColumn: jest.fn(),
+    resetHoveredColumn: jest.fn(),
+    rowIsDragging: false
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    var user = user_event_1.default.setup();
+    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,
-                    react_1.default.createElement("tr", null,
-                        react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { onMoveColumn: onMoveColumn, onDropColumn: onDropColumn, shouldRenderDragIndicator: shouldRenderDragIndicator, index: index, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn, someRowIsDragging: someRowIsDragging })))));
-        })));
-    return [component, manager];
+                    react_1.default.createElement("tr", null, children)))));
+    };
+    return __assign({ user: user }, (0, react_2.render)(react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, __assign({}, props)), { wrapper: Providers }));
 };
 describe('TableCellWithDnd tests', function () {
     it('should render cellRenderer from rowData correctly', function () {
-        var component = setUp()[0];
-        expect(component.find(CellRenderer).prop('value')).toEqual(defaultColumnValue[defaultRowData.id]);
+        setUp();
+        expect(react_2.screen.getByTestId('cellRenderer')).toBeInTheDocument();
     });
     it('should render DefaultCellRenderer if cellRenderer is missing in rowData', function () {
         var rowData = {
             id: 'attributes.FirstName',
             label: 'FirstName'
         };
-        var component = setUp({ rowData: rowData })[0];
-        expect(component.find(helpers_1.DefaultCellRenderer).prop('value')).toEqual(defaultColumnValue[rowData.id]);
+        setUp(__assign(__assign({}, defaultProps), { rowData: rowData }));
+        expect(react_2.screen.getByText(defaultColumnValue[rowData.id])).toBeInTheDocument();
     });
     it('should render dragIndicator if "shouldRenderDragIndicator" prop is true', function () {
-        var component = setUp({ shouldRenderDragIndicator: true })[0];
-        expect(component.find('.dragIndicator')).toHaveLength(1);
+        setUp(__assign(__assign({}, defaultProps), { shouldRenderDragIndicator: true }));
+        expect((0, test_utils_1.getMuiIconByName)('DragIndicator')).toBeInTheDocument();
     });
     it('should not render dragIndicator if "shouldRenderDragIndicator" prop is false', function () {
-        var component = setUp({ shouldRenderDragIndicator: false })[0];
-        expect(component.find('.dragIndicator')).toHaveLength(0);
+        setUp(__assign(__assign({}, defaultProps), { shouldRenderDragIndicator: false }));
+        expect((0, test_utils_1.getMuiIconByName)('DragIndicator')).not.toBeInTheDocument();
     });
-    it('setHoveredColumn handler should work correctly', function () {
-        var setHoveredColumn = jest.fn();
-        var component = setUp({ setHoveredColumn: setHoveredColumn })[0];
-        var onMouseOver = component.find('td').prop('onMouseOver');
-        (0, test_utils_1.act)(function () {
-            if (onMouseOver)
-                onMouseOver(null);
+    it('setHoveredColumn handler should work correctly', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var setHoveredColumn, user;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setHoveredColumn = jest.fn();
+                    user = setUp(__assign(__assign({}, defaultProps), { setHoveredColumn: setHoveredColumn })).user;
+                    return [4 /*yield*/, user.hover(react_2.screen.getByText(defaultColumnValue['attributes.FirstName']))];
+                case 1:
+                    _a.sent();
+                    expect(setHoveredColumn).toHaveBeenCalledWith(defaultColumnValue);
+                    return [2 /*return*/];
+            }
         });
-        expect(setHoveredColumn).toHaveBeenCalledWith(defaultColumnValue);
+    }); });
+    it('should pass ".hidden" classname to div wrapper correctly if "rowIsDragging" prop is true', function () {
+        setUp(__assign(__assign({}, defaultProps), { rowIsDragging: true }));
+        expect(document.getElementsByClassName('hidden')).toHaveLength(1);
+    });
+    it('should not pass ".hidden" classname to div wrapper if "rowIsDragging" prop is false', function () {
+        setUp(__assign(__assign({}, defaultProps), { rowIsDragging: false }));
+        expect(document.getElementsByClassName('hidden')).toHaveLength(0);
     });
-    it('should not fail if onDropRow is missing in props', function () {
-        var props = { onMoveColumn: null, onDropRow: null };
-        var _a = setUp(props), component = _a[0], manager = _a[1];
-        var backend = manager.getBackend();
-        var sourceId = component.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 }); }
+    it('should set opacity to 0 if column is dragging', function () {
+        var onDragStart, onDragEnd;
+        core_1.useDndMonitor.mockImplementation(function (listeners) {
+            onDragStart = listeners.onDragStart;
+            onDragEnd = listeners.onDragEnd;
+        });
+        setUp();
+        var cell = react_2.screen.getByRole('cell', { name: defaultColumnValue['attributes.FirstName'] });
+        expect(cell).toHaveStyle({ opacity: 1 });
+        (0, react_2.act)(function () {
+            onDragStart({
+                active: {
+                    id: defaultProps.columnValue.id,
+                    data: {
+                        current: {
+                            type: types_1.DndItemTypes.Column
+                        }
+                    }
+                }
             });
         });
-        component.update();
-        var targetId = component.find('td').prop('data-target-id');
-        (0, test_utils_1.act)(function () {
-            backend.simulateHover([targetId]);
-            backend.simulateDrop();
-            backend.simulateEndDrag();
+        expect(cell).toHaveStyle({ opacity: 0 });
+        (0, react_2.act)(function () {
+            onDragEnd();
         });
-        component.update();
-    });
-    it('should pass ".hidden" classname to div wrapper correctly if "someRowIsDragging" prop is true', function () {
-        var component = setUp({ someRowIsDragging: true })[0];
-        expect(component.find('.hidden')).toHaveLength(1);
-    });
-    it('should not pass ".hidden" classname to div wrapper if "someRowIsDragging" prop is false', function () {
-        var component = setUp({ someRowIsDragging: false })[0];
-        expect(component.find('.hidden')).toHaveLength(0);
+        expect(cell).toHaveStyle({ opacity: 1 });
     });
 });

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import { ColumnData, RowData } from '../../types';
 type Props = {
-    columnWidth: number;
     columnHeight: number;
-    item: {
+    draggingColumn: {
         rowData: RowData;
         columnValue: ColumnData;
+        getColumnWidth?: () => number;
     };
 };
-export declare const TableColumnDragPreview: ({ columnWidth, columnHeight, item }: Props) => React.JSX.Element;
+export declare const TableColumnDragPreview: React.MemoExoticComponent<({ columnHeight, draggingColumn }: Props) => React.JSX.Element>;
 export {};

package/cjs/VerticalHeadingsTable/components/TableColumnDragPreview/TableColumnDragPreview.js

@@ -1,16 +1,45 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.TableColumnDragPreview = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var helpers_1 = require("../../helpers");
-var TableColumnDragPreview = function (_a) {
-    var columnWidth = _a.columnWidth, columnHeight = _a.columnHeight, item = _a.item;
-    var rowData = item.rowData, columnValue = item.columnValue;
+exports.TableColumnDragPreview = (0, react_1.memo)(function (_a) {
+    var columnHeight = _a.columnHeight, draggingColumn = _a.draggingColumn;
+    if (!draggingColumn) {
+        return null;
+    }
+    var rowData = draggingColumn.rowData, columnValue = draggingColumn.columnValue, getColumnWidth = draggingColumn.getColumnWidth;
     var CellRenderer = rowData.cellRenderer || helpers_1.DefaultCellRenderer;
-    return (react_1.default.createElement("div", { style: { width: columnWidth, height: columnHeight, background: 'rgba(245,245,245, .5)' } },
+    var columnWidth = getColumnWidth();
+    return (react_1.default.createElement("div", { style: {
+            width: columnWidth,
+            height: columnHeight,
+            background: 'rgba(245,245,245, .5)',
+            pointerEvents: 'none'
+        } },
         react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id] })));
-};
-exports.TableColumnDragPreview = TableColumnDragPreview;
+});
+exports.TableColumnDragPreview.displayName = 'TableColumnDragPreview';

package/cjs/VerticalHeadingsTable/components/TableHeadCell/RowDragIndicator.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ColumnData, RowData } from '../../types';
+type Props = {
+    id: string;
+    columnsData: ColumnData[];
+    rowData: RowData;
+};
+export declare const RowDragIndicator: ({ id, rowData, columnsData }: Props) => React.JSX.Element;
+export {};

package/cjs/VerticalHeadingsTable/components/TableHeadCell/RowDragIndicator.js

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

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

@@ -1,16 +1,16 @@
 import React from 'react';
-import { RowData } from '../../types';
+import { ColumnData, RowData } from '../../types';
 type BasicProps = {
     rowData: RowData;
 };
 type PropsWithDnd = BasicProps & {
     isDraggable: true;
-    dragRef: React.Ref<HTMLDivElement>;
+    columnsData: ColumnData[];
 };
 type PropsWithoutDnd = BasicProps & {
     isDraggable?: false;
-    dragRef?: React.Ref<HTMLDivElement>;
+    columnsData?: ColumnData[];
 };
 type Props = PropsWithDnd | PropsWithoutDnd;
-export declare const TableHeadCell: ({ rowData, isDraggable, dragRef }: Props) => React.JSX.Element;
+export declare const TableHeadCell: ({ rowData, columnsData, isDraggable }: Props) => React.JSX.Element;
 export {};

package/cjs/VerticalHeadingsTable/components/TableHeadCell/TableHeadCell.js

@@ -16,16 +16,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TableHeadCell = void 0;
 var react_1 = __importDefault(require("react"));
-var DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
 var helpers_1 = require("../../helpers");
 var styles_1 = require("./styles");
+var RowDragIndicator_1 = require("./RowDragIndicator");
 var TableHeadCell = function (_a) {
-    var rowData = _a.rowData, isDraggable = _a.isDraggable, dragRef = _a.dragRef;
+    var rowData = _a.rowData, columnsData = _a.columnsData, isDraggable = _a.isDraggable;
     var styles = (0, styles_1.useStyles)();
     var HeadCellRenderer = rowData.headCellRenderer || helpers_1.DefaultHeadCellRenderer;
     return (react_1.default.createElement("th", { className: styles.tableHead },
-        isDraggable && (react_1.default.createElement("div", { ref: dragRef, className: styles.dragIndicator },
-            react_1.default.createElement(DragIndicator_1.default, { className: styles.dragIndicatorIcon }))),
+        isDraggable && react_1.default.createElement(RowDragIndicator_1.RowDragIndicator, { id: rowData.id, rowData: rowData, columnsData: columnsData }),
         react_1.default.createElement(HeadCellRenderer, __assign({}, rowData))));
 };
 exports.TableHeadCell = TableHeadCell;

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

@@ -1,73 +1,65 @@
 "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;
+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 = __importStar(require("react"));
-var enzyme_1 = require("enzyme");
-var DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
-var helpers_1 = require("../../helpers");
+var react_1 = __importDefault(require("react"));
 var TableHeadCell_1 = require("./TableHeadCell");
+var react_2 = require("@testing-library/react");
+var test_utils_1 = require("../../../test-utils");
+var defaultProps = {
+    rowData: {
+        id: 'attributes.FirstName',
+        label: 'FirstName'
+    },
+    columnsData: [
+        {
+            id: 'column1',
+            isDraggable: true
+        }
+    ]
+};
+var setUp = function (props) {
+    if (props === void 0) { props = defaultProps; }
+    return (0, react_2.render)(react_1.default.createElement(TableHeadCell_1.TableHeadCell, __assign({}, props)));
+};
 describe('TableHeadCell tests', function () {
     it('should render drag indicator correctly if isDraggable prop is true', function () {
-        var rowData = {
-            id: 'attributes.FirstName',
-            label: 'FirstName'
-        };
-        var dragRef = (0, react_1.createRef)();
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableHeadCell_1.TableHeadCell, { rowData: rowData, isDraggable: true, dragRef: dragRef }));
-        var dragIndicator = component.find('.dragIndicator');
-        expect(dragIndicator).toHaveLength(1);
-        expect(dragIndicator.getElement().ref).toBe(dragRef);
-        expect(dragIndicator.find(DragIndicator_1.default)).toHaveLength(1);
+        setUp(__assign(__assign({}, defaultProps), { isDraggable: true }));
+        expect((0, test_utils_1.getMuiIconByName)('DragIndicator')).toBeInTheDocument();
     });
     it('should not render dragIndicator if isDraggable prop is false', function () {
-        var rowData = {
-            id: 'attributes.FirstName',
-            label: 'FirstName'
-        };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableHeadCell_1.TableHeadCell, { rowData: rowData, isDraggable: false }));
-        expect(component.find('.dragIndicator')).toHaveLength(0);
+        setUp();
+        expect((0, test_utils_1.getMuiIconByName)('DragIndicator')).not.toBeInTheDocument();
     });
     it('should render headCellRenderer from rowData correctly', function () {
-        var HeadCellRenderer = function () { return null; };
+        var HeadCellRenderer = function (_a) {
+            var label = _a.label;
+            return react_1.default.createElement("div", null,
+                "headCell-",
+                label);
+        };
         var rowData = {
             id: 'attributes.FirstName',
             label: 'FirstName',
             headCellRenderer: HeadCellRenderer
         };
-        var component = (0, enzyme_1.shallow)(react_1.default.createElement(TableHeadCell_1.TableHeadCell, { rowData: rowData, isDraggable: false }));
-        expect(component.find(HeadCellRenderer).props()).toEqual(rowData);
+        setUp(__assign(__assign({}, defaultProps), { rowData: rowData }));
+        expect(react_2.screen.getByText("headCell-".concat(rowData.label))).toBeInTheDocument();
     });
     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(TableHeadCell_1.TableHeadCell, { rowData: rowData, isDraggable: false }));
-        expect(component.find(helpers_1.DefaultHeadCellRenderer).props()).toEqual(rowData);
+        setUp();
+        expect(react_2.screen.getByText(defaultProps.rowData.label)).toBeInTheDocument();
     });
 });

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

@@ -4,10 +4,9 @@ type Props = {
     rowData: RowData;
     columnsData: ColumnData[];
     index: number;
-    onMoveColumn?: (dragId: string, hoverId: string) => void;
-    onDropColumn?: () => void;
-    setHoveredColumn: (columnValue: ColumnData) => void;
-    resetHoveredColumn: () => void;
+    isMoveColumnEnabled?: boolean;
+    setHoveredColumn?: (columnValue: ColumnData) => void;
+    resetHoveredColumn?: () => void;
 };
-export declare const TableRow: ({ rowData, columnsData, index, onMoveColumn, onDropColumn, setHoveredColumn, resetHoveredColumn }: Props) => React.JSX.Element;
+export declare const TableRow: ({ rowData, columnsData, index, isMoveColumnEnabled, setHoveredColumn, resetHoveredColumn }: Props) => React.JSX.Element;
 export {};