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

package/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/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, prefixHeader = _e.prefixHeader;
+    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, classes = _a.classes;
     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: [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: "".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,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/main/BodyRows.js

@@ -4,15 +4,15 @@ 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, additionalColIndexOffset = _a.additionalColIndexOffset, renderPrefixCells = _a.renderPrefixCells;
+    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, additionalRowStyles = _a.additionalRowStyles;
     return augFormattedRows.map(function (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: function (colIndex) {
+            }, 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: 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: [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));
+            }, 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/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.6.0",
+  "version": "2.7.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",

package/selection/SelectAllHeaderCell.js

@@ -50,6 +50,6 @@ var SelectAllHeaderCell = function (_a) {
     }, [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/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/selection/SelectionInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 var SelectionInput = function (_a) {
-    var selectionInputModel = _a.selectionInputModel, selected = _a.selected, selectCallback = _a.selectCallback, additionalClasses = _a.additionalClasses;
+    var selectionInputModel = _a.selectionInputModel, selected = _a.selected, selectCallback = _a.selectCallback, additionalClasses = _a.additionalClasses, index = _a.index;
     var type = selectionInputModel.type;
     var onChange = function (_a) {
         var checked = _a.target.checked;
@@ -16,7 +16,7 @@ var SelectionInput = function (_a) {
             selectCallback();
         }
     };
-    return (_jsx("input", { className: classNames(additionalClasses || []), "aria-label": "Input to select the current row", onClick: function (event) {
+    return (_jsx("input", { tabIndex: 0, className: classNames(additionalClasses || []), "aria-label": "Select row with index ".concat(index), onClick: function (event) {
             event.stopPropagation();
         }, type: type, checked: selected, onChange: onChange, name: selectionInputModel.name }));
 };

package/util/trueModulo.d.ts

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

package/util/trueModulo.js

@@ -0,0 +1,4 @@
+var trueModulo = function (num, divisor) {
+    return ((num % divisor) + divisor) % divisor;
+};
+export default trueModulo;