@absreim/react-bootstrap-data-grid 1.3.0 → 1.4.0

package/ColHeaderCell.d.ts

@@ -1,9 +1,10 @@
 import { FC } from "react";
-import { ColSortModel } from "./types";
+import { ColSortModel } from "./sorting/types";
 interface ColHeaderCellProps {
     label: string;
     sortModel?: ColSortModel;
     ariaColIndex: number;
+    additionalClasses?: string[];
 }
 declare const ColHeaderCell: FC<ColHeaderCellProps>;
 export default ColHeaderCell;

package/ColHeaderCell.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-import downArrow from "./icons/downArrow";
-import upArrow from "./icons/upArrow";
-import arrowPlaceholder from "./icons/arrowPlaceholder";
+import downArrow from "./sorting/downArrow";
+import upArrow from "./sorting/upArrow";
+import arrowPlaceholder from "./sorting/arrowPlaceholder";
 import classNames from "classnames";
-import useControlledHover from "./hooks/useControlledHover";
+import useControlledHover from "./util/useControlledHover";
 var ColHeaderCell = function (_a) {
-    var label = _a.label, sortModel = _a.sortModel, ariaColIndex = _a.ariaColIndex;
+    var label = _a.label, sortModel = _a.sortModel, ariaColIndex = _a.ariaColIndex, additionalClasses = _a.additionalClasses;
     var _b = useControlledHover(), isHovering = _b.isHovering, handleMouseOver = _b.handleMouseOver, handleMouseOut = _b.handleMouseOut;
     var handleClick = function () {
         if (!sortModel) {
@@ -48,7 +48,7 @@ var ColHeaderCell = function (_a) {
     return (_jsxs("th", { className: classNames({
             "rbdg-clickable-grid-header-cell": sortModel,
             "table-active": sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortOrder,
-        }), onClick: sortModel && handleClick, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, "aria-description": sortModel
+        }, 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, children: [label, getSortSymbol()] }));
 };

package/Grid.d.ts

@@ -1,14 +1,11 @@
 import { FC } from "react";
-import { ColDef, EditModel, FilterModel, RowDef, SelectModel, Size, TableSortModel } from "./types";
-export interface GridPaginationState {
-    pageSizeOptions: number[];
-    pageSizeIndex: number;
-    setPageSizeIndex: (pageSizeIndex: number) => void;
-    currentPage: number;
-    setCurrentPage: (pageNum: number) => void;
-    maxPageButtons: number;
-    componentSize?: Size;
-}
+import { ColDef, RowDef } from "./types";
+import { StyleModel } from "./styling/types";
+import { EditModel } from "./editing/types";
+import { SelectModel } from "./selection/types";
+import { FilterModel } from "./filtering/types";
+import { TableSortModel } from "./sorting/types";
+import { GridPaginationState } from "./pagination/types";
 export interface GridProps {
     rows: RowDef[];
     cols: ColDef[];
@@ -18,6 +15,7 @@ export interface GridProps {
     selectModel?: SelectModel;
     editModel?: EditModel;
     caption?: string;
+    styleModel?: StyleModel;
 }
 declare const Grid: FC<GridProps>;
 export default Grid;

package/Grid.js

@@ -2,40 +2,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import ColHeaderCell from "./ColHeaderCell";
-import useFilter from "./hooks/useFilter";
+import useFilter from "./pipeline/useFilter";
 import ToggleButton from "./ToggleButton";
 import FilterOptionsTable from "./filtering/FilterOptionsTable";
-import useFilterStateFromEditable from "./hooks/useFilterStateFromEditable";
-import useAugmentedRows from "./hooks/useAugmentedRows";
-import useSortedRows from "./hooks/useSortedRows";
-import useDisplayRows from "./hooks/useDisplayRows";
+import useFilterStateFromEditable from "./pipeline/useFilterStateFromEditable";
+import useAugmentedRows from "./pipeline/useAugmentedRows";
+import useSortedRows from "./pipeline/useSortedRows";
+import useDisplayRows from "./pipeline/useDisplayRows";
 import SelectAllHeaderCell from "./selection/SelectAllHeaderCell";
 import SelectionInput from "./selection/SelectionInput";
 import Pagination from "./pagination/Pagination";
 import classNames from "classnames";
 import EditableRow from "./editing/EditableRow";
 import inputStrsToRowDef from "./editing/inputStrsToRowDef";
+import { unwrapAdditionalComponentsStyleModel, unwrapTableStyleModel, } from "./styling/styleModelUnwrappers";
+import useCurrentPageRows from "./pipeline/useCurrentPageRows";
 var Grid = function (_a) {
-    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel, editModel = _a.editModel, caption = _a.caption;
+    var _b;
+    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel, editModel = _a.editModel, caption = _a.caption, styleModel = _a.styleModel;
     var editableFilterState = (filterModel === null || filterModel === void 0 ? void 0 : filterModel.tableFilterState) || null;
     var filterState = useFilterStateFromEditable(cols, editableFilterState);
     var augmentedRows = useAugmentedRows(rows);
     var filteredRows = useFilter(augmentedRows, editableFilterState);
     var sortedRows = useSortedRows(filteredRows, cols, sortModel);
-    var currentPageRows = useMemo(function () {
-        if (pagination === undefined) {
-            return sortedRows;
-        }
-        var pageSizeOptions = pagination.pageSizeOptions, pageSizeIndex = pagination.pageSizeIndex, currentPage = pagination.currentPage;
-        var pageSize = pageSizeOptions[pageSizeIndex];
-        var lowerIndex = pageSize * (currentPage - 1);
-        var upperIndex = lowerIndex + pageSize;
-        return sortedRows.slice(lowerIndex, upperIndex);
-    }, [sortedRows, pagination]);
+    var currentPageRows = useCurrentPageRows(sortedRows, pagination);
     var showSelectCol = selectModel && selectModel.mode !== "row";
     var ariaColIndexOffset = showSelectCol ? 1 : 0;
     var displayRows = useDisplayRows(currentPageRows, cols, ariaColIndexOffset);
-    var _b = useState(false), filterOptionsVisible = _b[0], setFilterOptionsVisible = _b[1];
+    var _c = useState(false), filterOptionsVisible = _c[0], setFilterOptionsVisible = _c[1];
     var handleToggleFilterOptions = function () {
         setFilterOptionsVisible(!filterOptionsVisible);
     };
@@ -132,28 +126,36 @@ var Grid = function (_a) {
                 indexSpecificCallback(rowDef);
             };
         });
-    return (_jsxs("div", { children: [filterState && filterModel && (_jsxs("div", { children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions }), filterOptionsVisible && (_jsx(FilterOptionsTable, { filterState: filterState, setFilterState: filterModel.setTableFilterState }))] })), _jsxs("table", { className: classNames("table", {
-                    "table-hover": rowsAreSelectable,
-                }), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && _jsx("caption", { children: caption }), _jsx("thead", { children: _jsxs("tr", { "aria-rowindex": 1, children: [showSelectCol && (_jsx(SelectAllHeaderCell, { selectType: selectModel.type, onClick: selectAllOnClick, selectionExists: selectionExists })), cols.map(function (_a, index) {
-                                    var _b;
-                                    var name = _a.name, label = _a.label, sortable = _a.sortable;
-                                    var colSortModel = sortModel && sortable
-                                        ? {
-                                            sortOrder: ((_b = sortModel.sortColDef) === null || _b === void 0 ? void 0 : _b.name) === name
-                                                ? sortModel.sortColDef.order
-                                                : null,
-                                            setSortOrder: function (order) {
-                                                sortModel.setSortColDef(order && { name: name, order: order });
-                                            },
-                                        }
-                                        : undefined;
-                                    return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0) }, name));
-                                }), editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), children: "Edit Controls" }))] }) }), _jsx("tbody", { children: displayRows.map(function (row, index) {
-                            return (_jsx(EditableRow, { onClick: getRowClickHandler(row.origIndex), className: classNames({
-                                    "table-active": selectedSet.has(row.origIndex),
-                                }), "aria-rowindex": index + 2, dataRowIndex: row.origIndex, "aria-selected": getAriaSelectedValue(row.origIndex), ariaColIndexOffset: ariaColIndexOffset, cellData: row.contents, updateCallback: getInputStrSubmitCallback &&
-                                    getInputStrSubmitCallback(row.origIndex), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) &&
-                                    editModel.getDeleteCallback(row.origIndex), children: showSelectCol && (_jsx("td", { children: _jsx(SelectionInput, { selected: selectedSet.has(row.origIndex), selectionInputModel: getSelectInputModel(row.origIndex, selectModel), selectCallback: getSelectHandler(row.origIndex) }) })) }, row.origIndex));
-                        }) })] }), pagination && (_jsx(Pagination, { componentSize: pagination.componentSize || "medium", pageSizeOptions: pagination.pageSizeOptions, pageSizeIndex: pagination.pageSizeIndex, handleSetPageSizeIndex: pagination.setPageSizeIndex, handleSetPageNum: pagination.setCurrentPage, prePagingNumRows: sortedRows.length, maxPageButtons: pagination.maxPageButtons, currentPage: pagination.currentPage }))] }));
+    var unwrappedTableModel = useMemo(function () { return unwrapTableStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel); }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel]);
+    var unwrappedAdditionalStyleModel = useMemo(function () {
+        return unwrapAdditionalComponentsStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel);
+    }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel]);
+    return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [filterState && filterModel && (_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: filterModel.setTableFilterState, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel }))] })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames(unwrappedAdditionalStyleModel.tableAndPaginationDiv), children: [_jsxs("table", { className: classNames("table", {
+                            "table-hover": rowsAreSelectable,
+                        }, 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, { selectType: selectModel.type, onClick: selectAllOnClick, selectionExists: selectionExists, additionalClasses: unwrappedTableModel.rowSelectColTh })), cols.map(function (_a, index) {
+                                            var _b;
+                                            var name = _a.name, label = _a.label, sortable = _a.sortable;
+                                            var colSortModel = sortModel && sortable
+                                                ? {
+                                                    sortOrder: ((_b = sortModel.sortColDef) === null || _b === void 0 ? void 0 : _b.name) === name
+                                                        ? sortModel.sortColDef.order
+                                                        : null,
+                                                    setSortOrder: function (order) {
+                                                        sortModel.setSortColDef(order && { name: name, order: order });
+                                                    },
+                                                }
+                                                : undefined;
+                                            return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: unwrappedTableModel.theadTh(index) }, name));
+                                        }), editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames(unwrappedTableModel.editColTh), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(unwrappedTableModel.tbody), children: displayRows.map(function (row, index) {
+                                    return (_jsx(EditableRow, { onClick: getRowClickHandler(row.origIndex), className: classNames({
+                                            "table-active": selectedSet.has(row.origIndex),
+                                        }, unwrappedTableModel.tbodyTr(row.origIndex, index)), "aria-rowindex": index + 2, dataRowIndex: row.origIndex, "aria-selected": getAriaSelectedValue(row.origIndex), ariaColIndexOffset: ariaColIndexOffset, cellData: row.contents, updateCallback: getInputStrSubmitCallback &&
+                                            getInputStrSubmitCallback(row.origIndex), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) &&
+                                            editModel.getDeleteCallback(row.origIndex), dataCellClasses: function (colIndex) {
+                                            return unwrappedTableModel.tbodyTd(row.origIndex, index, colIndex);
+                                        }, dataCellInputClasses: function (colIndex) {
+                                            return unwrappedTableModel.tbodyTdInput(row.origIndex, index, colIndex);
+                                        }, editCellClasses: unwrappedTableModel.editColTd(row.origIndex, index), saveButtonClasses: unwrappedTableModel.editSaveButton(row.origIndex, index), deleteButtonClasses: unwrappedTableModel.editDeleteButton(row.origIndex, index), startButtonClasses: unwrappedTableModel.editStartButton(row.origIndex, index), cancelButtonClasses: unwrappedTableModel.editCancelButton(row.origIndex, index), children: showSelectCol && (_jsx("td", { className: classNames(unwrappedTableModel.rowSelectColTd(row.origIndex, index)), "aria-colindex": 1, children: _jsx(SelectionInput, { selected: selectedSet.has(row.origIndex), selectionInputModel: getSelectInputModel(row.origIndex, selectModel), selectCallback: getSelectHandler(row.origIndex), additionalClasses: unwrappedTableModel.rowSelectInput(row.origIndex, index) }) })) }, row.origIndex));
+                                }) })] }), pagination && (_jsx(Pagination, { componentSize: pagination.componentSize || "medium", pageSizeOptions: pagination.pageSizeOptions, pageSizeIndex: pagination.pageSizeIndex, handleSetPageSizeIndex: pagination.setPageSizeIndex, handleSetPageNum: pagination.setCurrentPage, prePagingNumRows: sortedRows.length, maxPageButtons: pagination.maxPageButtons, currentPage: pagination.currentPage, pageSelectorJustifyContent: pagination.pageSelectorJustifyContent, pageSelectorAriaLabel: pagination.pageSelectorAriaLabel }))] })] }));
 };
 export default Grid;

