@absreim/react-bootstrap-data-grid-pro 2.6.1 → 2.7.0

package/grid/InternalGrid.d.ts

@@ -15,6 +15,9 @@ export interface InternalGridProps {
         bodyRows: ReactNode;
         prefixHeader?: ReactNode;
     };
+    classes?: {
+        headerRow?: string[];
+    };
 }
 declare const InternalGrid: FC<InternalGridProps>;
 export default InternalGrid;

package/grid/InternalGrid.js

@@ -10,7 +10,7 @@ import useInterfaces from "./toolbar/useInterfaces";
 import ToolbarContainer from "./toolbar/ToolbarContainer";
 import useExportFn from "./export/useExportFn";
 import getWidthStyle from "./util/getWidthStyle";
-const InternalGrid = ({ gridProps: { rows, cols, pagination, filterModel, selectModel, editModel, caption, styleModel, useToolbar, responsive, displayMode, }, hooks: { pipelineOutput, selectFns, unwrappedStyles }, slots: { colHeaderCells, bodyRows, prefixHeader }, }) => {
+const InternalGrid = ({ gridProps: { rows, cols, pagination, filterModel, selectModel, editModel, caption, styleModel, useToolbar, responsive, displayMode, }, hooks: { pipelineOutput, selectFns, unwrappedStyles }, slots: { colHeaderCells, bodyRows, prefixHeader }, classes, }) => {
     var _a;
     const { normalizedTableFilterModel, filteredRows, filterState, sortedRowsOutput: { sortedRows }, currentPageRowsOutput: { paginatedRows, normalizedModel }, showSelectCol, } = pipelineOutput;
     const [filterOptionsVisible, setFilterOptionsVisible] = useState(false);
@@ -50,7 +50,7 @@ const InternalGrid = ({ gridProps: { rows, cols, pagination, filterModel, select
     const mainTable = (_jsxs("table", { className: classNames("table", {
             "table-hover": rowsAreSelectable,
             "d-block": displayMode === "block",
-        }, unwrappedTableModel.table), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames(unwrappedTableModel.caption), children: caption })), _jsx("thead", { className: classNames(unwrappedTableModel.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames(unwrappedTableModel.theadTr), children: [prefixHeader, showSelectCol && (_jsx(SelectAllHeaderCell, { style: getWidthStyle(selectModel === null || selectModel === void 0 ? void 0 : selectModel.selectColWidth), selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh, colIndexOffset: prefixHeader ? 1 : 0 })), colHeaderCells, editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames(unwrappedTableModel.editColTh), style: getWidthStyle(editModel === null || editModel === void 0 ? void 0 : editModel.editColWidth), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(unwrappedTableModel.tbody), children: bodyRows })] }));
+        }, unwrappedTableModel.table), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames(unwrappedTableModel.caption), children: caption })), _jsx("thead", { className: classNames(unwrappedTableModel.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames(unwrappedTableModel.theadTr, (classes === null || classes === void 0 ? void 0 : classes.headerRow) || []), children: [prefixHeader, showSelectCol && (_jsx(SelectAllHeaderCell, { style: getWidthStyle(selectModel === null || selectModel === void 0 ? void 0 : selectModel.selectColWidth), selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh, colIndexOffset: prefixHeader ? 1 : 0 })), colHeaderCells, editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames(unwrappedTableModel.editColTh), style: getWidthStyle(editModel === null || editModel === void 0 ? void 0 : editModel.editColWidth), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(unwrappedTableModel.tbody), children: bodyRows })] }));
     return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [normalizedTableFilterModel && !useToolbar && (_jsxs("div", { "data-testid": "rbdg-filter-inputs-div", className: classNames(unwrappedAdditionalStyleModel.filterInputsDiv), children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: `${filterOptionsVisible ? "Hide" : "Show "} Filter Options`, onClick: handleToggleFilterOptions, classes: (_a = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _a === void 0 ? void 0 : _a.filterUiToggleButton }), filterOptionsVisible && (_jsx(FilterOptionsTable, { caption: filterModel.filterTableCaption, filterState: filterState, setFilterState: normalizedTableFilterModel.setTableFilterState, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel }))] })), useToolbar && (_jsx(ToolbarContainer, { interfaces: toolbarInterfaces, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbarStyleModel })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames(unwrappedAdditionalStyleModel.tableAndPaginationDiv), children: [responsive ? (_jsx("div", { "data-testid": "rbdg-table-div", className: "table-responsive", children: mainTable })) : (_jsx(_Fragment, { children: mainTable })), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: unwrappedAdditionalStyleModel.paginationUiDiv }))] })] }));
 };
 export default InternalGrid;

