@absreim/react-bootstrap-data-grid-pro 2.5.0 → 2.6.0

package/grid-pro/ColHeaderCellPro.js

@@ -4,22 +4,24 @@ import { useCallback, useMemo, useRef, } from "react";
 import classNames from "classnames";
 import getWidthStyle from "../grid/util/getWidthStyle";
 import useSortHeaderStates from "../grid/main/ColHeaderCell/useSortHeaderStates";
-var setWidthStyle = function (cells, width) {
-    cells.forEach(function (cell) {
-        cell.style.minWidth = "".concat(width, "px");
-        cell.style.maxWidth = "".concat(width, "px");
+import VerticalGrip from "./assets/VerticalGrip";
+import regDragCleanup from "./util/regDragCleanup";
+import sortOrderToAriaSort from "../grid/sorting/sortOrderToAriaSort";
+const setWidthStyle = (cells, width) => {
+    cells.forEach((cell) => {
+        cell.style.minWidth = `${width}px`;
+        cell.style.maxWidth = `${width}px`;
     });
 };
-var ColHeaderCellPro = function (_a) {
-    var label = _a.label, sortModel = _a.sortModel, ariaColIndex = _a.ariaColIndex, additionalClasses = _a.additionalClasses, width = _a.width, displayMode = _a.displayMode, setWidth = _a.setWidth, minResizeWidth = _a.minResizeWidth, maxResizeWidth = _a.maxResizeWidth, keyboardResizeStep = _a.keyboardResizeStep;
-    var resizeable = setWidth !== undefined;
-    var cellIsClickable = !!(resizeable && sortModel);
-    var sortDivClickable = resizeable && sortModel;
-    var _b = useSortHeaderStates(sortModel), handleClick = _b.handleClick, handleMouseOver = _b.handleMouseOver, handleMouseOut = _b.handleMouseOut, sortSymbol = _b.sortSymbol;
-    var defaultMinResizeWidth = sortModel ? 64 : 32;
-    var effectiveMinResizeWidth = minResizeWidth || defaultMinResizeWidth;
-    var effectiveKbdResizeStep = keyboardResizeStep || 10;
-    var clickToSortCellContents = useMemo(function () {
+const ColHeaderCellPro = ({ label, sortModel, ariaColIndex, additionalClasses, width, displayMode, setWidth, minResizeWidth, maxResizeWidth, keyboardResizeStep, }) => {
+    const resizeable = setWidth !== undefined;
+    const cellIsClickable = !!(!resizeable && sortModel);
+    const sortDivClickable = resizeable && sortModel;
+    const { handleClick, handleMouseOver, handleMouseOut, sortSymbol } = useSortHeaderStates(sortModel);
+    const defaultMinResizeWidth = sortModel ? 64 : 32;
+    const effectiveMinResizeWidth = minResizeWidth || defaultMinResizeWidth;
+    const effectiveKbdResizeStep = keyboardResizeStep || 10;
+    const clickToSortCellContents = useMemo(() => {
         if (!width || displayMode === "table") {
             // Testing has shown that content gets cut off in a table cell only if
             // the table "display" property is "block" and both "min-width" and
@@ -43,7 +45,7 @@ var ColHeaderCellPro = function (_a) {
         sortSymbol,
         width,
     ]);
-    var onKeyDown = useCallback(function (e) {
+    const onKeyDown = useCallback((e) => {
         if (setWidth === undefined || width === undefined) {
             return;
         }
@@ -62,9 +64,9 @@ var ColHeaderCellPro = function (_a) {
         setWidth,
         width,
     ]);
-    var thRef = useRef(null);
-    var onPointerDown = useCallback(function (event) {
-        if (event.button === 2) {
+    const thRef = useRef(null);
+    const onPointerDown = useCallback((event) => {
+        if (event.button !== 0) {
             return;
         }
         if (thRef.current === null ||
@@ -79,48 +81,51 @@ var ColHeaderCellPro = function (_a) {
         // in a ref and having this component conditionally render based on the
         // value of the ref. I.e., if the ref has a value, use that value for the
         // width instead of the "width" prop.
-        var target = event.target;
+        const target = event.target;
         target.setPointerCapture(event.pointerId);
-        var table = thRef.current.parentElement.parentElement
+        const table = thRef.current.parentElement.parentElement
             .parentElement;
-        var tds = table.querySelectorAll(":scope > tbody > tr > td:nth-child(".concat(ariaColIndex, ")"));
-        var cellsToUpdate = Array.from(tds).concat(thRef.current);
-        var origX = event.clientX;
-        var onPointerMove = function (event) {
-            var diff = event.clientX - origX;
-            var newWidth = Math.max(effectiveMinResizeWidth, width + diff);
+        const tds = table.querySelectorAll(`:scope > tbody > tr > td:nth-child(${ariaColIndex})`);
+        const cellsToUpdate = Array.from(tds).concat(thRef.current);
+        const origX = event.clientX;
+        const onPointerMove = (event) => {
+            const diff = event.clientX - origX;
+            let newWidth = Math.max(effectiveMinResizeWidth, width + diff);
             if (maxResizeWidth) {
                 newWidth = Math.min(maxResizeWidth, newWidth);
             }
             setWidthStyle(cellsToUpdate, newWidth);
         };
-        target.addEventListener("pointermove", onPointerMove);
-        var removePointerMove = function () {
-            return target.removeEventListener("pointermove", onPointerMove);
-        };
-        var onKeyDown = function (event) {
+        const onKeyDown = (removeListeners) => (event) => {
             if (event.code === "Escape") {
                 setWidthStyle(cellsToUpdate, width);
-                removePointerMove();
+                removeListeners();
             }
         };
-        document.addEventListener("keydown", onKeyDown, { once: true });
-        var onPointerUp = function () {
+        const onPointerUp = (removeListeners) => () => {
             if (thRef.current !== null) {
-                var newWidth = Number(thRef.current.style.minWidth.replace("px", ""));
+                const newWidth = Number(thRef.current.style.minWidth.replace("px", ""));
                 setWidth(newWidth);
             }
-            removePointerMove();
-            document.removeEventListener("keydown", onKeyDown);
+            removeListeners();
+        };
+        const onContextMenu = (event) => {
+            event.preventDefault();
         };
-        target.addEventListener("pointerup", onPointerUp, { once: true });
+        regDragCleanup({
+            element: target,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel: onPointerUp,
+            onKeyDown,
+            onContextMenu,
+        });
     }, [ariaColIndex, effectiveMinResizeWidth, maxResizeWidth, setWidth, width]);
-    var cellContents = useMemo(function () {
+    const cellContents = useMemo(() => {
         if (!resizeable) {
             return clickToSortCellContents;
         }
-        var dragHandleIcon = (_jsx("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", className: "rdbg-drag-marker", children: _jsx("path", { d: "M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" }) }));
-        return (_jsxs("div", { className: "d-flex justify-content-between", children: [clickToSortCellContents, _jsx("div", { className: "rdbg-drag-marker-container", onPointerDown: onPointerDown, role: "separator", tabIndex: 0, "aria-label": "Resize column", "aria-valuenow": width, "aria-valuemin": minResizeWidth, "aria-valuemax": maxResizeWidth, onKeyDown: onKeyDown, onClick: function (e) { return e.stopPropagation(); }, children: dragHandleIcon })] }));
+        return (_jsxs("div", { className: "d-flex justify-content-between", children: [clickToSortCellContents, _jsx("div", { className: "rbdg-draggable-container rbdg-resize-container", onPointerDown: onPointerDown, role: "separator", tabIndex: 0, title: "Resize column", "aria-label": "Resize column", "aria-valuenow": width, "aria-valuemin": minResizeWidth, "aria-valuemax": maxResizeWidth, onKeyDown: onKeyDown, onClick: (e) => e.stopPropagation(), children: _jsx(VerticalGrip, { className: "rbdg-draggable-icon" }) })] }));
     }, [
         clickToSortCellContents,
         maxResizeWidth,
@@ -135,6 +140,6 @@ var ColHeaderCellPro = function (_a) {
             "table-active": sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortOrder,
         }, additionalClasses || []), onClick: cellIsClickable ? handleClick : undefined, onMouseOver: cellIsClickable ? handleMouseOver : undefined, onMouseOut: cellIsClickable ? handleMouseOut : undefined, "aria-description": sortModel
             ? "Column header"
-            : "Column header that can be clicked to change the sorting mode", "aria-colindex": ariaColIndex, style: getWidthStyle(width), children: cellContents }));
+            : "Column header that can be clicked to change the sorting mode", "aria-colindex": ariaColIndex, "aria-sort": sortModel ? sortOrderToAriaSort(sortModel.sortOrder) : undefined, style: getWidthStyle(width), children: cellContents }));
 };
 export default ColHeaderCellPro;

package/grid-pro/GridPro.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import useCombinedPipeline from "../grid/pipeline/useCombinedPipeline";
 import InternalGrid from "../grid/InternalGrid";
 import ColHeaderCellPro from "./ColHeaderCellPro";
@@ -10,47 +10,57 @@ import useGetInputStrSubmitCallback from "../grid/pipeline/useGetInputStrSubmitC
 import useAugFormattedRows from "../grid/pipeline/useAugFormattedRows";
 import useResizeModel from "./resize/useResizeModel";
 import BodyRows from "../grid/main/BodyRows";
-var GridPro = function (props) {
-    var rows = props.rows, cols = props.cols, editModel = props.editModel, filterModel = props.filterModel, sortModel = props.sortModel, pagination = props.pagination, selectModel = props.selectModel, styleModel = props.styleModel, displayMode = props.displayMode;
-    var combinedPipelineOutput = useCombinedPipeline({
-        rows: rows,
-        cols: cols,
-        filterModel: filterModel,
-        sortModel: sortModel,
-        pagination: pagination,
-        selectModel: selectModel,
+import ReorderHeaderCell from "./reorder/ReorderHeaderCell";
+import ReorderHandleCell from "./reorder/ReorderHandleCell";
+const GridPro = (props) => {
+    const { rows, cols, editModel, filterModel, sortModel, pagination, selectModel, styleModel, displayMode, reorder, } = props;
+    const combinedPipelineOutput = useCombinedPipeline({
+        rows,
+        cols,
+        filterModel,
+        sortModel,
+        pagination,
+        selectModel,
     });
-    var _a = combinedPipelineOutput.sortedRowsOutput, sortColDef = _a.sortColDef, setSortColDef = _a.setSortColDef, sortingEnabled = _a.sortingEnabled, showSelectCol = combinedPipelineOutput.showSelectCol, displayRows = combinedPipelineOutput.displayRows;
-    var gridSelectionFns = useGridSelectionFns(selectModel, rows);
-    var unwrappedStyles = useUnwrappedGridStyles(styleModel);
-    var getInputStrSubmitCallback = useGetInputStrSubmitCallback(editModel, cols);
-    var resizeModel = useResizeModel(cols, displayMode);
-    var colNameToWidth = useMemo(function () {
-        return Object.keys(resizeModel).reduce(function (prev, fieldName) {
-            prev[fieldName] = resizeModel[fieldName].width;
-            return prev;
-        }, {});
-    }, [resizeModel]);
-    var augFormattedRows = useAugFormattedRows(colNameToWidth, displayRows);
-    var colHeaderCells = cols.map(function (_a, index) {
-        var _b;
-        var name = _a.name, label = _a.label, sortable = _a.sortable, minResizeWidth = _a.minResizeWidth, maxResizeWidth = _a.maxResizeWidth, keyboardResizeStep = _a.keyboardResizeStep;
-        var colSortModel = sortingEnabled && sortable
+    const { sortedRowsOutput: { sortColDef, setSortColDef, sortingEnabled }, showSelectCol, displayRows, filterState, } = combinedPipelineOutput;
+    const gridSelectionFns = useGridSelectionFns(selectModel, rows);
+    const unwrappedStyles = useUnwrappedGridStyles(styleModel);
+    const getInputStrSubmitCallback = useGetInputStrSubmitCallback(editModel, cols);
+    const resizeModel = useResizeModel(cols, displayMode);
+    const colNameToWidth = useMemo(() => Object.keys(resizeModel).reduce((prev, fieldName) => {
+        prev[fieldName] = resizeModel[fieldName].width;
+        return prev;
+    }, {}), [resizeModel]);
+    const augFormattedRows = useAugFormattedRows(colNameToWidth, displayRows);
+    const colHeaderCells = cols.map(({ name, label, sortable, minResizeWidth, maxResizeWidth, keyboardResizeStep, }, index) => {
+        var _a;
+        const colSortModel = sortingEnabled && sortable
             ? {
                 sortOrder: (sortColDef === null || sortColDef === void 0 ? void 0 : sortColDef.name) === name ? sortColDef.order : null,
-                setSortOrder: function (order) {
-                    setSortColDef && setSortColDef(order && { name: name, order: order });
+                setSortOrder: (order) => {
+                    setSortColDef && setSortColDef(order && { name, order });
                 },
             }
             : undefined;
-        return (_jsx(ColHeaderCellPro, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: ((_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _b === void 0 ? void 0 : _b.theadTh) &&
+        return (_jsx(ColHeaderCellPro, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: ((_a = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _a === void 0 ? void 0 : _a.theadTh) &&
                 styleModel.mainTableStyleModel.theadTh(index), width: resizeModel[name].width, displayMode: displayMode, setWidth: resizeModel[name].setWidth, minResizeWidth: minResizeWidth, maxResizeWidth: maxResizeWidth, keyboardResizeStep: keyboardResizeStep }, name));
     });
-    var bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, unwrappedStyles: unwrappedStyles, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback }));
+    const filteringOccurring = !!(filterState &&
+        Object.values(filterState).find(({ editableState }) => editableState.enabled));
+    const sortingOccurring = !!sortColDef;
+    const renderPrefixCells = useCallback((augRow) => {
+        if (!reorder) {
+            return null;
+        }
+        const reorderCallback = (destIndex) => reorder.callback(augRow.id, destIndex);
+        return (_jsx(ReorderHandleCell, { rowId: augRow.id, ariaRowIndex: augRow.prePaginationIndex + 2, disabled: filteringOccurring || sortingOccurring, reorderCallback: reorderCallback, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.reorderModel }));
+    }, [filteringOccurring, reorder, sortingOccurring, styleModel === null || styleModel === void 0 ? void 0 : styleModel.reorderModel]);
+    const bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, unwrappedStyles: unwrappedStyles, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback, renderPrefixCells: renderPrefixCells, additionalColIndexOffset: reorder ? 1 : 0 }));
+    const prefixHeader = reorder ? _jsx(ReorderHeaderCell, {}) : null;
     return (_jsx(InternalGrid, { gridProps: props, hooks: {
             pipelineOutput: combinedPipelineOutput,
             selectFns: gridSelectionFns,
-            unwrappedStyles: unwrappedStyles,
-        }, slots: { colHeaderCells: colHeaderCells, bodyRows: bodyRows } }));
+            unwrappedStyles,
+        }, slots: { colHeaderCells, bodyRows, prefixHeader } }));
 };
 export default GridPro;

package/grid-pro/assets/HorizontalGrip.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+export interface HorizontalGripProps {
+    className?: string;
+}
+declare const HorizontalGrip: FC<HorizontalGripProps>;
+export default HorizontalGrip;

package/grid-pro/assets/HorizontalGrip.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const HorizontalGrip = ({ className }) => (_jsxs("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", className: className, children: [_jsx("title", { children: "Horizontal Grip" }), _jsx("desc", { children: "A 2-row by 5-column array of dots" }), _jsx("path", { d: "M2 8a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m3 3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m0-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2" })] }));
+export default HorizontalGrip;

package/grid-pro/assets/VerticalGrip.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+export interface VerticalGripProps {
+    className?: string;
+}
+declare const VerticalGrip: FC<VerticalGripProps>;
+export default VerticalGrip;

package/grid-pro/assets/VerticalGrip.js

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const VerticalGrip = ({ className }) => (_jsxs("svg", { "aria-hidden": true, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", className: className, children: [_jsx("title", { children: "Vertical Grip" }), _jsx("desc", { children: "A 5-row by 2-column array of dots" }), _jsx("path", { d: "M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0M7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0" })] }));
+export default VerticalGrip;

package/grid-pro/index.d.ts

@@ -1,3 +1,6 @@
 export * from "../grid";
 export { default } from "./GridPro";
 export * from "./types";
+export * from "./util";
+export * from "./reorder/types";
+export * from "./resize/types";

package/grid-pro/index.js

@@ -1,3 +1,6 @@
 export * from "../grid";
 export { default } from "./GridPro";
 export * from "./types";
+export * from "./util";
+export * from "./reorder/types";
+export * from "./resize/types";

package/grid-pro/reorder/ReorderHandleCell.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { RowId } from "../";
+import { ReorderStyleModel } from "./types";
+export type ReorderHandleCellProps = {
+    rowId: RowId;
+    ariaRowIndex: number;
+    reorderCallback: (destIndex: number) => void;
+    disabled: boolean;
+    styleModel?: ReorderStyleModel;
+};
+declare const ReorderHandleCell: FC<ReorderHandleCellProps>;
+export default ReorderHandleCell;

package/grid-pro/reorder/ReorderHandleCell.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import HorizontalGrip from "../assets/HorizontalGrip";
+import regDragCleanup from "../util/regDragCleanup";
+import classNames from "classnames";
+function dropTargetRefValuesEqual(first, second) {
+    if (first === null && second === null) {
+        return true;
+    }
+    if (first === null || second === null) {
+        return false;
+    }
+    return first.index === second.index && first.upper === second.upper;
+}
+const ReorderHandleCell = ({ rowId, ariaRowIndex, disabled, reorderCallback, styleModel, }) => {
+    const intDraggedRowClasses = useMemo(() => (styleModel === null || styleModel === void 0 ? void 0 : styleModel.draggedRowClasses) || ["rbdg-reorder-dragged-row"], [styleModel === null || styleModel === void 0 ? void 0 : styleModel.draggedRowClasses]);
+    const intDraggedRowPredecessorClasses = useMemo(() => (styleModel === null || styleModel === void 0 ? void 0 : styleModel.draggedRowPredecessorClasses) || [
+        "rbdg-reorder-dragged-row-pred",
+    ], [styleModel === null || styleModel === void 0 ? void 0 : styleModel.draggedRowPredecessorClasses]);
+    const intTopBorderRowClasses = useMemo(() => (styleModel === null || styleModel === void 0 ? void 0 : styleModel.topBorderRowClasses) || ["rbdg-reorder-above-drag-target-row"], [styleModel === null || styleModel === void 0 ? void 0 : styleModel.topBorderRowClasses]);
+    const intBottomBorderRowClasses = useMemo(() => (styleModel === null || styleModel === void 0 ? void 0 : styleModel.bottomBorderRowClasses) || [
+        "rbdg-reorder-below-drag-target-row",
+    ], [styleModel === null || styleModel === void 0 ? void 0 : styleModel.bottomBorderRowClasses]);
+    const intGhostTableClasses = useMemo(() => (styleModel === null || styleModel === void 0 ? void 0 : styleModel.ghostDivClasses) || ["border", "rbdg-drag-ghost"], [styleModel === null || styleModel === void 0 ? void 0 : styleModel.ghostDivClasses]);
+    const onPointerDown = useCallback((event) => {
+        const target = event.target;
+        const { pointerId, clientX, clientY, button } = event;
+        if (button !== 0) {
+            return;
+        }
+        function createDragGhost() {
+            const ghostDiv = document.createElement("div");
+            ghostDiv.className = intGhostTableClasses.join(" ");
+            ghostDiv.style.left = `${clientX}px`;
+            ghostDiv.style.top = `${clientY}px`;
+            ghostDiv.textContent = `ID: ${rowId}`;
+            ghostDiv.setAttribute("data-testid", "rbdg-drag-ghost");
+            document.body.appendChild(ghostDiv);
+            return ghostDiv;
+        }
+        const drageeTh = target.parentElement;
+        const drageeTr = drageeTh.parentElement;
+        const tbody = drageeTr.parentElement;
+        const thead = tbody.parentElement.firstChild;
+        const headTr = thead.firstChild;
+        const trs = Array.from(tbody.children);
+        const drageeTrIndex = Number(drageeTr.ariaRowIndex) - 2;
+        const origClassesByIndex = trs.map((tr) => tr.className);
+        const origHeadTrClasses = headTr.className;
+        function applyRowClassesFromOrig(trIndex, classes) {
+            trs[trIndex].className = [
+                origClassesByIndex[trIndex],
+                classes.join(" "),
+            ]
+                .join(" ")
+                .trim();
+        }
+        function applyDrageeStyles() {
+            applyRowClassesFromOrig(drageeTrIndex, intDraggedRowClasses);
+            if (drageeTrIndex - 1 === -1) {
+                headTr.className = [
+                    origHeadTrClasses,
+                    intDraggedRowPredecessorClasses.join(" "),
+                ]
+                    .join(" ")
+                    .trim();
+                return;
+            }
+            applyRowClassesFromOrig(drageeTrIndex - 1, intDraggedRowPredecessorClasses);
+        }
+        applyDrageeStyles();
+        const baseClassesByIndex = trs.map((tr) => tr.className);
+        const baseHeadTrClasses = headTr.className;
+        const rectToIndex = trs.reduce((map, element, trIndex) => {
+            if (trIndex !== drageeTrIndex) {
+                map.set(element.getBoundingClientRect(), trIndex);
+            }
+            return map;
+        }, new Map());
+        const dropTargetRef = {
+            current: null,
+        };
+        function detectEnclosure(clientX, clientY) {
+            for (const rect of rectToIndex.keys()) {
+                if (clientY < rect.top ||
+                    clientY > rect.bottom ||
+                    clientX < rect.left ||
+                    clientX > rect.right) {
+                    continue;
+                }
+                const midY = Math.floor(rect.top + rect.bottom) / 2;
+                const rectIndex = rectToIndex.get(rect);
+                if (clientY <= midY && rectIndex - 1 === drageeTrIndex) {
+                    return null;
+                }
+                if (clientY <= midY && rectIndex - 1 !== drageeTrIndex) {
+                    return { index: rectIndex, upper: true };
+                }
+                if (clientY > midY && rectIndex + 1 === drageeTrIndex) {
+                    return null;
+                }
+                if (clientY > midY && rectIndex + 1 !== drageeTrIndex) {
+                    return { index: rectIndex, upper: false };
+                }
+            }
+            return null;
+        }
+        function restoreOrigRowClasses(trIndex) {
+            trs[trIndex].className = origClassesByIndex[trIndex];
+        }
+        function restoreOrigClasses() {
+            trs.forEach((_, trIndex) => restoreOrigRowClasses(trIndex));
+            headTr.className = origHeadTrClasses;
+        }
+        function restoreBaseRowClasses(trIndex) {
+            trs[trIndex].className = baseClassesByIndex[trIndex];
+        }
+        function restoreBaseClasses() {
+            trs.forEach((_, trIndex) => restoreBaseRowClasses(trIndex));
+            headTr.className = baseHeadTrClasses;
+        }
+        function applyRowClassesFromBase(trIndex, classes) {
+            trs[trIndex].className = [
+                baseClassesByIndex[trIndex],
+                classes.join(" "),
+            ]
+                .join(" ")
+                .trim();
+        }
+        function applyDragStyles(trIndex, upper) {
+            if (upper) {
+                applyRowClassesFromBase(trIndex, intBottomBorderRowClasses);
+            }
+            if (upper && trIndex - 1 >= 0) {
+                applyRowClassesFromBase(trIndex - 1, intTopBorderRowClasses);
+            }
+            if (upper && trIndex - 1 === -1) {
+                headTr.className = [
+                    baseHeadTrClasses,
+                    intTopBorderRowClasses.join(" "),
+                ]
+                    .join(" ")
+                    .trim();
+            }
+            if (!upper) {
+                applyRowClassesFromBase(trIndex, intTopBorderRowClasses);
+            }
+            if (!upper && trIndex + 1 < trs.length) {
+                applyRowClassesFromBase(trIndex + 1, intBottomBorderRowClasses);
+            }
+        }
+        function updateRowStyles(currentDropTargetVal) {
+            if (dropTargetRefValuesEqual(dropTargetRef.current, currentDropTargetVal)) {
+                return;
+            }
+            if (currentDropTargetVal === null) {
+                restoreBaseClasses();
+                dropTargetRef.current = null;
+                return;
+            }
+            if (dropTargetRef.current !== null) {
+                restoreBaseClasses();
+            }
+            applyDragStyles(currentDropTargetVal.index, currentDropTargetVal.upper);
+            dropTargetRef.current = currentDropTargetVal;
+        }
+        target.setPointerCapture(pointerId);
+        const dragGhost = createDragGhost();
+        applyDrageeStyles();
+        function onPointerMove({ clientX, clientY }) {
+            dragGhost.style.left = `${clientX}px`;
+            dragGhost.style.top = `${clientY}px`;
+            const dragTargetVal = detectEnclosure(clientX, clientY);
+            updateRowStyles(dragTargetVal);
+        }
+        function onContextMenu(event) {
+            event.preventDefault();
+        }
+        function cleanUpDragStates() {
+            dragGhost.remove();
+            restoreOrigClasses();
+        }
+        const onKeyDown = (removeListeners) => (event) => {
+            if (event.code === "Escape") {
+                removeListeners();
+                cleanUpDragStates();
+                dropTargetRef.current = null;
+            }
+        };
+        const onPointerUp = (removeListeners) => () => {
+            removeListeners();
+            cleanUpDragStates();
+            if (dropTargetRef.current !== null) {
+                reorderCallback(dropTargetRef.current.index + (dropTargetRef.current.upper ? 0 : 1));
+            }
+        };
+        target.focus();
+        regDragCleanup({
+            element: target,
+            onPointerMove,
+            onPointerUp,
+            onPointerCancel: onPointerUp,
+            onKeyDown,
+            onContextMenu,
+        });
+    }, [
+        intBottomBorderRowClasses,
+        intDraggedRowClasses,
+        intDraggedRowPredecessorClasses,
+        intGhostTableClasses,
+        intTopBorderRowClasses,
+        reorderCallback,
+        rowId,
+    ]);
+    const label = `Reorder Row ${ariaRowIndex}`;
+    return (_jsx("th", { "aria-colindex": 1, children: _jsx("button", { onClick: (event) => event.stopPropagation(), "aria-label": label, title: label, onPointerDown: onPointerDown, className: classNames("rbdg-draggable-container", "rbdg-reorder-container", "rbdg-plain-icon-button", {
+                "bs-btn-disabled": disabled,
+            }), disabled: disabled, children: _jsx(HorizontalGrip, { className: "rbdg-draggable-icon" }) }) }));
+};
+export default ReorderHandleCell;

package/grid-pro/reorder/ReorderHeaderCell.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const ReorderHeaderCell: FC;
+export default ReorderHeaderCell;

package/grid-pro/reorder/ReorderHeaderCell.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const spinningArrowIcon = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", "aria-hidden": "true", children: [_jsx("desc", { children: "Two arrows that are following each other and pointing clockwise" }), _jsx("path", { d: "M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9" }), _jsx("path", { fillRule: "evenodd", d: "M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z" })] }));
+const ReorderHeaderCell = () => (_jsx("th", { "aria-colindex": 1, title: "Reorder Controls", "aria-label": "Reorder Controls", "aria-description": "Header cell for column with drag handles for reordering rows", children: spinningArrowIcon }));
+export default ReorderHeaderCell;

package/grid-pro/reorder/types.d.ts

@@ -0,0 +1,12 @@
+import { RowId } from "../";
+export type ReorderCallback = (id: RowId, destIndex: number) => void;
+export interface ReorderModel {
+    callback: ReorderCallback;
+}
+export interface ReorderStyleModel {
+    draggedRowClasses?: string[];
+    draggedRowPredecessorClasses?: string[];
+    topBorderRowClasses?: string[];
+    bottomBorderRowClasses?: string[];
+    ghostDivClasses?: string[];
+}

package/grid-pro/reorder/types.js

@@ -0,0 +1 @@
+export {};