package/ToggleButton.d.ts

@@ -3,6 +3,7 @@ export interface ToggleButtonProps {
     isActive: boolean;
     label: string;
     onClick: () => void;
+    classes?: string[];
 }
 declare const ToggleButton: FC<ToggleButtonProps>;
 export default ToggleButton;

package/ToggleButton.js

@@ -2,11 +2,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
 var ToggleButton = function (_a) {
-    var isActive = _a.isActive, label = _a.label, onClick = _a.onClick;
-    var baseClasses = ["btn", "btn-primary"];
+    var isActive = _a.isActive, label = _a.label, onClick = _a.onClick, classes = _a.classes;
+    var baseClasses = ["btn"];
     var variableClasses = {
         active: isActive,
     };
-    return (_jsx("button", { type: "button", className: classNames(baseClasses, variableClasses), "aria-pressed": isActive, onClick: onClick, children: label }));
+    return (_jsx("button", { type: "button", className: classNames(baseClasses, variableClasses, classes, {
+            "btn-primary": !(classes && classes.length > 0),
+        }), "aria-pressed": isActive, onClick: onClick, children: label }));
 };
 export default ToggleButton;

package/editing/EditControlsCell.d.ts

@@ -6,6 +6,11 @@ export interface EditControlsCellProps {
     isEditing: boolean;
     saveCallback: () => void;
     deleteCallback?: () => void;
+    editControlsCellClasses: string[];
+    saveButtonClasses: string[];
+    deleteButtonClasses: string[];
+    startButtonClasses: string[];
+    cancelButtonClasses: string[];
 }
 declare const EditControlsCell: FC<EditControlsCellProps>;
 export default EditControlsCell;

