@reltio/components 1.4.1110 → 1.4.1113

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ColumnData, RowData } from '../types';
+declare type Props = {
+    columnValue: ColumnData;
+    rowData: RowData;
+    setHoveredColumn: (columnValue: ColumnData) => void;
+    resetHoveredColumn: () => void;
+};
+export declare const TableCell: ({ columnValue, rowData, setHoveredColumn, resetHoveredColumn }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCell = void 0;
+var react_1 = __importDefault(require("react"));
+var helpers_1 = require("../helpers");
+var TableCell = function (_a) {
+    var columnValue = _a.columnValue, rowData = _a.rowData, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
+    var CellRenderer = rowData.cellRenderer || helpers_1.DefaultCellRenderer;
+    return (react_1.default.createElement("td", { onMouseOver: function () { return setHoveredColumn(columnValue); }, onMouseLeave: resetHoveredColumn },
+        react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id] })));
+};
+exports.TableCell = TableCell;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { RowData, ColumnData } from '../types';
+declare type Props = {
+    columnValue: ColumnData;
+    rowData: RowData;
+    index: number;
+    onMoveColumn: (dragId: string, hoverId: string) => void;
+    shouldRenderDragIndicator: boolean;
+    setHoveredColumn: (columnValue: ColumnData) => void;
+    resetHoveredColumn: () => void;
+};
+export declare const TableCellWithDnd: ({ columnValue, rowData, index, onMoveColumn, shouldRenderDragIndicator, setHoveredColumn, resetHoveredColumn }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,89 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableCellWithDnd = void 0;
+var react_1 = __importStar(require("react"));
+var DragIndicator_1 = __importDefault(require("@material-ui/icons/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 TableCellWithDnd = function (_a) {
+    var columnValue = _a.columnValue, rowData = _a.rowData, index = _a.index, onMoveColumn = _a.onMoveColumn, shouldRenderDragIndicator = _a.shouldRenderDragIndicator, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
+    var styles = 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 _b = 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;
+            }
+            onMoveColumn(item.columnValue.id, columnValue.id);
+            item.index = hoverIndex;
+        },
+        collect: function (monitor) { return ({
+            targetId: monitor.getHandlerId()
+        }); }
+    }), targetId = _b[0].targetId, drop = _b[1];
+    var _c = 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()
+        }); }
+    }), _d = _c[0], opacity = _d.opacity, sourceId = _d.sourceId, drag = _c[1], preview = _c[2];
+    react_1.useEffect(function () {
+        preview(react_dnd_html5_backend_1.getEmptyImage(), { captureDraggingState: true });
+        drop(dropRef);
+        drag(dragRef);
+    }, []);
+    return (react_1.default.createElement("td", { style: { opacity: opacity }, ref: dropRef, className: styles.tableData, "data-source-id": sourceId, "data-target-id": targetId, onMouseOver: function () { return setHoveredColumn(columnValue); }, onMouseLeave: resetHoveredColumn },
+        shouldRenderDragIndicator && (react_1.default.createElement("div", { ref: dragRef, className: styles.dragIndicator },
+            react_1.default.createElement(DragIndicator_1.default, { className: styles.dragIndicatorIcon }))),
+        react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id] })));
+};
+exports.TableCellWithDnd = TableCellWithDnd;

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

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"tableData" | "dragIndicator" | "dragIndicatorIcon">;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    tableData: {
+        position: 'relative',
+        '&:hover': {
+            '& $dragIndicator': {
+                opacity: 1
+            }
+        }
+    },
+    dragIndicator: {
+        opacity: 0,
+        position: 'absolute',
+        top: 0,
+        left: '50%',
+        cursor: 'move',
+        transition: 'opacity 0.3s',
+        transform: 'translateX(-50%) rotate(90deg)',
+        zIndex: 5
+    },
+    dragIndicatorIcon: {
+        width: '14.4px',
+        height: '18px',
+        color: theme.palette.text.secondary
+    }
+}); });

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    columnHeight: number;
+};
+export declare const TableColumnDragLayer: ({ columnHeight }: Props) => JSX.Element;
+export {};