package/grid/main/BodyRows.d.ts

@@ -1,4 +1,4 @@
-import { AugFormattedRow } from "../types";
+import { AugFormattedRow, RowId } from "../types";
 import { FC, ReactNode } from "react";
 import { UseGridSelectionFnsHook } from "../pipeline/useGridSelectionFns";
 import { UseUnwrappedGridStylesHook } from "../pipeline/useUnwrappedGridStyles";
@@ -16,6 +16,7 @@ interface BodyRowsProps {
     getInputStrSubmitCallback: UseGetInputStrSubmitCallbackHook;
     additionalColIndexOffset?: number;
     renderPrefixCells?: (augFormattedRows: AugFormattedRow) => ReactNode;
+    additionalRowStyles?: (rowId: RowId, displayIndex: number) => string[];
 }
 declare const BodyRows: FC<BodyRowsProps>;
 export default BodyRows;

package/grid/main/BodyRows.js

@@ -3,9 +3,9 @@ import EditableRow from "../editing/EditableRow";
 import classNames from "classnames";
 import getWidthStyle from "../util/getWidthStyle";
 import SelectionInput from "../selection/SelectionInput";
-const BodyRows = ({ augFormattedRows, gridSelectionFns: { selectedSet, getSelectInputModel, getSelectHandler, getRowClickHandler, getAriaSelectedValue, }, unwrappedStyles: { unwrappedTableModel }, combinedPipelineOutput: { showSelectCol, ariaColIndexOffset }, selectModel, editModel, getInputStrSubmitCallback, additionalColIndexOffset, renderPrefixCells, }) => augFormattedRows.map((row, index) => {
+const BodyRows = ({ augFormattedRows, gridSelectionFns: { selectedSet, getSelectInputModel, getSelectHandler, getRowClickHandler, getAriaSelectedValue, }, unwrappedStyles: { unwrappedTableModel }, combinedPipelineOutput: { showSelectCol, ariaColIndexOffset }, selectModel, editModel, getInputStrSubmitCallback, additionalColIndexOffset, renderPrefixCells, additionalRowStyles, }) => augFormattedRows.map((row, index) => {
     return (_jsxs(EditableRow, { onClick: getRowClickHandler(row.id), className: classNames({
             "table-active": selectedSet.has(row.id),
-        }, unwrappedTableModel.tbodyTr(row.id, index)), "aria-rowindex": row.prePaginationIndex + 2, dataRowId: row.id, "aria-selected": getAriaSelectedValue(row.id), ariaColIndexOffset: ariaColIndexOffset + (additionalColIndexOffset || 0), cellData: row.contents, updateCallback: getInputStrSubmitCallback && getInputStrSubmitCallback(row.id), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) && editModel.getDeleteCallback(row.id), dataCellClasses: (colIndex) => unwrappedTableModel.tbodyTd(row.id, index, colIndex), dataCellInputClasses: (colIndex) => unwrappedTableModel.tbodyTdInput(row.id, index, colIndex), editCellClasses: unwrappedTableModel.editColTd(row.id, index), saveButtonClasses: unwrappedTableModel.editSaveButton(row.id, index), deleteButtonClasses: unwrappedTableModel.editDeleteButton(row.id, index), startButtonClasses: unwrappedTableModel.editStartButton(row.id, index), cancelButtonClasses: unwrappedTableModel.editCancelButton(row.id, index), children: [renderPrefixCells && renderPrefixCells(row), showSelectCol && (_jsx("td", { className: classNames(unwrappedTableModel.rowSelectColTd(row.id, index)), "aria-colindex": 1 + (additionalColIndexOffset || 0), style: getWidthStyle(selectModel.selectColWidth), children: _jsx(SelectionInput, { selected: selectedSet.has(row.id), selectionInputModel: getSelectInputModel(row.id, selectModel), selectCallback: getSelectHandler(row.id), additionalClasses: unwrappedTableModel.rowSelectInput(row.id, index) }) }))] }, row.id));
+        }, unwrappedTableModel.tbodyTr(row.id, index), additionalRowStyles ? additionalRowStyles(row.id, index) : []), "aria-rowindex": row.prePaginationIndex + 2, dataRowId: row.id, "aria-selected": getAriaSelectedValue(row.id), ariaColIndexOffset: ariaColIndexOffset + (additionalColIndexOffset || 0), cellData: row.contents, updateCallback: getInputStrSubmitCallback && getInputStrSubmitCallback(row.id), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) && editModel.getDeleteCallback(row.id), dataCellClasses: (colIndex) => unwrappedTableModel.tbodyTd(row.id, index, colIndex), dataCellInputClasses: (colIndex) => unwrappedTableModel.tbodyTdInput(row.id, index, colIndex), editCellClasses: unwrappedTableModel.editColTd(row.id, index), saveButtonClasses: unwrappedTableModel.editSaveButton(row.id, index), deleteButtonClasses: unwrappedTableModel.editDeleteButton(row.id, index), startButtonClasses: unwrappedTableModel.editStartButton(row.id, index), cancelButtonClasses: unwrappedTableModel.editCancelButton(row.id, index), children: [renderPrefixCells && renderPrefixCells(row), showSelectCol && (_jsx("td", { className: classNames(unwrappedTableModel.rowSelectColTd(row.id, index)), "aria-colindex": 1 + (additionalColIndexOffset || 0), style: getWidthStyle(selectModel.selectColWidth), children: _jsx(SelectionInput, { index: index, selected: selectedSet.has(row.id), selectionInputModel: getSelectInputModel(row.id, selectModel), selectCallback: getSelectHandler(row.id), additionalClasses: unwrappedTableModel.rowSelectInput(row.id, index) }) }))] }, row.id));
 });
 export default BodyRows;