package/editing/EditControlsCell.js

@@ -1,6 +1,19 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+var stopPropagationWrapper = function (fn) { return function (event) {
+    event.stopPropagation();
+    fn();
+}; };
 var EditControlsCell = function (_a) {
-    var ariaColIndex = _a.ariaColIndex, beginEditingCallback = _a.beginEditingCallback, cancelEditingCallback = _a.cancelEditingCallback, isEditing = _a.isEditing, saveCallback = _a.saveCallback, deleteCallback = _a.deleteCallback;
-    return (_jsx("td", { "aria-colindex": ariaColIndex, children: _jsx("div", { className: "hstack gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { className: "btn btn-secondary", onClick: cancelEditingCallback, children: "Cancel" }), _jsx("button", { className: "btn btn-primary", onClick: saveCallback, children: "Save" })] })) : (_jsxs(_Fragment, { children: [deleteCallback && (_jsx("button", { className: "btn btn-secondary", onClick: deleteCallback, children: "Delete" })), _jsx("button", { className: "btn btn-primary", onClick: beginEditingCallback, children: "Edit" })] })) }) }));
+    var ariaColIndex = _a.ariaColIndex, beginEditingCallback = _a.beginEditingCallback, cancelEditingCallback = _a.cancelEditingCallback, isEditing = _a.isEditing, saveCallback = _a.saveCallback, deleteCallback = _a.deleteCallback, editControlsCellClasses = _a.editControlsCellClasses, saveButtonClasses = _a.saveButtonClasses, deleteButtonClasses = _a.deleteButtonClasses, startButtonClasses = _a.startButtonClasses, cancelButtonClasses = _a.cancelButtonClasses;
+    return (_jsx("td", { "aria-colindex": ariaColIndex, className: classNames(editControlsCellClasses), children: _jsx("div", { className: "hstack gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { className: classNames("btn", cancelButtonClasses.length === 0
+                            ? ["btn-secondary"]
+                            : cancelButtonClasses), onClick: stopPropagationWrapper(cancelEditingCallback), children: "Cancel" }), _jsx("button", { className: classNames("btn", saveButtonClasses.length === 0
+                            ? ["btn-primary"]
+                            : saveButtonClasses), onClick: stopPropagationWrapper(saveCallback), children: "Save" })] })) : (_jsxs(_Fragment, { children: [deleteCallback && (_jsx("button", { className: classNames("btn", deleteButtonClasses.length === 0
+                            ? ["btn-primary"]
+                            : deleteButtonClasses), onClick: stopPropagationWrapper(deleteCallback), children: "Delete" })), _jsx("button", { className: classNames("btn", startButtonClasses.length === 0
+                            ? ["btn-primary"]
+                            : startButtonClasses), onClick: stopPropagationWrapper(beginEditingCallback), children: "Edit" })] })) }) }));
 };
 export default EditControlsCell;