package/cjs/components/VerticalHeadingsTable/TableColumnDragLayer/TableColumnDragLayer.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.TableColumnDragLayer = void 0;
+var react_1 = __importStar(require("react"));
+var react_dnd_1 = require("react-dnd");
+var TableColumnDragPreview_1 = require("./TableColumnDragPreview");
+var types_1 = require("../types");
+var styles_1 = require("./styles");
+var getItemStyles = function (dragLayerEl, clientOffset, columnWidth) {
+    var dragLayerRect = (dragLayerEl === null || dragLayerEl === void 0 ? void 0 : dragLayerEl.getBoundingClientRect()) || { x: 0, y: 0 };
+    var dragItemX = (clientOffset === null || clientOffset === void 0 ? void 0 : clientOffset.x) - (dragLayerRect === null || dragLayerRect === void 0 ? void 0 : dragLayerRect.x) - columnWidth / 2;
+    var dragItemY = (clientOffset === null || clientOffset === void 0 ? void 0 : clientOffset.y) - (dragLayerRect === null || dragLayerRect === void 0 ? void 0 : dragLayerRect.y);
+    var dragItemTransform = "translate(" + dragItemX + "px, " + dragItemY + "px";
+    return {
+        display: 'flex',
+        transform: dragItemTransform,
+        WebkitTransform: dragItemTransform
+    };
+};
+var TableColumnDragLayer = function (_a) {
+    var _b;
+    var columnHeight = _a.columnHeight;
+    var styles = styles_1.useStyles();
+    var dragLayerRef = react_1.useRef();
+    var _c = react_dnd_1.useDragLayer(function (monitor) { return ({
+        isDragging: monitor.isDragging(),
+        clientOffset: monitor.getClientOffset(),
+        item: monitor.getItem()
+    }); }), isDragging = _c.isDragging, clientOffset = _c.clientOffset, item = _c.item;
+    if (!isDragging || !item) {
+        return null;
+    }
+    var columnWidth = (_b = item.getColumnWidth) === null || _b === void 0 ? void 0 : _b.call(item);
+    return (react_1.default.createElement("div", { className: styles.dragLayer, ref: dragLayerRef },
+        react_1.default.createElement("div", { style: getItemStyles(dragLayerRef.current, clientOffset, columnWidth) }, item.type === types_1.DndItemTypes.Column && (react_1.default.createElement(TableColumnDragPreview_1.TableColumnDragPreview, { columnWidth: columnWidth, columnHeight: columnHeight, item: item })))));
+};
+exports.TableColumnDragLayer = TableColumnDragLayer;

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

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

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableColumnDragPreview = void 0;
+var react_1 = __importDefault(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;
+    var CellRenderer = rowData.cellRenderer || helpers_1.DefaultCellRenderer;
+    return (react_1.default.createElement("div", { style: { width: columnWidth, height: columnHeight, background: 'rgba(245,245,245, .5)' } },
+        react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id] })));
+};
+exports.TableColumnDragPreview = TableColumnDragPreview;

package/cjs/components/VerticalHeadingsTable/TableColumnDragLayer/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"dragLayer">;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles({
+    dragLayer: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        zIndex: 1300,
+        pointerEvents: 'none'
+    }
+});

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

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

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

@@ -0,0 +1,31 @@
+"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.TableHeadCell = void 0;
+var react_1 = __importDefault(require("react"));
+var DragIndicator_1 = __importDefault(require("@material-ui/icons/DragIndicator"));
+var helpers_1 = require("../helpers");
+var styles_1 = require("./styles");
+var TableHeadCell = function (_a) {
+    var rowData = _a.rowData, isDraggable = _a.isDraggable, dragRef = _a.dragRef;
+    var styles = 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 }))),
+        react_1.default.createElement(HeadCellRenderer, __assign({}, rowData))));
+};
+exports.TableHeadCell = TableHeadCell;

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

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"dragIndicator" | "dragIndicatorIcon" | "tableHead">;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStyles = void 0;
+var styles_1 = require("@material-ui/core/styles");
+exports.useStyles = styles_1.makeStyles(function (theme) { return ({
+    tableHead: {
+        position: 'relative',
+        '&:hover': {
+            '& $dragIndicator': {
+                opacity: 1
+            }
+        }
+    },
+    dragIndicator: {
+        opacity: 0,
+        position: 'absolute',
+        top: '50%',
+        left: 0,
+        transform: 'translateY(-50%)',
+        cursor: 'move',
+        transition: 'opacity 0.3s'
+    },
+    dragIndicatorIcon: {
+        width: '14.4px',
+        height: '18px',
+        color: theme.palette.text.secondary
+    }
+}); });

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { RowData, ColumnData } from '../types';
+declare type Props = {
+    rowData: RowData;
+    columnsData: ColumnData[];
+    index: number;
+    onMoveColumn?: (dragId: string, hoverId: string) => void;
+    setHoveredColumn: (columnValue: ColumnData) => void;
+    resetHoveredColumn: () => void;
+};
+export declare const TableRow: ({ rowData, columnsData, index, onMoveColumn, setHoveredColumn, resetHoveredColumn }: Props) => JSX.Element;
+export {};

