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

package/grid/selection/SelectAllHeaderCell.js

@@ -40,15 +40,13 @@ const getCheckboxState = (selectionInfo, noRows) => {
     // single select mode and none selected
     return disabledState;
 };
-const SelectAllHeaderCell = ({ onClick, selectionInfo, totalRows, additionalClasses, style, colIndexOffset, }) => {
+const SelectAllHeaderCell = ({ onClick, selectionInfo, totalRows, customClasses, style, colIndexOffset, }) => {
     const noRows = totalRows === 0;
     const { indeterminate, checked, disabled, description } = getCheckboxState(selectionInfo, noRows);
     const ref = useRef(null);
     useEffect(() => {
         ref.current.indeterminate = indeterminate;
     }, [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 }) }));
+    return (_jsx("th", { style: style, "aria-colindex": 1 + (colIndexOffset || 0), title: description, "aria-description": description, className: classNames(customClasses || "btn-primary"), 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

@@ -13,7 +13,8 @@ export interface SelectionInputProps {
     selected: boolean;
     selectionInputModel: SelectionInputModel;
     selectCallback: () => void;
-    additionalClasses?: string[];
+    additionalClasses?: string[] | null;
+    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/styling/types.d.ts

@@ -4,40 +4,39 @@ export interface SharedTableStyleModel {
     tbody?: string[];
     thead?: string[];
     theadTr?: string[];
-    theadTh?: (colIndex: number) => string[];
+    theadTh?: (colIndex: number) => string[] | null;
     caption?: string[];
 }
 export type TableStyleModel = SharedTableStyleModel & {
-    tbodyTr?: (rowId: RowId, displayIndex: number) => string[];
-    tbodyTd?: (rowId: RowId, displayRowIndex: number, colIndex: number) => string[];
-    tbodyTdInput?: (rowId: RowId, displayRowIndex: number, colIndex: number) => string[];
+    tbodyTr?: (rowId: RowId, displayIndex: number) => string[] | null;
+    tbodyTd?: (rowId: RowId, displayRowIndex: number, colIndex: number) => string[] | null;
+    tbodyTdInput?: (rowId: RowId, displayRowIndex: number, colIndex: number) => string[] | null;
     editColTh?: string[];
-    editColTd?: (rowId: RowId, displayIndex: number) => string[];
-    editStartButton?: (rowId: RowId, displayIndex: number) => string[];
-    editDeleteButton?: (rowId: RowId, displayIndex: number) => string[];
-    editSaveButton?: (rowId: RowId, displayIndex: number) => string[];
-    editCancelButton?: (rowId: RowId, displayIndex: number) => string[];
+    editColTd?: (rowId: RowId, displayIndex: number) => string[] | null;
+    editStartButton?: (rowId: RowId, displayIndex: number) => string[] | null;
+    editDeleteButton?: (rowId: RowId, displayIndex: number) => string[] | null;
+    editSaveButton?: (rowId: RowId, displayIndex: number) => string[] | null;
+    editCancelButton?: (rowId: RowId, displayIndex: number) => string[] | null;
     rowSelectColTh?: string[];
-    rowSelectColTd?: (rowId: RowId, displayIndex: number) => string[];
-    rowSelectInput?: (rowId: RowId, displayIndex: number) => string[];
+    rowSelectColTd?: (rowId: RowId, displayIndex: number) => string[] | null;
+    rowSelectInput?: (rowId: RowId, displayIndex: number) => string[] | null;
 };
 export type FilterInputTableStyleModel = SharedTableStyleModel & {
-    tbodyTr?: (rowIndex: number) => string[];
-    tbodyTd?: (rowIndex: number, colIndex: number) => string[];
-    enablementInput?: (rowIndex: number) => string[];
-    schemeSelectionInput?: (rowIndex: number) => string[];
-    searchStringInput?: (rowIndex: number) => string[];
-    numberInput?: (rowIndex: number) => string[];
-    startDateInput?: (rowIndex: number) => string[];
-    endDateInput?: (rowIndex: number) => string[];
+    tbodyTr?: (rowIndex: number) => string[] | null;
+    tbodyTd?: (rowIndex: number, colIndex: number) => string[] | null;
+    enablementInput?: (rowIndex: number) => string[] | null;
+    schemeSelectionInput?: (rowIndex: number) => string[] | null;
+    searchStringInput?: (rowIndex: number) => string[] | null;
+    numberInput?: (rowIndex: number) => string[] | null;
+    startDateInput?: (rowIndex: number) => string[] | null;
+    endDateInput?: (rowIndex: number) => string[] | null;
     submitButton?: string[];
     form?: string[];
 };
 export interface AdditionalComponentsStyleModel {
     topLevelDiv?: string[];
-    filterInputsDiv?: string[];
     tableAndPaginationDiv?: string[];
-    filterUiToggleButton?: string[];
+    tableDiv?: string[];
     paginationUiDiv?: string[];
 }
 export interface ToolbarStyleModel {

package/grid/toolbar/ToolbarContainer.d.ts

@@ -1,8 +1,8 @@
-import { ToolbarInterfaces } from "./types";
+import { InterfaceNodeGenerator } from "./types";
 import { FC } from "react";
 import { ToolbarStyleModel } from "../styling/types";
 interface ToolbarContainerProps {
-    interfaces: ToolbarInterfaces;
+    interfaceGen: InterfaceNodeGenerator;
     styleModel?: ToolbarStyleModel;
 }
 declare const ToolbarContainer: FC<ToolbarContainerProps>;

package/grid/toolbar/ToolbarContainer.js

@@ -1,14 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import Toolbar from "./Toolbar";
 import classNames from "classnames";
-const ToolbarContainer = ({ interfaces, styleModel, }) => {
+const ToolbarContainer = ({ interfaceGen, styleModel, }) => {
     const [option, setOption] = useState(null);
-    const enabledFeatures = Object.keys(interfaces).reduce((prev, toolbarOption) => {
-        prev[toolbarOption] =
-            !!interfaces[toolbarOption];
-        return prev;
-    }, {});
+    const closeUiCallback = useCallback(() => setOption(null), []);
+    const interfaces = useMemo(() => interfaceGen(closeUiCallback), [closeUiCallback, interfaceGen]);
+    const enabledFeatures = useMemo(() => {
+        return Object.keys(interfaces).reduce((prev, toolbarOption) => {
+            prev[toolbarOption] =
+                !!interfaces[toolbarOption];
+            return prev;
+        }, {});
+    }, [interfaces]);
     return (_jsxs("div", { className: "vstack", "data-testid": "toolbar container", children: [_jsx(Toolbar, { enabledFeatures: enabledFeatures, option: option, setOption: setOption, toolbarClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbar, activeClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.activeButton, inactiveClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.inactiveButton }), _jsx("div", { className: "position-relative", children: option !== null && (_jsx("div", { "data-testid": "toolbar feature interface content container", className: classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.interfaceContainer) || [
                         "position-absolute",
                         "z-1",

package/grid/toolbar/types.d.ts

@@ -1,3 +1,11 @@
 import { ReactNode } from "react";
+import { FilterOptionsTableProps } from "../filtering/FilterOptionsTable";
+import { ExportFormProps } from "../export/ExportForm";
 export type ToolbarOption = "filtering" | "exporting";
 export type ToolbarInterfaces = Partial<Record<ToolbarOption, ReactNode>>;
+export interface InterfaceParams {
+    filtering?: FilterOptionsTableProps;
+    exporting?: ExportFormProps;
+}
+export type InterfacePropGenerator = (closeUiCallback: () => void) => InterfaceParams;
+export type InterfaceNodeGenerator = (closeUiCallback: () => void) => ToolbarInterfaces;

package/grid/toolbar/useInterfaces.d.ts

@@ -1,9 +1,3 @@
-import { FilterOptionsTableProps } from "../filtering/FilterOptionsTable";
-import { ToolbarInterfaces } from "./types";
-import { ExportFormProps } from "../export/ExportForm";
-export interface InterfaceParams {
-    filtering?: FilterOptionsTableProps;
-    exporting?: ExportFormProps;
-}
-declare const useInterfaces: (params: InterfaceParams) => ToolbarInterfaces;
+import { InterfacePropGenerator, ToolbarInterfaces } from "./types";
+declare const useInterfaces: (gen: InterfacePropGenerator) => (closeCallback: () => void) => ToolbarInterfaces;
 export default useInterfaces;

package/grid/toolbar/useInterfaces.js

@@ -2,10 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import FilterOptionsTable from "../filtering/FilterOptionsTable";
 import { useMemo } from "react";
 import ExportForm from "../export/ExportForm";
-const useInterfaces = ({ filtering, exporting, }) => {
-    return useMemo(() => ({
-        filtering: filtering ? _jsx(FilterOptionsTable, Object.assign({}, filtering)) : undefined,
-        exporting: exporting ? _jsx(ExportForm, Object.assign({}, exporting)) : undefined,
-    }), [exporting, filtering]);
+const useInterfaces = (gen) => {
+    return useMemo(() => (closeCallback) => {
+        const props = gen(closeCallback);
+        const { exporting, filtering } = props;
+        return {
+            filtering: filtering ? (_jsx(FilterOptionsTable, Object.assign({}, filtering))) : undefined,
+            exporting: exporting ? _jsx(ExportForm, Object.assign({}, exporting)) : undefined,
+        };
+    }, [gen]);
 };
 export default useInterfaces;

package/grid/types.d.ts

@@ -1,5 +1,5 @@
 import { CellData, EditModel } from "./editing/types";
-import { GridPaginationState } from "./pagination/types";
+import { PaginationModel } from "./pagination/types";
 import { ColSortModel, TableSortModel } from "./sorting/types";
 import { FilterModel } from "./filtering/types";
 import { SelectModel } from "./selection/types";
@@ -26,7 +26,7 @@ export interface RowDef<Data extends ValidRowData = ValidRowData> {
 export type AugRowDef<Data extends ValidRowData = ValidRowData> = RowDef<Data> & {
     origIndex: number;
 };
-export type PostPaginationRowDef<Data extends ValidRowData = ValidRowData> = AugRowDef & {
+export type PostPaginationRowDef<Data extends ValidRowData = ValidRowData> = AugRowDef<Data> & {
     prePaginationIndex: number;
 };
 export type FormattedRow = {
@@ -44,16 +44,15 @@ export type DisplayMode = "table" | "block";
 export interface GridProps {
     rows: RowDef[];
     cols: ColDef[];
-    pagination?: GridPaginationState;
+    pagination?: PaginationModel;
     sortModel?: TableSortModel;
     filterModel?: FilterModel;
     selectModel?: SelectModel;
     editModel?: EditModel;
     caption?: string;
     styleModel?: StyleModel;
-    useToolbar?: boolean;
-    responsive?: boolean;
     displayMode?: DisplayMode;
+    allowExport?: boolean;
 }
 export type BaseGridProps = Omit<GridProps, "cols"> & {
     cols: ColDefBase[];
@@ -62,6 +61,6 @@ export interface ColHeaderCellProps {
     label: string;
     sortModel?: ColSortModel;
     ariaColIndex: number;
-    additionalClasses?: string[];
+    additionalClasses?: string[] | null;
     width?: number;
 }

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,17 +1,19 @@
 "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";
 import useGridSelectionFns from "../grid/pipeline/useGridSelectionFns";
-import useUnwrappedGridStyles from "../grid/pipeline/useUnwrappedGridStyles";
 import useGetInputStrSubmitCallback from "../grid/pipeline/useGetInputStrSubmitCallback";
 import useAugFormattedRows from "../grid/pipeline/useAugFormattedRows";
 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({
@@ -24,7 +26,6 @@ const GridPro = (props) => {
     });
     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) => {
@@ -32,6 +33,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 +105,23 @@ 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, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback, renderPrefixCells: renderPrefixCells, additionalColIndexOffset: reorder ? 1 : 0, additionalRowStyles: additionalBodyRowStyles, tableStyleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel }));
     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;