package/editing/EditableRow.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from "react";
-import { CellData } from "../types";
 import React from "react";
+import { CellData } from "./types";
 export type EditableRowProps = Pick<React.ComponentProps<"tr">, "onClick" | "className" | "aria-rowindex" | "aria-selected"> & {
     ariaColIndexOffset: number;
     dataRowIndex: number;
@@ -8,6 +8,13 @@ export type EditableRowProps = Pick<React.ComponentProps<"tr">, "onClick" | "cla
     cellData: CellData[];
     updateCallback?: (values: string[]) => void;
     deleteCallback?: () => void;
+    dataCellClasses: (colIndex: number) => string[];
+    dataCellInputClasses: (colIndex: number) => string[];
+    editCellClasses: string[];
+    deleteButtonClasses: string[];
+    cancelButtonClasses: string[];
+    startButtonClasses: string[];
+    saveButtonClasses: string[];
 };
 declare const EditableRow: FC<EditableRowProps>;
 export default EditableRow;

package/editing/EditableRow.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
 import EditControlsCell from "./EditControlsCell";
+import classNames from "classnames";
 var initValueToFormValue = function (value, type) {
     switch (type) {
         case "date":
@@ -28,7 +29,7 @@ var colDataTypeToInputType = function (colDataType) {
     }
 };
 var EditableRow = function (_a) {
-    var ariaColIndexOffset = _a.ariaColIndexOffset, cellData = _a.cellData, children = _a.children, updateCallback = _a.updateCallback, deleteCallback = _a.deleteCallback, onClick = _a.onClick, className = _a.className, ariaRowIndex = _a["aria-rowindex"], ariaSelected = _a["aria-selected"], dataRowIndex = _a.dataRowIndex;
+    var ariaColIndexOffset = _a.ariaColIndexOffset, cellData = _a.cellData, children = _a.children, updateCallback = _a.updateCallback, deleteCallback = _a.deleteCallback, onClick = _a.onClick, className = _a.className, ariaRowIndex = _a["aria-rowindex"], ariaSelected = _a["aria-selected"], dataRowIndex = _a.dataRowIndex, dataCellClasses = _a.dataCellClasses, dataCellInputClasses = _a.dataCellInputClasses, editCellClasses = _a.editCellClasses, saveButtonClasses = _a.saveButtonClasses, startButtonClasses = _a.startButtonClasses, cancelButtonClasses = _a.cancelButtonClasses, deleteButtonClasses = _a.deleteButtonClasses;
     var trRef = useRef(null);
     var _b = useState(false), isEditing = _b[0], setIsEditing = _b[1];
     var handleSave = function () {
@@ -60,7 +61,7 @@ var EditableRow = function (_a) {
     };
     return (_jsxs("tr", { ref: trRef, onClick: onClick, className: className, "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, "data-rowindex": dataRowIndex, children: [children, cellData.map(function (_a, index) {
                 var type = _a.type, value = _a.value, formattedValue = _a.formattedValue, label = _a.label;
-                return (_jsx("td", { "aria-colindex": index + ariaColIndexOffset + 1, children: isEditing && !!updateCallback ? (_jsx("input", { "aria-label": label, name: "editable-cell-input-".concat(dataRowIndex, "-").concat(index), className: "form-control", type: colDataTypeToInputType(type), defaultValue: initValueToFormValue(value, type), required: type !== "string" })) : (formattedValue) }, index));
-            }), updateCallback && (_jsx(EditControlsCell, { ariaColIndex: ariaColIndexOffset + cellData.length + 1, beginEditingCallback: function () { return setIsEditing(true); }, cancelEditingCallback: function () { return setIsEditing(false); }, isEditing: isEditing, saveCallback: handleSave, deleteCallback: deleteCallback }))] }));
+                return (_jsx("td", { "aria-colindex": index + ariaColIndexOffset + 1, className: classNames(dataCellClasses(index)), children: isEditing && !!updateCallback ? (_jsx("input", { "aria-label": label, name: "editable-cell-input-".concat(dataRowIndex, "-").concat(index), className: classNames("form-control", dataCellInputClasses(index)), type: colDataTypeToInputType(type), defaultValue: initValueToFormValue(value, type), required: type !== "string" })) : (formattedValue) }, index));
+            }), updateCallback && (_jsx(EditControlsCell, { ariaColIndex: ariaColIndexOffset + cellData.length + 1, beginEditingCallback: function () { return setIsEditing(true); }, cancelEditingCallback: function () { return setIsEditing(false); }, isEditing: isEditing, saveCallback: handleSave, deleteCallback: deleteCallback, editControlsCellClasses: editCellClasses, startButtonClasses: startButtonClasses, deleteButtonClasses: deleteButtonClasses, cancelButtonClasses: cancelButtonClasses, saveButtonClasses: saveButtonClasses }))] }));
 };
 export default EditableRow;