package/grid/selection/SelectAllHeaderCell.js

@@ -49,6 +49,6 @@ const SelectAllHeaderCell = ({ onClick, selectionInfo, totalRows, additionalClas
     }, [indeterminate]);
     return (_jsx("th", { style: style, "aria-colindex": 1 + (colIndexOffset || 0), title: description, "aria-description": description, className: classNames({
             "btn-primary": !additionalClasses || additionalClasses.length === 0,
-        }, additionalClasses || []), children: _jsx("input", { type: "checkbox", checked: checked, ref: ref, disabled: disabled, "aria-label": description, onChange: onClick }) }));
+        }, additionalClasses || []), children: _jsx("input", { tabIndex: 0, type: "checkbox", checked: checked, ref: ref, disabled: disabled, "aria-label": description, onChange: onClick }) }));
 };
 export default SelectAllHeaderCell;

package/grid/selection/SelectionInput.d.ts

@@ -14,6 +14,7 @@ export interface SelectionInputProps {
     selectionInputModel: SelectionInputModel;
     selectCallback: () => void;
     additionalClasses?: string[];
+    index: number;
 }
 declare const SelectionInput: FC<SelectionInputProps>;
 export default SelectionInput;

package/grid/selection/SelectionInput.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
-const SelectionInput = ({ selectionInputModel, selected, selectCallback, additionalClasses, }) => {
+const SelectionInput = ({ selectionInputModel, selected, selectCallback, additionalClasses, index, }) => {
     const type = selectionInputModel.type;
     const onChange = ({ target: { checked }, }) => {
         // theoretically, a radio button shouldn't become unchecked so the below
@@ -14,7 +14,7 @@ const SelectionInput = ({ selectionInputModel, selected, selectCallback, additio
             selectCallback();
         }
     };
-    return (_jsx("input", { className: classNames(additionalClasses || []), "aria-label": "Input to select the current row", onClick: (event) => {
+    return (_jsx("input", { tabIndex: 0, className: classNames(additionalClasses || []), "aria-label": `Select row with index ${index}`, onClick: (event) => {
             event.stopPropagation();
         }, type: type, checked: selected, onChange: onChange, name: selectionInputModel.name }));
 };

package/grid/util/trueModulo.d.ts

@@ -0,0 +1,2 @@
+declare const trueModulo: (num: number, divisor: number) => number;
+export default trueModulo;

package/grid/util/trueModulo.js

@@ -0,0 +1,2 @@
+const trueModulo = (num, divisor) => ((num % divisor) + divisor) % divisor;
+export default trueModulo;

package/grid-pro/GridPro.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import useCombinedPipeline from "../grid/pipeline/useCombinedPipeline";
 import InternalGrid from "../grid/InternalGrid";
 import ColHeaderCellPro from "./ColHeaderCellPro";
@@ -12,6 +12,9 @@ import useResizeModel from "./resize/useResizeModel";
 import BodyRows from "../grid/main/BodyRows";
 import ReorderHeaderCell from "./reorder/ReorderHeaderCell";
 import ReorderHandleCell from "./reorder/ReorderHandleCell";
+import useKeyboardReorder from "./reorder/useKeyboardReorder";
+import useReorderStyles from "./reorder/useReorderStyles";
+import useKeyboardReorderListener from "./reorder/useKeyboardReorderListener";
 const GridPro = (props) => {
     const { rows, cols, editModel, filterModel, sortModel, pagination, selectModel, styleModel, displayMode, reorder, } = props;
     const combinedPipelineOutput = useCombinedPipeline({
@@ -32,6 +35,57 @@ const GridPro = (props) => {
         return prev;
     }, {}), [resizeModel]);
     const augFormattedRows = useAugFormattedRows(colNameToWidth, displayRows);
+    const displayRowIds = useMemo(() => displayRows.map(({ id }) => id), [displayRows]);
+    const { drageeState, setDragee } = useKeyboardReorder(displayRowIds);
+    const reorderStyles = useReorderStyles(styleModel === null || styleModel === void 0 ? void 0 : styleModel.reorderModel);
+    const additionalBodyRowStyles = useCallback((id, displayIndex) => {
+        if (!drageeState) {
+            return [];
+        }
+        const { rowId, drageeIndex, destIndex } = drageeState;
+        if (id === rowId) {
+            return reorderStyles.draggedRowClasses;
+        }
+        const isDraggedRowPred = drageeIndex > 0 && displayIndex === drageeIndex - 1;
+        const isTargetUpperNeighbor = destIndex > 0 && displayIndex === destIndex - 1;
+        const isTargetLowerNeighbor = destIndex === displayIndex;
+        if (isDraggedRowPred && isTargetLowerNeighbor) {
+            return reorderStyles.draggedRowPredecessorClasses.concat(reorderStyles.bottomBorderRowClasses);
+        }
+        if (isDraggedRowPred && !isTargetLowerNeighbor) {
+            return reorderStyles.draggedRowPredecessorClasses;
+        }
+        if (!isDraggedRowPred && isTargetLowerNeighbor) {
+            return reorderStyles.bottomBorderRowClasses;
+        }
+        if (isTargetUpperNeighbor) {
+            return reorderStyles.topBorderRowClasses;
+        }
+        return [];
+    }, [reorderStyles, drageeState]);
+    const additionalHeaderRowStyles = useMemo(() => {
+        if (!drageeState) {
+            return [];
+        }
+        if (drageeState.drageeIndex === 0) {
+            return reorderStyles.draggedRowPredecessorClasses;
+        }
+        if (drageeState.destIndex === 0) {
+            return reorderStyles.topBorderRowClasses;
+        }
+        return [];
+    }, [
+        drageeState,
+        reorderStyles.draggedRowPredecessorClasses,
+        reorderStyles.topBorderRowClasses,
+    ]);
+    const tableOnKeydown = useKeyboardReorderListener(drageeState, reorder === null || reorder === void 0 ? void 0 : reorder.callback);
+    useEffect(() => {
+        document.addEventListener("keydown", tableOnKeydown);
+        return () => {
+            document.removeEventListener("keydown", tableOnKeydown);
+        };
+    }, [tableOnKeydown]);
     const colHeaderCells = cols.map(({ name, label, sortable, minResizeWidth, maxResizeWidth, keyboardResizeStep, }, index) => {
         var _a;
         const colSortModel = sortingEnabled && sortable
@@ -53,14 +107,24 @@ const GridPro = (props) => {
             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 }));
+        return (_jsx(ReorderHandleCell, { rowId: augRow.id, ariaRowIndex: augRow.prePaginationIndex + 2, disabled: filteringOccurring || sortingOccurring || displayRows.length <= 1, reorderCallback: reorderCallback, styles: reorderStyles, keyboardStartCallback: () => setDragee(augRow.id), suppressKeyboardClick: drageeState !== null }));
+    }, [
+        displayRows.length,
+        drageeState,
+        filteringOccurring,
+        reorder,
+        reorderStyles,
+        setDragee,
+        sortingOccurring,
+    ]);
+    const bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, unwrappedStyles: unwrappedStyles, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback, renderPrefixCells: renderPrefixCells, additionalColIndexOffset: reorder ? 1 : 0, additionalRowStyles: additionalBodyRowStyles }));
     const prefixHeader = reorder ? _jsx(ReorderHeaderCell, {}) : null;
     return (_jsx(InternalGrid, { gridProps: props, hooks: {
             pipelineOutput: combinedPipelineOutput,
             selectFns: gridSelectionFns,
             unwrappedStyles,
-        }, slots: { colHeaderCells, bodyRows, prefixHeader } }));
+        }, slots: { colHeaderCells, bodyRows, prefixHeader }, classes: {
+            headerRow: additionalHeaderRowStyles,
+        } }));
 };
 export default GridPro;

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

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