package/cjs/components/VerticalHeadingsTable/TableRow/TableRow.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableRow = void 0;
+var react_1 = __importDefault(require("react"));
+var TableCell_1 = require("../TableCell/TableCell");
+var TableCellWithDnd_1 = require("../TableCellWithDnd/TableCellWithDnd");
+var TableHeadCell_1 = require("../TableHeadCell/TableHeadCell");
+var TableRow = function (_a) {
+    var rowData = _a.rowData, columnsData = _a.columnsData, index = _a.index, onMoveColumn = _a.onMoveColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
+    var isFirstRow = index === 0;
+    return (react_1.default.createElement("tr", null,
+        react_1.default.createElement(TableHeadCell_1.TableHeadCell, { rowData: rowData, isDraggable: false }),
+        columnsData.map(function (columnValue, index) {
+            var isDraggableColumn = columnValue.isDraggable;
+            var shouldRenderDragIndicator = isFirstRow && isDraggableColumn;
+            return onMoveColumn ? (react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { key: columnValue.id, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: shouldRenderDragIndicator, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableCell_1.TableCell, { key: columnValue.id, rowData: rowData, columnValue: columnValue, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+        })));
+};
+exports.TableRow = TableRow;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { RowData, ColumnData } from '../types';
+declare type Props = {
+    rowData: RowData;
+    index: number;
+    columnsData: ColumnData[];
+    onMoveRow: (dragId: string, hoverId: string) => void;
+    onMoveColumn?: (dragId: string, hoverId: string) => void;
+    setHoveredColumn: (columnValue: ColumnData) => void;
+    resetHoveredColumn: () => void;
+};
+export declare const TableRowWithDnd: ({ rowData, index, columnsData, onMoveRow, onMoveColumn, setHoveredColumn, resetHoveredColumn }: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,78 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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.TableRowWithDnd = void 0;
+var react_1 = __importStar(require("react"));
+var react_dnd_1 = require("react-dnd");
+var TableHeadCell_1 = require("../TableHeadCell/TableHeadCell");
+var TableCell_1 = require("../TableCell/TableCell");
+var TableCellWithDnd_1 = require("../TableCellWithDnd/TableCellWithDnd");
+var types_1 = require("../types");
+var TableRowWithDnd = function (_a) {
+    var rowData = _a.rowData, index = _a.index, columnsData = _a.columnsData, onMoveRow = _a.onMoveRow, onMoveColumn = _a.onMoveColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
+    var dropRef = react_1.default.useRef(null);
+    var dragRef = react_1.default.useRef(null);
+    var _b = react_dnd_1.useDrop({
+        accept: types_1.DndItemTypes.Row,
+        hover: function (item, monitor) {
+            if (!dropRef.current) {
+                return;
+            }
+            var dragIndex = item.index;
+            var hoverIndex = index;
+            if (dragIndex === hoverIndex) {
+                return;
+            }
+            var hoverBoundingRect = dropRef.current.getBoundingClientRect();
+            var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+            var clientOffset = monitor.getClientOffset();
+            var hoverClientY = clientOffset.y - hoverBoundingRect.top;
+            if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+                return;
+            }
+            if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+                return;
+            }
+            onMoveRow(item.id, rowData.id);
+            item.index = hoverIndex;
+        },
+        collect: function (monitor) { return ({
+            targetId: monitor.getHandlerId()
+        }); }
+    }), targetId = _b[0].targetId, drop = _b[1];
+    var _c = react_dnd_1.useDrag({
+        item: { type: types_1.DndItemTypes.Row, index: index, id: rowData.id },
+        collect: function (monitor) { return ({
+            opacity: monitor.isDragging() ? 0 : 1,
+            sourceId: monitor.getHandlerId()
+        }); }
+    }), _d = _c[0], opacity = _d.opacity, sourceId = _d.sourceId, drag = _c[1], preview = _c[2];
+    react_1.useEffect(function () {
+        preview(drop(dropRef));
+        drag(dragRef);
+    }, []);
+    return (react_1.default.createElement("tr", { style: { opacity: opacity }, ref: dropRef, "data-target-id": targetId, "data-source-id": sourceId },
+        react_1.default.createElement(TableHeadCell_1.TableHeadCell, { rowData: rowData, isDraggable: true, dragRef: dragRef }),
+        columnsData.map(function (columnValue, index) {
+            return onMoveColumn ? (react_1.default.createElement(TableCellWithDnd_1.TableCellWithDnd, { key: columnValue.id, columnValue: columnValue, rowData: rowData, index: index, onMoveColumn: onMoveColumn, shouldRenderDragIndicator: false, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableCell_1.TableCell, { key: columnValue.id, columnValue: columnValue, rowData: rowData, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+        })));
+};
+exports.TableRowWithDnd = TableRowWithDnd;

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

@@ -1,26 +1,14 @@
-declare var _default: React.MemoExoticComponent<{
-    ({ className, rowsData, columnsData, theadRowsNumber, setHoveredColumn, resetHoveredColumn }: {
-        className: any;
-        rowsData: any;
-        columnsData: any;
-        theadRowsNumber?: number;
-        setHoveredColumn: any;
-        resetHoveredColumn: any;
-    }): JSX.Element;
-    propTypes: {
-        rowsData: PropTypes.Requireable<PropTypes.InferProps<{
-            id: PropTypes.Requireable<string>;
-            label: PropTypes.Requireable<string>;
-            headCellRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-            cellRenderer: PropTypes.Requireable<(...args: any[]) => any>;
-        }>[]>;
-        columnsData: PropTypes.Requireable<object[]>;
-        theadRowsNumber: PropTypes.Requireable<number>;
-        className: PropTypes.Requireable<string>;
-        setHoveredColumn: PropTypes.Requireable<(...args: any[]) => any>;
-        resetHoveredColumn: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-}>;
+import React from 'react';
+import { RowData, ColumnData } from './types';
+declare type Props = {
+    className?: string;
+    rowsData: RowData[];
+    columnsData: ColumnData[];
+    theadRowsNumber?: number;
+    onMoveRow?: (dragId: string, hoverId: string) => void;
+    onMoveColumn?: (dragId: string, hoverId: string) => void;
+    setHoveredColumn?: (columnValue: ColumnData) => void;
+    resetHoveredColumn?: () => void;
+};
+declare const _default: React.MemoExoticComponent<({ className, rowsData, columnsData, theadRowsNumber, onMoveRow, onMoveColumn, setHoveredColumn, resetHoveredColumn }: Props) => JSX.Element>;
 export default _default;
-import PropTypes from "prop-types";
-import React from "react";

package/cjs/components/VerticalHeadingsTable/VerticalHeadingsTable.js

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,46 +18,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var prop_types_1 = __importDefault(require("prop-types"));
-var DefaultHeadCellRenderer = function (_a) {
-    var label = _a.label;
-    return label || null;
-};
-var DefaultCellRenderer = function (_a) {
-    var value = _a.value;
-    return value || null;
-};
+var TableRow_1 = require("./TableRow/TableRow");
+var TableRowWithDnd_1 = require("./TableRowWithDnd/TableRowWithDnd");
+var TableColumnDragLayer_1 = require("./TableColumnDragLayer/TableColumnDragLayer");
 var VerticalHeadingsTable = function (_a) {
-    var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, _b = _a.theadRowsNumber, theadRowsNumber = _b === void 0 ? 0 : _b, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
-    var renderRow = function (rowData) {
-        var CellRenderer = rowData.cellRenderer || DefaultCellRenderer;
-        var HeadCellRenderer = rowData.headCellRenderer || DefaultHeadCellRenderer;
-        return (react_1.default.createElement("tr", { key: rowData.id },
-            react_1.default.createElement("th", { key: rowData.id },
-                react_1.default.createElement(HeadCellRenderer, __assign({}, rowData))),
-            columnsData.map(function (columnValue, index) { return (react_1.default.createElement("td", { key: index, onMouseOver: function () { return setHoveredColumn(columnValue); }, onMouseLeave: resetHoveredColumn },
-                react_1.default.createElement(CellRenderer, { value: columnValue[rowData.id], columnValue: columnValue, rowData: rowData }))); })));
-    };
-    return (react_1.default.createElement("table", { className: className },
-        theadRowsNumber > 0 && react_1.default.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(renderRow)),
-        react_1.default.createElement("tbody", null, rowsData.slice(theadRowsNumber).map(renderRow))));
-};
-VerticalHeadingsTable.propTypes = {
-    rowsData: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        id: prop_types_1.default.string,
-        label: prop_types_1.default.string,
-        headCellRenderer: prop_types_1.default.func,
-        cellRenderer: prop_types_1.default.func
-    })),
-    columnsData: prop_types_1.default.arrayOf(prop_types_1.default.object),
-    theadRowsNumber: prop_types_1.default.number,
-    className: prop_types_1.default.string,
-    setHoveredColumn: prop_types_1.default.func,
-    resetHoveredColumn: prop_types_1.default.func
+    var _b;
+    var className = _a.className, rowsData = _a.rowsData, columnsData = _a.columnsData, _c = _a.theadRowsNumber, theadRowsNumber = _c === void 0 ? 0 : _c, onMoveRow = _a.onMoveRow, onMoveColumn = _a.onMoveColumn, setHoveredColumn = _a.setHoveredColumn, resetHoveredColumn = _a.resetHoveredColumn;
+    var tableRef = react_1.useRef(null);
+    var tableHeight = (_b = tableRef === null || tableRef === void 0 ? void 0 : tableRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(TableColumnDragLayer_1.TableColumnDragLayer, { columnHeight: tableHeight }),
+        react_1.default.createElement("table", { ref: tableRef, className: className },
+            theadRowsNumber > 0 && (react_1.default.createElement("thead", null, rowsData.slice(0, theadRowsNumber).map(function (rowData, index) { return (react_1.default.createElement(TableRow_1.TableRow, { key: rowData.id, rowData: rowData, columnsData: columnsData, index: index, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })); }))),
+            react_1.default.createElement("tbody", null, rowsData.slice(theadRowsNumber).map(function (rowData, index) {
+                return onMoveRow ? (react_1.default.createElement(TableRowWithDnd_1.TableRowWithDnd, { key: rowData.id, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveRow: onMoveRow, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn })) : (react_1.default.createElement(TableRow_1.TableRow, { key: rowData.id, index: index + theadRowsNumber, rowData: rowData, columnsData: columnsData, onMoveColumn: onMoveColumn, setHoveredColumn: setHoveredColumn, resetHoveredColumn: resetHoveredColumn }));
+            })))));
 };
 exports.default = react_1.memo(VerticalHeadingsTable);

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

@@ -0,0 +1,6 @@
+export declare const DefaultCellRenderer: ({ value }: {
+    value: any;
+}) => any;
+export declare const DefaultHeadCellRenderer: ({ label }: {
+    label: any;
+}) => any;

package/cjs/components/VerticalHeadingsTable/helpers.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DefaultHeadCellRenderer = exports.DefaultCellRenderer = void 0;
+var DefaultCellRenderer = function (_a) {
+    var value = _a.value;
+    return value || null;
+};
+exports.DefaultCellRenderer = DefaultCellRenderer;
+var DefaultHeadCellRenderer = function (_a) {
+    var label = _a.label;
+    return label || null;
+};
+exports.DefaultHeadCellRenderer = DefaultHeadCellRenderer;