package/editing/types.d.ts

@@ -0,0 +1,14 @@
+import { ColDataType, ColDataTypeStrings, RowDef } from "../types";
+export interface CellData {
+    fieldName: string;
+    value: ColDataType;
+    type: ColDataTypeStrings;
+    ariaColIndex: number;
+    formattedValue: string;
+    label: string;
+}
+export type UpdateCallbackGenerator = (origIndex: number) => (rowDef: RowDef) => void;
+export interface EditModel {
+    getUpdateCallback: UpdateCallbackGenerator;
+    getDeleteCallback?: (origIndex: number) => () => void;
+}

package/editing/types.js

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

package/filtering/DateFilterRow.d.ts

@@ -1,10 +1,16 @@
 import { FC } from "react";
 import { DateFormFilterState } from "./types";
-interface DateFilterRowProps {
+import { CommonFilterRowStyleProps } from "./FilterRow";
+export type DateFilterRowProps = {
+    ariaRowIndex: number;
     includeTime: boolean;
     columnLabel: string;
     filterState: DateFormFilterState;
     setFilterState: (filterState: DateFormFilterState) => void;
-}
+    schemeSelectClasses: string[];
+    enableInputClasses: string[];
+    startDateInputClasses: string[];
+    endDateInputClasses: string[];
+} & CommonFilterRowStyleProps;
 declare const DateFilterRow: FC<DateFilterRowProps>;
 export default DateFilterRow;

package/filtering/DateFilterRow.js

@@ -11,10 +11,12 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { dateFilterSchemeNames, dateFilterSchemes, } from "../types";
+import { dateFilterSchemeNames, } from "./types";
 import { nanoid } from "nanoid/non-secure";