package/grid-pro/reorder/ReorderHandleCell.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from "react";
+import { useCallback, } from "react";
 import HorizontalGrip from "../assets/HorizontalGrip";
 import regDragCleanup from "../util/regDragCleanup";
 import classNames from "classnames";
@@ -12,16 +12,7 @@ function dropTargetRefValuesEqual(first, second) {
     }
     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 ReorderHandleCell = ({ rowId, ariaRowIndex, disabled, reorderCallback, styles: { draggedRowClasses, draggedRowPredecessorClasses, topBorderRowClasses, bottomBorderRowClasses, ghostDivClasses, }, keyboardStartCallback, suppressKeyboardClick, }) => {
     const onPointerDown = useCallback((event) => {
         const target = event.target;
         const { pointerId, clientX, clientY, button } = event;
@@ -30,7 +21,7 @@ const ReorderHandleCell = ({ rowId, ariaRowIndex, disabled, reorderCallback, sty
         }
         function createDragGhost() {
             const ghostDiv = document.createElement("div");
-            ghostDiv.className = intGhostTableClasses.join(" ");
+            ghostDiv.className = ghostDivClasses.join(" ");
             ghostDiv.style.left = `${clientX}px`;
             ghostDiv.style.top = `${clientY}px`;
             ghostDiv.textContent = `ID: ${rowId}`;
@@ -56,17 +47,17 @@ const ReorderHandleCell = ({ rowId, ariaRowIndex, disabled, reorderCallback, sty
                 .trim();
         }
         function applyDrageeStyles() {
-            applyRowClassesFromOrig(drageeTrIndex, intDraggedRowClasses);
+            applyRowClassesFromOrig(drageeTrIndex, draggedRowClasses);
             if (drageeTrIndex - 1 === -1) {
                 headTr.className = [
                     origHeadTrClasses,
-                    intDraggedRowPredecessorClasses.join(" "),
+                    draggedRowPredecessorClasses.join(" "),
                 ]
                     .join(" ")
                     .trim();
                 return;
             }
-            applyRowClassesFromOrig(drageeTrIndex - 1, intDraggedRowPredecessorClasses);
+            applyRowClassesFromOrig(drageeTrIndex - 1, draggedRowPredecessorClasses);
         }
         applyDrageeStyles();
         const baseClassesByIndex = trs.map((tr) => tr.className);
@@ -129,24 +120,21 @@ const ReorderHandleCell = ({ rowId, ariaRowIndex, disabled, reorderCallback, sty
         }
         function applyDragStyles(trIndex, upper) {
             if (upper) {
-                applyRowClassesFromBase(trIndex, intBottomBorderRowClasses);
+                applyRowClassesFromBase(trIndex, bottomBorderRowClasses);
             }
             if (upper && trIndex - 1 >= 0) {
-                applyRowClassesFromBase(trIndex - 1, intTopBorderRowClasses);
+                applyRowClassesFromBase(trIndex - 1, topBorderRowClasses);
             }
             if (upper && trIndex - 1 === -1) {
-                headTr.className = [
-                    baseHeadTrClasses,
-                    intTopBorderRowClasses.join(" "),
-                ]
+                headTr.className = [baseHeadTrClasses, topBorderRowClasses.join(" ")]
                     .join(" ")
                     .trim();
             }
             if (!upper) {
-                applyRowClassesFromBase(trIndex, intTopBorderRowClasses);
+                applyRowClassesFromBase(trIndex, topBorderRowClasses);
             }
             if (!upper && trIndex + 1 < trs.length) {
-                applyRowClassesFromBase(trIndex + 1, intBottomBorderRowClasses);
+                applyRowClassesFromBase(trIndex + 1, bottomBorderRowClasses);
             }
         }
         function updateRowStyles(currentDropTargetVal) {
@@ -204,16 +192,27 @@ const ReorderHandleCell = ({ rowId, ariaRowIndex, disabled, reorderCallback, sty
             onContextMenu,
         });
     }, [
-        intBottomBorderRowClasses,
-        intDraggedRowClasses,
-        intDraggedRowPredecessorClasses,
-        intGhostTableClasses,
-        intTopBorderRowClasses,
+        bottomBorderRowClasses,
+        draggedRowClasses,
+        draggedRowPredecessorClasses,
+        ghostDivClasses,
+        topBorderRowClasses,
         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", {
+    const onClick = (event) => {
+        event.stopPropagation();
+        if (event.detail === 0) {
+            keyboardStartCallback();
+        }
+    };
+    const onKeydown = (event) => {
+        if (suppressKeyboardClick) {
+            event.preventDefault();
+        }
+    };
+    return (_jsx("th", { "aria-colindex": 1, children: _jsx("button", { tabIndex: 0, onClick: onClick, "aria-label": label, title: label, onPointerDown: onPointerDown, onKeyDown: onKeydown, 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" }) }) }));
 };

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

@@ -10,3 +10,18 @@ export interface ReorderStyleModel {
     bottomBorderRowClasses?: string[];
     ghostDivClasses?: string[];
 }
+export type ReorderStyles = Required<ReorderStyleModel>;
+export interface KeyboardReorderState {
+    rowId: RowId;
+    destIndex: number;
+}
+export type ActiveKeyboardReorderState = KeyboardReorderState & {
+    moveToPrevTarget: () => void;
+    moveToNextTarget: () => void;
+    clearState: () => void;
+    drageeIndex: number;
+};
+export interface UseKeyboardReorderOutput {
+    drageeState: ActiveKeyboardReorderState | null;
+    setDragee: (rowId: RowId) => void;
+}

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

@@ -0,0 +1,4 @@
+import { RowId } from "../";
+import { UseKeyboardReorderOutput } from "./types";
+declare const useKeyboardReorder: (displayRowIds: RowId[]) => UseKeyboardReorderOutput;
+export default useKeyboardReorder;

package/grid-pro/reorder/useKeyboardReorder.js

@@ -0,0 +1,84 @@
+import { useCallback, useMemo, useState } from "react";
+import trueModulo from "../../grid/util/trueModulo";
+const useKeyboardReorder = (displayRowIds) => {
+    const [state, setState] = useState(null);
+    // A change the displayed rows can suddenly make the existing state invalid.
+    // To cope with this possibility, the hook checks the validity of the state on
+    // each render and defaults to null when the state is invalid.
+    // Consumers of the hook can then call setState (generally via user
+    // interaction) to set the state back to a valid value.
+    const effectiveState = useMemo(() => {
+        if (displayRowIds.length <= 1 || state === null) {
+            return null;
+        }
+        const drageeIndex = displayRowIds.findIndex((id) => state.rowId === id);
+        if (drageeIndex < 0) {
+            return null;
+        }
+        if (drageeIndex === state.destIndex ||
+            drageeIndex + 1 === state.destIndex) {
+            return null;
+        }
+        return state;
+    }, [displayRowIds, state]);
+    const setDragee = useCallback((rowId) => {
+        const foundIndex = displayRowIds.findIndex((id) => rowId === id);
+        if (foundIndex < 0) {
+            return;
+        }
+        // Shouldn't happen under normal circumstances dye to the button being
+        // disabled in the UI. Not sure if some sort of
+        // race condition is possible with React to get this situation to occur.
+        if (displayRowIds.length < 2) {
+            return;
+        }
+        if (foundIndex + 2 > displayRowIds.length) {
+            setState({
+                rowId,
+                destIndex: foundIndex - 1,
+            });
+            return;
+        }
+        setState({
+            rowId,
+            destIndex: foundIndex + 2,
+        });
+    }, [displayRowIds]);
+    const output = useMemo(() => {
+        if (effectiveState === null) {
+            return {
+                drageeState: null,
+                setDragee,
+            };
+        }
+        const moveToPrevTarget = () => {
+            let newIndex = trueModulo(effectiveState.destIndex - 1, displayRowIds.length + 1);
+            const foundIndex = displayRowIds.findIndex((id) => effectiveState.rowId === id);
+            if (newIndex === foundIndex + 1) {
+                newIndex = trueModulo(newIndex - 2, displayRowIds.length + 1);
+            }
+            setState({
+                rowId: effectiveState.rowId,
+                destIndex: newIndex,
+            });
+        };
+        const moveToNextTarget = () => {
+            let newIndex = trueModulo(effectiveState.destIndex + 1, displayRowIds.length + 1);
+            const foundIndex = displayRowIds.findIndex((id) => effectiveState.rowId === id);
+            if (newIndex === foundIndex) {
+                newIndex = trueModulo(newIndex + 2, displayRowIds.length + 1);
+            }
+            setState({
+                rowId: effectiveState.rowId,
+                destIndex: newIndex,
+            });
+        };
+        return {
+            drageeState: Object.assign(Object.assign({}, effectiveState), { moveToPrevTarget,
+                moveToNextTarget, clearState: () => setState(null), drageeIndex: displayRowIds.findIndex((id) => effectiveState.rowId === id) }),
+            setDragee,
+        };
+    }, [displayRowIds, effectiveState, setDragee]);
+    return output;
+};
+export default useKeyboardReorder;

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

@@ -0,0 +1,3 @@
+import { ActiveKeyboardReorderState, ReorderCallback } from "./types";
+declare const useKeyboardReorderListener: (state: ActiveKeyboardReorderState | null, reorderCallback: ReorderCallback | undefined) => (event: KeyboardEvent) => void;
+export default useKeyboardReorderListener;

package/grid-pro/reorder/useKeyboardReorderListener.js

@@ -0,0 +1,26 @@
+import { useCallback } from "react";
+const useKeyboardReorderListener = (state, reorderCallback) => {
+    return useCallback((event) => {
+        if (state === null || reorderCallback === undefined) {
+            return;
+        }
+        const { moveToPrevTarget, moveToNextTarget, clearState, rowId, destIndex, } = state;
+        if (event.key === "ArrowUp") {
+            moveToPrevTarget();
+            return;
+        }
+        if (event.key === "ArrowDown") {
+            moveToNextTarget();
+            return;
+        }
+        if (event.key === " " || event.key === "Enter") {
+            reorderCallback(rowId, destIndex);
+            clearState();
+            return;
+        }
+        if (event.key === "Escape") {
+            clearState();
+        }
+    }, [reorderCallback, state]);
+};
+export default useKeyboardReorderListener;

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

@@ -0,0 +1,3 @@
+import { ReorderStyleModel, ReorderStyles } from "./types";
+declare const useReorderStyles: (styleModel: ReorderStyleModel | undefined) => ReorderStyles;
+export default useReorderStyles;

package/grid-pro/reorder/useReorderStyles.js

@@ -0,0 +1,20 @@
+import { useMemo } from "react";
+const useReorderStyles = (styleModel) => {
+    const draggedRowClasses = useMemo(() => (styleModel === null || styleModel === void 0 ? void 0 : styleModel.draggedRowClasses) || ["rbdg-reorder-dragged-row"], [styleModel === null || styleModel === void 0 ? void 0 : styleModel.draggedRowClasses]);
+    const draggedRowPredecessorClasses = 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 topBorderRowClasses = 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 bottomBorderRowClasses = 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 ghostDivClasses = useMemo(() => (styleModel === null || styleModel === void 0 ? void 0 : styleModel.ghostDivClasses) || ["border", "rbdg-drag-ghost"], [styleModel === null || styleModel === void 0 ? void 0 : styleModel.ghostDivClasses]);
+    return {
+        draggedRowClasses,
+        draggedRowPredecessorClasses,
+        topBorderRowClasses,
+        bottomBorderRowClasses,
+        ghostDivClasses,
+    };
+};
+export default useReorderStyles;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@absreim/react-bootstrap-data-grid-pro",
   "description": "Pro Version of data grid UI component for use with web apps using React and Bootstrap",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "license": "Commercial. See LICENSE file.",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",