@absreim/react-bootstrap-data-grid 2.4.1 → 2.6.0

package/InternalGrid.d.ts

@@ -13,6 +13,7 @@ export interface InternalGridProps {
     slots: {
         colHeaderCells: ReactNode;
         bodyRows: ReactNode;
+        prefixHeader?: ReactNode;
     };
 }
 declare const InternalGrid: FC<InternalGridProps>;

package/InternalGrid.js

@@ -12,7 +12,7 @@ import useExportFn from "./export/useExportFn";
 import getWidthStyle from "./util/getWidthStyle";
 var InternalGrid = function (_a) {
     var _b;
-    var _c = _a.gridProps, rows = _c.rows, cols = _c.cols, pagination = _c.pagination, filterModel = _c.filterModel, selectModel = _c.selectModel, editModel = _c.editModel, caption = _c.caption, styleModel = _c.styleModel, useToolbar = _c.useToolbar, responsive = _c.responsive, displayMode = _c.displayMode, _d = _a.hooks, pipelineOutput = _d.pipelineOutput, selectFns = _d.selectFns, unwrappedStyles = _d.unwrappedStyles, _e = _a.slots, colHeaderCells = _e.colHeaderCells, bodyRows = _e.bodyRows;
+    var _c = _a.gridProps, rows = _c.rows, cols = _c.cols, pagination = _c.pagination, filterModel = _c.filterModel, selectModel = _c.selectModel, editModel = _c.editModel, caption = _c.caption, styleModel = _c.styleModel, useToolbar = _c.useToolbar, responsive = _c.responsive, displayMode = _c.displayMode, _d = _a.hooks, pipelineOutput = _d.pipelineOutput, selectFns = _d.selectFns, unwrappedStyles = _d.unwrappedStyles, _e = _a.slots, colHeaderCells = _e.colHeaderCells, bodyRows = _e.bodyRows, prefixHeader = _e.prefixHeader;
     var normalizedTableFilterModel = pipelineOutput.normalizedTableFilterModel, filteredRows = pipelineOutput.filteredRows, filterState = pipelineOutput.filterState, sortedRows = pipelineOutput.sortedRowsOutput.sortedRows, _f = pipelineOutput.currentPageRowsOutput, paginatedRows = _f.paginatedRows, normalizedModel = _f.normalizedModel, showSelectCol = pipelineOutput.showSelectCol;
     var _g = useState(false), filterOptionsVisible = _g[0], setFilterOptionsVisible = _g[1];
     var exportFnInfo = useExportFn({
@@ -51,7 +51,7 @@ var InternalGrid = function (_a) {
     var 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: [showSelectCol && (_jsx(SelectAllHeaderCell, { style: getWidthStyle(selectModel === null || selectModel === void 0 ? void 0 : selectModel.selectColWidth), selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh })), 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), 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: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions, classes: (_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _b === void 0 ? void 0 : _b.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/main/BodyRows.d.ts

@@ -1,5 +1,5 @@
 import { AugFormattedRow } from "../types";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import { UseGridSelectionFnsHook } from "../pipeline/useGridSelectionFns";
 import { UseUnwrappedGridStylesHook } from "../pipeline/useUnwrappedGridStyles";
 import { UseCombinedPipelineHook } from "../pipeline/useCombinedPipeline";
@@ -14,6 +14,8 @@ interface BodyRowsProps {
     selectModel: SelectModel | undefined;
     editModel: EditModel | undefined;
     getInputStrSubmitCallback: UseGetInputStrSubmitCallbackHook;
+    additionalColIndexOffset?: number;
+    renderPrefixCells?: (augFormattedRows: AugFormattedRow) => ReactNode;
 }
 declare const BodyRows: FC<BodyRowsProps>;
 export default BodyRows;

package/main/BodyRows.js

@@ -1,18 +1,18 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import EditableRow from "../editing/EditableRow";
 import classNames from "classnames";
 import getWidthStyle from "../util/getWidthStyle";
 import SelectionInput from "../selection/SelectionInput";
 var BodyRows = function (_a) {
-    var augFormattedRows = _a.augFormattedRows, _b = _a.gridSelectionFns, selectedSet = _b.selectedSet, getSelectInputModel = _b.getSelectInputModel, getSelectHandler = _b.getSelectHandler, getRowClickHandler = _b.getRowClickHandler, getAriaSelectedValue = _b.getAriaSelectedValue, unwrappedTableModel = _a.unwrappedStyles.unwrappedTableModel, _c = _a.combinedPipelineOutput, showSelectCol = _c.showSelectCol, ariaColIndexOffset = _c.ariaColIndexOffset, selectModel = _a.selectModel, editModel = _a.editModel, getInputStrSubmitCallback = _a.getInputStrSubmitCallback;
+    var augFormattedRows = _a.augFormattedRows, _b = _a.gridSelectionFns, selectedSet = _b.selectedSet, getSelectInputModel = _b.getSelectInputModel, getSelectHandler = _b.getSelectHandler, getRowClickHandler = _b.getRowClickHandler, getAriaSelectedValue = _b.getAriaSelectedValue, unwrappedTableModel = _a.unwrappedStyles.unwrappedTableModel, _c = _a.combinedPipelineOutput, showSelectCol = _c.showSelectCol, ariaColIndexOffset = _c.ariaColIndexOffset, selectModel = _a.selectModel, editModel = _a.editModel, getInputStrSubmitCallback = _a.getInputStrSubmitCallback, additionalColIndexOffset = _a.additionalColIndexOffset, renderPrefixCells = _a.renderPrefixCells;
     return augFormattedRows.map(function (row, index) {
-        return (_jsx(EditableRow, { onClick: getRowClickHandler(row.id), className: classNames({
+        return (_jsxs(EditableRow, { onClick: getRowClickHandler(row.id), className: classNames({
                 "table-active": selectedSet.has(row.id),
-            }, unwrappedTableModel.tbodyTr(row.id, index)), "aria-rowindex": index + 2, dataRowId: row.id, "aria-selected": getAriaSelectedValue(row.id), ariaColIndexOffset: ariaColIndexOffset, cellData: row.contents, updateCallback: getInputStrSubmitCallback && getInputStrSubmitCallback(row.id), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) && editModel.getDeleteCallback(row.id), dataCellClasses: function (colIndex) {
+            }, 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: function (colIndex) {
                 return unwrappedTableModel.tbodyTd(row.id, index, colIndex);
             }, dataCellInputClasses: function (colIndex) {
                 return 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: showSelectCol && (_jsx("td", { className: classNames(unwrappedTableModel.rowSelectColTd(row.id, index)), "aria-colindex": 1, 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));
+            }, 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));
     });
 };
 export default BodyRows;

package/main/ColHeaderCell/index.js

@@ -3,6 +3,7 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import getWidthStyle from "../../util/getWidthStyle";
 import useSortHeaderStates from "./useSortHeaderStates";
+import sortOrderToAriaSort from "../../sorting/sortOrderToAriaSort";
 var ColHeaderCell = function (_a) {
     var label = _a.label, sortModel = _a.sortModel, ariaColIndex = _a.ariaColIndex, additionalClasses = _a.additionalClasses, width = _a.width;
     var _b = useSortHeaderStates(sortModel), handleClick = _b.handleClick, handleMouseOver = _b.handleMouseOver, handleMouseOut = _b.handleMouseOut, sortSymbol = _b.sortSymbol;
@@ -11,6 +12,6 @@ var ColHeaderCell = function (_a) {
             "table-active": sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortOrder,
         }, additionalClasses || []), onClick: sortModel && handleClick, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, "aria-description": sortModel
             ? "Column header"
-            : "Column header that can be clicked to change the sorting mode", "aria-colindex": ariaColIndex, style: getWidthStyle(width), children: [label, sortSymbol] }));
+            : "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: [label, sortSymbol] }));
 };
 export default ColHeaderCell;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@absreim/react-bootstrap-data-grid",
   "description": "Data grid UI component for use with web apps using React and Bootstrap",
-  "version": "2.4.1",
+  "version": "2.6.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",

package/pagination/PageSizeSelector.js

@@ -6,7 +6,7 @@ var PageSizeSelector = function (_a) {
         var pageSizeIndex = Number(event.target.value);
         handleSetPageSize(pageSizeIndex);
     };
-    return (_jsx("div", { children: _jsx("select", { className: classNames({
+    return (_jsx("div", { children: _jsx("select", { name: "rowsPerPage", className: classNames({
                 "form-select": true,
                 "form-select-lg": componentSize === "large",
                 "form-select-sm": componentSize === "small",

package/pipeline/useCombinedPipeline/index.d.ts

@@ -15,5 +15,5 @@ export interface UseCombinedPipelineHook {
     ariaColIndexOffset: number;
     displayRows: FormattedRow[];
 }
-declare const UseCombinedPipeline: (params: CombinedPipelineParams) => UseCombinedPipelineHook;
-export default UseCombinedPipeline;
+declare const useCombinedPipeline: (params: CombinedPipelineParams) => UseCombinedPipelineHook;
+export default useCombinedPipeline;

package/pipeline/useCombinedPipeline/index.js

@@ -4,7 +4,7 @@ import useFilterStateFromEditable from "./useFilterStateFromEditable";
 import useSortedRows from "./useSortedRows";
 import useCurrentPageRows from "./useCurrentPageRows";
 import useDisplayRows from "./useDisplayRows";
-var UseCombinedPipeline = function (_a) {
+var useCombinedPipeline = function (_a) {
     var filterModel = _a.filterModel, cols = _a.cols, rows = _a.rows, sortModel = _a.sortModel, pagination = _a.pagination, selectModel = _a.selectModel;
     var normalizedTableFilterModel = useFilterStateStore(filterModel, cols);
     var editableFilterState = (normalizedTableFilterModel === null || normalizedTableFilterModel === void 0 ? void 0 : normalizedTableFilterModel.tableFilterState) || null;
@@ -28,4 +28,4 @@ var UseCombinedPipeline = function (_a) {
         displayRows: displayRows,
     };
 };
-export default UseCombinedPipeline;
+export default useCombinedPipeline;

package/pipeline/useCombinedPipeline/useCurrentPageRows.d.ts

@@ -1,8 +1,8 @@
-import { RowDef } from "../../types";
+import { AugRowDef, PostPaginationRowDef } from "../../types";
 import { NormalizedPaginationModel, GridPaginationState } from "../../pagination/types";
 export interface CurrentPageRowsOutput {
-    paginatedRows: RowDef[];
+    paginatedRows: PostPaginationRowDef[];
     normalizedModel: NormalizedPaginationModel | null;
 }
-declare const useCurrentPageRows: (sortedRows: RowDef[], paginationModel: GridPaginationState | undefined) => CurrentPageRowsOutput;
+declare const useCurrentPageRows: (sortedRows: AugRowDef[], paginationModel: GridPaginationState | undefined) => CurrentPageRowsOutput;
 export default useCurrentPageRows;

package/pipeline/useCombinedPipeline/useCurrentPageRows.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { useMemo, useState } from "react";
 var useCurrentPageRows = function (sortedRows, paginationModel) {
     var componentSize = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.componentSize) || "medium";
@@ -19,7 +30,10 @@ var useCurrentPageRows = function (sortedRows, paginationModel) {
     var maxPageButtons = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.maxPageButtons) || 5;
     return useMemo(function () {
         if (paginationModel === undefined) {
-            return { paginatedRows: sortedRows, normalizedModel: null };
+            return {
+                paginatedRows: sortedRows.map(function (row, index) { return (__assign(__assign({}, row), { prePaginationIndex: index })); }),
+                normalizedModel: null,
+            };
         }
         var pageSizeOptions = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSizeOptions) || [10, 25, 100];
         var normalizedModel = {
@@ -36,7 +50,9 @@ var useCurrentPageRows = function (sortedRows, paginationModel) {
         var pageSize = pageSizeOptions[pageSizeIndex];
         var lowerIndex = pageSize * (currentPage - 1);
         var upperIndex = lowerIndex + pageSize;
-        var paginatedRows = sortedRows.slice(lowerIndex, upperIndex);
+        var paginatedRows = sortedRows
+            .slice(lowerIndex, upperIndex)
+            .map(function (row, index) { return (__assign(__assign({}, row), { prePaginationIndex: lowerIndex + index })); });
         return { paginatedRows: paginatedRows, normalizedModel: normalizedModel };
     }, [
         paginationModel,

package/pipeline/useCombinedPipeline/useDisplayRows.d.ts

@@ -1,3 +1,3 @@
-import { RowDef, FormattedRow, ColDef } from "../../types";
-declare const useDisplayRows: (currentPageRows: RowDef[], cols: ColDef[], ariaColIndexOffset: number) => FormattedRow[];
+import { FormattedRow, ColDef, PostPaginationRowDef } from "../../types";
+declare const useDisplayRows: (currentPageRows: PostPaginationRowDef[], cols: ColDef[], ariaColIndexOffset: number) => FormattedRow[];
 export default useDisplayRows;

package/pipeline/useCombinedPipeline/useDisplayRows.js

@@ -53,7 +53,12 @@ var useDisplayRows = function (currentPageRows, cols, ariaColIndexOffset) {
                     label: cols[index].label,
                 };
             });
-            return { contents: displayRow, id: row.id };
+            return {
+                contents: displayRow,
+                id: row.id,
+                origIndex: row.origIndex,
+                prePaginationIndex: row.prePaginationIndex,
+            };
         });
     }, [currentPageRows, cols, ariaColIndexOffset]);
 };

package/pipeline/useCombinedPipeline/useFilter.d.ts

@@ -1,4 +1,4 @@
-import { RowDef } from "../../types";
+import { AugRowDef, RowDef } from "../../types";
 import { EditableTableFilterState } from "../../filtering/types";
-declare const useFilter: (rows: RowDef[], filterState: EditableTableFilterState | null) => RowDef[];
+declare const useFilter: (rows: RowDef[], filterState: EditableTableFilterState | null) => AugRowDef[];
 export default useFilter;

package/pipeline/useCombinedPipeline/useFilter.js

@@ -1,10 +1,22 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { useMemo } from "react";
 var useFilter = function (rows, filterState) {
     return useMemo(function () {
+        var augRows = rows.map(function (row, index) { return (__assign({ origIndex: index }, row)); });
         if (filterState === null) {
-            return rows;
+            return augRows;
         }
-        return rows.filter(function (row) {
+        return augRows.filter(function (row) {
             function checkIfPassesStringFilter(value, state) {
                 switch (state.scheme) {
                     case "contains": {

package/pipeline/useCombinedPipeline/useSortedRows.d.ts

@@ -1,10 +1,10 @@
-import { ColDefBase, RowDef } from "../../types";
+import { AugRowDef, ColDefBase } from "../../types";
 import { SortColDef, TableSortModel } from "../../sorting/types";
 export interface SortedRowsOutput {
-    sortedRows: RowDef[];
+    sortedRows: AugRowDef[];
     sortingEnabled: boolean;
     sortColDef: SortColDef | null | undefined;
     setSortColDef: ((sortColDef: SortColDef | null) => void) | undefined;
 }
-declare const useSortedRows: (rows: RowDef[], cols: ColDefBase[], sortModel: TableSortModel | undefined) => SortedRowsOutput;
+declare const useSortedRows: (rows: AugRowDef[], cols: ColDefBase[], sortModel: TableSortModel | undefined) => SortedRowsOutput;
 export default useSortedRows;

package/selection/SelectAllHeaderCell.d.ts

@@ -6,6 +6,7 @@ interface SelectAllHeaderCellProps {
     totalRows: number;
     additionalClasses?: string[];
     style?: CSSProperties;
+    colIndexOffset?: number;
 }
 declare const SelectAllHeaderCell: FC<SelectAllHeaderCellProps>;
 export default SelectAllHeaderCell;

package/selection/SelectAllHeaderCell.js

@@ -41,14 +41,14 @@ var getCheckboxState = function (selectionInfo, noRows) {
     return disabledState;
 };
 var SelectAllHeaderCell = function (_a) {
-    var onClick = _a.onClick, selectionInfo = _a.selectionInfo, totalRows = _a.totalRows, additionalClasses = _a.additionalClasses, style = _a.style;
+    var onClick = _a.onClick, selectionInfo = _a.selectionInfo, totalRows = _a.totalRows, additionalClasses = _a.additionalClasses, style = _a.style, colIndexOffset = _a.colIndexOffset;
     var noRows = totalRows === 0;
     var _b = getCheckboxState(selectionInfo, noRows), indeterminate = _b.indeterminate, checked = _b.checked, disabled = _b.disabled, description = _b.description;
     var ref = useRef(null);
     useEffect(function () {
         ref.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    return (_jsx("th", { style: style, "aria-colindex": 1, title: description, "aria-description": description, className: classNames({
+    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 }) }));
 };

package/sorting/sortOrderToAriaSort.d.ts

@@ -0,0 +1,4 @@
+import { SortOrder } from "./types";
+import { AriaAttributes } from "react";
+declare const sortOrderToAriaSort: (sortOrder: SortOrder | null) => AriaAttributes["aria-sort"];
+export default sortOrderToAriaSort;

package/sorting/sortOrderToAriaSort.js

@@ -0,0 +1,11 @@
+var sortOrderToAriaSort = function (sortOrder) {
+    switch (sortOrder) {
+        case "asc":
+            return "ascending";
+        case "desc":
+            return "descending";
+        default:
+            return "none";
+    }
+};
+export default sortOrderToAriaSort;

package/toolbar/Toolbar.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, } from "react";
 import classNames from "classnames";
 var buttonSpecs = {
     filtering: {
@@ -10,14 +11,68 @@ var buttonSpecs = {
         icon: (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" }), _jsx("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" })] })),
     },
 };
-// TODO: figure out tabindex and accessibility
 var Toolbar = function (_a) {
     var enabledFeatures = _a.enabledFeatures, option = _a.option, setOption = _a.setOption, toolbarClasses = _a.toolbarClasses, activeClasses = _a.activeClasses, inactiveClasses = _a.inactiveClasses;
-    return (_jsx("div", { className: classNames(toolbarClasses || ["hstack", "gap-2", "justify-content-start", "px-2"]), role: "toolbar", children: Object.keys(buttonSpecs)
-            .filter(function (toolbarOption) { return !!enabledFeatures[toolbarOption]; })
-            .map(function (toolbarOption) { return (_jsx("button", { "aria-label": buttonSpecs[toolbarOption].label, "aria-roledescription": "Grouped toggle button to show/hide ".concat(toolbarOption, " UI"), "aria-pressed": option === toolbarOption, className: classNames.apply(void 0, (option === toolbarOption
+    var enabledOptions = useMemo(function () {
+        return Object.keys(buttonSpecs).filter(function (toolbarOption) { return !!enabledFeatures[toolbarOption]; });
+    }, [enabledFeatures]);
+    var _b = useState(enabledOptions[0] || null), focusableOption = _b[0], setFocusableOption = _b[1];
+    var divRef = useRef(null);
+    // Deals with cases where selected option is no longer available due to enabledFeatures prop getting changed.
+    var actualOption = useMemo(function () {
+        if (focusableOption === null || !enabledOptions.includes(focusableOption)) {
+            return enabledOptions[0] || null;
+        }
+        return focusableOption;
+    }, [enabledOptions, focusableOption]);
+    var onKeydown = function (event) {
+        if (actualOption === null) {
+            return;
+        }
+        var currentIndex = enabledOptions.findIndex(function (option) { return option === actualOption; });
+        if (currentIndex === -1) {
+            // Should not happen due normalization of the value by the actualOption useMemo hook.
+            // This branch is put here anyway for explanatory purposes.
+            return;
+        }
+        if (event.code === "ArrowLeft" && currentIndex - 1 < 0) {
+            setFocusableOption(enabledOptions[enabledOptions.length - 1]);
+            return;
+        }
+        if (event.code === "ArrowLeft" && currentIndex - 1 >= 0) {
+            setFocusableOption(enabledOptions[currentIndex - 1]);
+            return;
+        }
+        if (event.code === "ArrowRight" &&
+            currentIndex + 1 >= enabledOptions.length) {
+            setFocusableOption(enabledOptions[0]);
+            return;
+        }
+        if (event.code === "ArrowRight" &&
+            currentIndex + 1 < enabledOptions.length) {
+            setFocusableOption(enabledOptions[currentIndex + 1]);
+            return;
+        }
+    };
+    useEffect(function () {
+        if (actualOption === null) {
+            return;
+        }
+        if (divRef.current === null) {
+            return;
+        }
+        if (!divRef.current.contains(document.activeElement)) {
+            return;
+        }
+        var focusTarget = divRef.current.querySelector(":scope > button[data-toolbar-option=\"".concat(actualOption, "\"]"));
+        if (focusTarget) {
+            focusTarget.focus();
+        }
+    }, [actualOption]);
+    return (_jsx("div", { ref: divRef, className: classNames(toolbarClasses || ["hstack", "gap-2", "justify-content-start", "px-2"]), role: "toolbar", onKeyDown: onKeydown, children: enabledOptions.map(function (toolbarOption) { return (_jsx("button", { tabIndex: actualOption === toolbarOption ? 0 : -1, "data-toolbar-option": toolbarOption, "aria-label": buttonSpecs[toolbarOption].label, "aria-roledescription": "Grouped toggle button to show/hide ".concat(toolbarOption, " UI"), "aria-pressed": option === toolbarOption, className: classNames.apply(void 0, (option === toolbarOption
                 ? activeClasses || ["btn", "btn-outline-secondary", "active"]
                 : inactiveClasses || ["btn", "btn-outline-secondary"])), title: buttonSpecs[toolbarOption].label, onClick: function () {
+                setFocusableOption(toolbarOption);
                 setOption(option === toolbarOption
                     ? null
                     : toolbarOption);

package/toolbar/ToolbarContainer.js

@@ -10,8 +10,6 @@ var ToolbarContainer = function (_a) {
             !!interfaces[toolbarOption];
         return prev;
     }, {});
-    // TODO: mention in documentation that Bootstrap 5.3 is required due to the
-    // use of the z-index utility
     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/types.d.ts

@@ -16,17 +16,22 @@ export interface ColDefBase<ValueType = any> {
 export type ColDef<ValueType = any> = ColDefBase<ValueType> & {
     width?: number;
 };
-type ValidRowData = Record<string, any>;
+export type ValidRowData = Record<string, any>;
 export type RowData<Data extends ValidRowData = ValidRowData> = Data;
 export type RowId = string | number;
 export interface RowDef<Data extends ValidRowData = ValidRowData> {
     id: RowId;
     data: RowData<Data>;
 }
-export interface FormattedRow {
+export type AugRowDef<Data extends ValidRowData = ValidRowData> = RowDef<Data> & {
+    origIndex: number;
+};
+export type PostPaginationRowDef<Data extends ValidRowData = ValidRowData> = AugRowDef & {
+    prePaginationIndex: number;
+};
+export type FormattedRow = {
     contents: CellData[];
-    id: RowId;
-}
+} & Omit<PostPaginationRowDef, "data">;
 export type AugCellData = CellData & {
     width?: number;
 };
@@ -60,4 +65,3 @@ export interface ColHeaderCellProps {
     additionalClasses?: string[];
     width?: number;
 }
-export {};