+import FilterRow from "./FilterRow";
+import classNames from "classnames";
 var DateFilterRow = function (_a) {
-    var includeTime = _a.includeTime, columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState;
+    var ariaRowIndex = _a.ariaRowIndex, includeTime = _a.includeTime, columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState, schemeSelectClasses = _a.schemeSelectClasses, enableInputClasses = _a.enableInputClasses, startDateInputClasses = _a.startDateInputClasses, endDateInputClasses = _a.endDateInputClasses, tdClasses = _a.tdClasses, trClasses = _a.trClasses;
     var handleOpChange = function (_a) {
         var target = _a.target;
         setFilterState(__assign(__assign({}, filterState), { scheme: target.value }));
@@ -36,10 +38,9 @@ var DateFilterRow = function (_a) {
     var inputId = useMemo(function () { return nanoid(); }, []);
     var startDateInputId = "$startDate-".concat(inputId);
     var endDateInputId = "$endDate-".concat(inputId);
-    var checkboxLabel = "".concat(columnLabel, " Column Filter Toggle");
-    var opSelectLabel = "".concat(columnLabel, " Column Filter Operator Selection");
     var startDateInputLabel = "".concat(columnLabel, " Column Filter Start Date");
     var endDateInputLabel = "".concat(columnLabel, " Column Filter End Date");
-    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("input", { name: checkboxLabel, "aria-label": checkboxLabel, type: "checkbox", checked: enabled, onChange: handleEnabledChange }) }), _jsx("td", { children: columnLabel }), _jsx("td", { children: filterState.type === "date" ? "Date" : "Datetime" }), _jsx("td", { children: _jsx("select", { name: opSelectLabel, "aria-label": opSelectLabel, disabled: !enabled, className: "form-select", value: scheme, onChange: handleOpChange, children: dateFilterSchemes.map(function (scheme) { return (_jsx("option", { value: scheme, children: dateFilterSchemeNames[scheme] }, scheme)); }) }) }), _jsxs("td", { children: [scheme !== "endAt" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: startDateInputId, children: "Start Date" })), _jsx("input", { id: startDateInputId, className: "form-control", type: inputType, required: enabled, disabled: !enabled, value: startDate, onChange: handleStartValueChange, "aria-label": startDateInputLabel })] })), scheme !== "startFrom" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: endDateInputId, children: "End Date" })), _jsx("input", { id: endDateInputId, className: "form-control", type: inputType, required: enabled, disabled: !enabled, value: endDate, onChange: handleEndValueChange, "aria-label": endDateInputLabel })] }))] })] }));
+    var searchStringInputCellContents = (_jsxs(_Fragment, { children: [scheme !== "endAt" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: startDateInputId, children: "Start Date" })), _jsx("input", { id: startDateInputId, className: classNames("form-control", startDateInputClasses), type: inputType, required: enabled, disabled: !enabled, value: startDate, onChange: handleStartValueChange, "aria-label": startDateInputLabel })] })), scheme !== "startFrom" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: endDateInputId, children: "End Date" })), _jsx("input", { id: endDateInputId, className: classNames("form-control", endDateInputClasses), type: inputType, required: enabled, disabled: !enabled, value: endDate, onChange: handleEndValueChange, "aria-label": endDateInputLabel })] }))] }));
+    return (_jsx(FilterRow, { ariaRowIndex: ariaRowIndex, columnLabel: columnLabel, typeLabel: filterState.type === "date" ? "Date" : "Datetime", enabled: enabled, enabledChangeHandler: handleEnabledChange, currentScheme: scheme, handleSchemeChange: handleOpChange, schemesToLabels: dateFilterSchemeNames, searchStringInputCellContents: searchStringInputCellContents, trClasses: trClasses, tdClasses: tdClasses, inputClasses: enableInputClasses, selectClasses: schemeSelectClasses }));
 };
 export default DateFilterRow;

package/filtering/FilterOptionsTable.d.ts

@@ -1,8 +1,11 @@
 import { FC } from "react";
-import { EditableTableFilterState, TableFilterState } from "../types";
+import { EditableTableFilterState, TableFilterState } from "./types";
+import { FilterInputTableStyleModel } from "../styling/types";
 interface FilterOptionsTableProps {
     filterState: TableFilterState;
     setFilterState: (filterState: EditableTableFilterState) => void;
+    caption?: string;
+    styleModel?: FilterInputTableStyleModel;
 }
 declare const FilterOptionsTable: FC<FilterOptionsTableProps>;
 export default FilterOptionsTable;

package/filtering/FilterOptionsTable.js

@@ -9,12 +9,23 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import StringFilterRow from "./StringFilterRow";
 import NumberFilterRow from "./NumberFilterRow";
 import useFormStateFromTableFilterState from "./useFormStateFromTableFilterState";
 import DateFilterRow from "./DateFilterRow";
+import classNames from "classnames";
+import { unwrapFilterInputTableStyleModel } from "../styling/styleModelUnwrappers";
 var convertFilterFormStateToEditableState = function (filterFormState) {
     return Object.keys(filterFormState).reduce(function (editableState, colName) {
         var rowFilterFormState = filterFormState[colName];
@@ -62,11 +73,12 @@ var convertFilterFormStateToEditableState = function (filterFormState) {
     }, {});
 };
 var FilterOptionsTable = function (_a) {
-    var filterState = _a.filterState, setFilterState = _a.setFilterState;
+    var filterState = _a.filterState, setFilterState = _a.setFilterState, caption = _a.caption, styleModel = _a.styleModel;
     var formFilterState = useFormStateFromTableFilterState(filterState);
     var _b = useState(formFilterState), formState = _b[0], setFormState = _b[1];
+    var unwrappedStyleModel = useMemo(function () { return unwrapFilterInputTableStyleModel(styleModel); }, [styleModel]);
     var getRows = function () {
-        return Object.keys(formState).map(function (colName) {
+        return Object.keys(formState).map(function (colName, index) {
             function getColStateSetter(colName) {
                 return function (rowState) {
                     var _a;
@@ -77,14 +89,20 @@ var FilterOptionsTable = function (_a) {
             var colFilterState = formState[colName];
             switch (colFilterState.type) {
                 case "string": {
-                    return (_jsx(StringFilterRow, { columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName) }, colName));
+                    return (_jsx(StringFilterRow, { ariaRowIndex: index + 2, columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: unwrappedStyleModel.schemeSelectionInput(index), enableInputClasses: unwrappedStyleModel.enablementInput(index), searchStringInputClasses: unwrappedStyleModel.searchStringInput(index), trClasses: unwrappedStyleModel.tbodyTr(index), tdClasses: function (colIndex) {
+                            return unwrappedStyleModel.tbodyTd(index, colIndex);
+                        } }, colName));
                 }
                 case "number": {
-                    return (_jsx(NumberFilterRow, { columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName) }, colName));
+                    return (_jsx(NumberFilterRow, { ariaRowIndex: index + 2, columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: unwrappedStyleModel.schemeSelectionInput(index), enableInputClasses: unwrappedStyleModel.enablementInput(index), numberInputClasses: unwrappedStyleModel.numberInput(index), trClasses: unwrappedStyleModel.tbodyTr(index), tdClasses: function (colIndex) {
+                            return unwrappedStyleModel.tbodyTd(index, colIndex);
+                        } }, colName));
                 }
                 default: {
                     // date or datetime
-                    return (_jsx(DateFilterRow, { includeTime: colFilterState.type === "datetime", columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName) }, colName));
+                    return (_jsx(DateFilterRow, { ariaRowIndex: index + 2, includeTime: colFilterState.type === "datetime", columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: unwrappedStyleModel.schemeSelectionInput(index), enableInputClasses: unwrappedStyleModel.enablementInput(index), startDateInputClasses: unwrappedStyleModel.startDateInput(index), endDateInputClasses: unwrappedStyleModel.endDateInput(index), trClasses: unwrappedStyleModel.tbodyTr(index), tdClasses: function (colIndex) {
+                            return unwrappedStyleModel.tbodyTd(index, colIndex);
+                        } }, colName));
                 }
             }
         });
@@ -94,6 +112,7 @@ var FilterOptionsTable = function (_a) {
         var editableTableFilterState = convertFilterFormStateToEditableState(formState);
         setFilterState(editableTableFilterState);
     };
-    return (_jsxs("form", { onSubmit: onSubmit, children: [_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Enabled" }), _jsx("th", { children: "Column" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Operator" }), _jsx("th", { children: "Value" })] }) }), _jsx("tbody", { children: getRows() })] }), _jsx("button", { className: "btn btn-secondary", type: "submit", children: "Submit" })] }));
+    // TODO: consider using an accordion to show and hide this component
+    return (_jsxs("form", { onSubmit: onSubmit, children: [_jsxs("table", { className: classNames.apply(void 0, __spreadArray(["table"], unwrappedStyleModel.table, false)), children: [caption && (_jsx("caption", { className: classNames(unwrappedStyleModel.caption), children: caption })), _jsx("thead", { className: classNames.apply(void 0, unwrappedStyleModel.thead), children: _jsx("tr", { className: classNames.apply(void 0, unwrappedStyleModel.theadTr), children: ["Enabled", "Column", "Type", "Operator", "Value"].map(function (colName, index) { return (_jsx("th", { className: classNames.apply(void 0, unwrappedStyleModel.theadTh(index)), children: colName }, index)); }) }) }), _jsx("tbody", { className: classNames.apply(void 0, unwrappedStyleModel.tbody), children: getRows() })] }), _jsx("button", { className: classNames("btn", { "btn-secondary": unwrappedStyleModel.submitButton.length === 0 }, unwrappedStyleModel.submitButton), type: "submit", children: "Submit" })] }));
 };
 export default FilterOptionsTable;

package/filtering/FilterRow.d.ts

@@ -0,0 +1,19 @@
+import { ChangeEventHandler, ReactNode } from "react";
+export interface FilterRowProps<FilterScheme extends string> {
+    ariaRowIndex: number;
+    columnLabel: string;
+    typeLabel: string;
+    enabled: boolean;
+    enabledChangeHandler: ChangeEventHandler<HTMLInputElement>;
+    currentScheme: string;
+    handleSchemeChange: ChangeEventHandler<HTMLSelectElement>;
+    schemesToLabels: Record<FilterScheme, string>;
+    searchStringInputCellContents: ReactNode;
+    trClasses: string[];
+    tdClasses: (colIndex: number) => string[];
+    inputClasses: string[];
+    selectClasses: string[];
+}
+export type CommonFilterRowStyleProps = Pick<FilterRowProps<string>, "trClasses" | "tdClasses">;
+export declare function FilterRow<FilterScheme extends string = string>(props: FilterRowProps<FilterScheme>): ReactNode;
+export default FilterRow;

package/filtering/FilterRow.js

@@ -0,0 +1,18 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+export function FilterRow(props) {
+    var ariaRowIndex = props.ariaRowIndex, columnLabel = props.columnLabel, typeLabel = props.typeLabel, enabled = props.enabled, enabledChangeHandler = props.enabledChangeHandler, currentScheme = props.currentScheme, handleSchemeChange = props.handleSchemeChange, schemesToLabels = props.schemesToLabels, searchStringInputCellContents = props.searchStringInputCellContents, trClasses = props.trClasses, tdClasses = props.tdClasses, inputClasses = props.inputClasses, selectClasses = props.selectClasses;
+    var checkboxLabel = "".concat(columnLabel, " Column Filter Toggle");
+    var opSelectLabel = "".concat(columnLabel, " Column Filter Operator Selection");
+    return (_jsxs("tr", { className: classNames(trClasses), "aria-rowindex": ariaRowIndex, children: [_jsx("td", { className: classNames(tdClasses(0)), "aria-colindex": 1, children: _jsx("input", { className: classNames(inputClasses), name: checkboxLabel, "aria-label": checkboxLabel, type: "checkbox", checked: enabled, onChange: enabledChangeHandler }) }), _jsx("td", { className: classNames(tdClasses(1)), "aria-colindex": 2, children: columnLabel }), _jsx("td", { className: classNames(tdClasses(2)), "aria-colindex": 3, children: typeLabel }), _jsx("td", { className: classNames(tdClasses(3)), "aria-colindex": 4, children: _jsx("select", { name: opSelectLabel, "aria-label": opSelectLabel, disabled: !enabled, className: classNames.apply(void 0, __spreadArray(["form-select"], selectClasses, false)), value: currentScheme, onChange: handleSchemeChange, children: Object.keys(schemesToLabels).map(function (scheme) { return (_jsx("option", { value: scheme, children: schemesToLabels[scheme] }, scheme)); }) }) }), _jsx("td", { className: classNames(tdClasses(4)), "aria-colindex": 5, children: searchStringInputCellContents })] }));
+}
+export default FilterRow;

package/filtering/NumberFilterRow.d.ts

@@ -1,9 +1,14 @@
 import { FC } from "react";
 import { NumberFormFilterState } from "./types";
-interface NumberFilterRowProps {
+import { CommonFilterRowStyleProps } from "./FilterRow";
+export type NumberFilterRowProps = {
+    ariaRowIndex: number;
     columnLabel: string;
     filterState: NumberFormFilterState;
     setFilterState: (filterState: NumberFormFilterState) => void;
-}
+    schemeSelectClasses: string[];
+    enableInputClasses: string[];
+    numberInputClasses: string[];
+} & CommonFilterRowStyleProps;
 declare const NumberFilterRow: FC<NumberFilterRowProps>;
 export default NumberFilterRow;

package/filtering/NumberFilterRow.js

@@ -9,10 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { numberFilterSchemeNames, numberFilterSchemes, } from "../types";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { numberFilterSchemeNames, } from "./types";
+import FilterRow from "./FilterRow";
+import classNames from "classnames";
 var NumberFilterRow = function (_a) {
-    var columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState;
+    var ariaRowIndex = _a.ariaRowIndex, columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState, schemeSelectClasses = _a.schemeSelectClasses, enableInputClasses = _a.enableInputClasses, numberInputClasses = _a.numberInputClasses, tdClasses = _a.tdClasses, trClasses = _a.trClasses;
     var handleOpChange = function (_a) {
         var target = _a.target;
         setFilterState(__assign(__assign({}, filterState), { scheme: target.value }));
@@ -26,9 +28,8 @@ var NumberFilterRow = function (_a) {
         setFilterState(__assign(__assign({}, filterState), { inputValue: target.value }));
     };
     var enabled = filterState.enabled, scheme = filterState.scheme, inputValue = filterState.inputValue;
-    var checkboxLabel = "".concat(columnLabel, " Column Filter Toggle");
-    var opSelectLabel = "".concat(columnLabel, " Column Filter Operator Selection");
     var valueInputLabel = "".concat(columnLabel, " Column Filter Value");
-    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("input", { name: checkboxLabel, "aria-label": checkboxLabel, type: "checkbox", checked: enabled, onChange: handleEnabledChange }) }), _jsx("td", { children: columnLabel }), _jsx("td", { children: "Number" }), _jsx("td", { children: _jsx("select", { name: opSelectLabel, "aria-label": opSelectLabel, disabled: !enabled, className: "form-select", value: scheme, onChange: handleOpChange, children: numberFilterSchemes.map(function (scheme) { return (_jsx("option", { value: scheme, children: numberFilterSchemeNames[scheme] }, scheme)); }) }) }), _jsx("td", { children: _jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: "form-control", type: "number", required: enabled, disabled: !enabled, value: inputValue, onChange: handleNumInputValueChange }) })] }));
+    var searchStringInputCellContents = (_jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: classNames("form-control", numberInputClasses), type: "number", required: enabled, disabled: !enabled, value: inputValue, onChange: handleNumInputValueChange }));
+    return (_jsx(FilterRow, { ariaRowIndex: ariaRowIndex, columnLabel: columnLabel, typeLabel: "Number", enabled: enabled, enabledChangeHandler: handleEnabledChange, currentScheme: scheme, handleSchemeChange: handleOpChange, schemesToLabels: numberFilterSchemeNames, searchStringInputCellContents: searchStringInputCellContents, trClasses: trClasses, tdClasses: tdClasses, inputClasses: enableInputClasses, selectClasses: schemeSelectClasses }));
 };
 export default NumberFilterRow;

package/filtering/StringFilterRow.d.ts

@@ -1,9 +1,14 @@
 import { FC } from "react";
-import { StringFilterState } from "../types";
-interface StringFilterRowProps {
+import { CommonFilterRowStyleProps } from "./FilterRow";
+import { StringFilterState } from "./types";
+type StringFilterRowProps = {
+    ariaRowIndex: number;
     columnLabel: string;
     filterState: StringFilterState;
     setFilterState: (filterState: StringFilterState) => void;
-}
+    schemeSelectClasses: string[];
+    enableInputClasses: string[];
+    searchStringInputClasses: string[];
+} & CommonFilterRowStyleProps;
 declare const StringFilterRow: FC<StringFilterRowProps>;
 export default StringFilterRow;