@absreim/react-bootstrap-data-grid 1.2.2 → 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, 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[];
@@ -16,6 +13,9 @@ export interface GridProps {
     sortModel?: TableSortModel;
     filterModel?: FilterModel;
     selectModel?: SelectModel;
+    editModel?: EditModel;
+    caption?: string;
+    styleModel?: StyleModel;
 }
 declare const Grid: FC<GridProps>;
 export default Grid;

package/Grid.js

@@ -2,36 +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 "./FilterOptionsTable/FilterOptionsTable";
-import useFilterStateFromEditable from "./hooks/useFilterStateFromEditable";
-import useAugmentedRows from "./hooks/useAugmentedRows";
-import useSortedRows from "./hooks/useSortedRows";
-import useDisplayRows from "./hooks/useDisplayRows";
+import FilterOptionsTable from "./filtering/FilterOptionsTable";
+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;
+    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 displayRows = useDisplayRows(currentPageRows, cols);
-    var _b = useState(false), filterOptionsVisible = _b[0], setFilterOptionsVisible = _b[1];
+    var currentPageRows = useCurrentPageRows(sortedRows, pagination);
+    var showSelectCol = selectModel && selectModel.mode !== "row";
+    var ariaColIndexOffset = showSelectCol ? 1 : 0;
+    var displayRows = useDisplayRows(currentPageRows, cols, ariaColIndexOffset);
+    var _c = useState(false), filterOptionsVisible = _c[0], setFilterOptionsVisible = _c[1];
     var handleToggleFilterOptions = function () {
         setFilterOptionsVisible(!filterOptionsVisible);
     };
@@ -94,7 +92,6 @@ var Grid = function (_a) {
             deselectCallback: getDeselectHandler(index),
         };
     };
-    var showSelectCol = selectModel && selectModel.mode !== "row";
     var selectedSet = new Set();
     if (selectModel && selectModel.type === "multi") {
         selectModel.selected.forEach(function (value) { return selectedSet.add(value); });
@@ -106,7 +103,6 @@ var Grid = function (_a) {
     }
     var rowsAreSelectable = !!(selectModel && selectModel.mode !== "column");
     var getRowClickHandler = function (index) { return function (event) {
-        event.preventDefault();
         if (!rowsAreSelectable) {
             return;
         }
@@ -122,27 +118,44 @@ var Grid = function (_a) {
         }
         return String(selectedSet.has(index));
     };
-    // Once this component implements selection state, and if such interactivity is enabled, (conditionally) change the
-    // aria role to "grid".
-    // TODO: implement the above described features: conditionally changing aria role to grid
-    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: [_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));
-                                })] }) }), _jsx("tbody", { children: displayRows.map(function (row, index) { return (_jsxs("tr", { onClick: getRowClickHandler(row.origIndex), className: classNames({
-                                "table-active": selectedSet.has(row.origIndex),
-                            }), "aria-rowindex": index + 2, "data-rowindex": row.origIndex, "aria-selected": getAriaSelectedValue(row.origIndex), children: [showSelectCol && (_jsx("td", { children: _jsx(SelectionInput, { selected: selectedSet.has(row.origIndex), selectionInputModel: getSelectInputModel(row.origIndex, selectModel), selectCallback: getSelectHandler(row.origIndex) }) })), row.contents.map(function (value, index) { return (_jsx("td", { "aria-colindex": index + 1 + (showSelectCol ? 1 : 0), children: value }, 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 }))] }));
+    var getInputStrSubmitCallback = editModel &&
+        (function (origIndex) {
+            var indexSpecificCallback = editModel.getUpdateCallback(origIndex);
+            return function (inputStrs) {
+                var rowDef = inputStrsToRowDef(cols, inputStrs);
+                indexSpecificCallback(rowDef);
+            };
+        });
+    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

@@ -0,0 +1,16 @@
+import { FC } from "react";
+export interface EditControlsCellProps {
+    ariaColIndex: number;
+    beginEditingCallback: () => void;
+    cancelEditingCallback: () => void;
+    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

@@ -0,0 +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, 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

@@ -0,0 +1,20 @@
+import { FC, ReactNode } from "react";
+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;
+    children: ReactNode;
+    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

@@ -0,0 +1,67 @@
+"use client";
+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":
+            return dateToInputStr(value);
+        case "datetime":
+            return dateToDatetimeInputStr(value);
+        case "number":
+            return String(value);
+        default:
+            return value;
+    }
+};
+var colDataTypeToInputType = function (colDataType) {
+    switch (colDataType) {
+        case "date":
+            return "date";
+        case "datetime":
+            return "datetime-local";
+        case "number":
+            return "number";
+        default:
+            return "text";
+    }
+};
+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, 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 () {
+        var failedValidationFound = false;
+        var formValues = [];
+        for (var _i = 0, _a = Array.from(trRef.current.children); _i < _a.length; _i++) {
+            var rowChild = _a[_i];
+            if (!(rowChild instanceof HTMLTableCellElement)) {
+                console.warn("Found non-td element inside EditableRow");
+                continue;
+            }
+            for (var _b = 0, _c = Array.from(rowChild.children); _b < _c.length; _b++) {
+                var cellChild = _c[_b];
+                if (!(cellChild instanceof HTMLInputElement) ||
+                    cellChild.type === "checkbox" ||
+                    cellChild.type === "radio") {
+                    continue;
+                }
+                formValues.push(cellChild.value);
+                failedValidationFound =
+                    !cellChild.reportValidity() || failedValidationFound;
+                break; // Each cell should only have one input element
+            }
+        }
+        if (!failedValidationFound) {
+            updateCallback(formValues);
+            setIsEditing(false);
+        }
+    };
+    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, 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/inputStrsToRowDef.d.ts

@@ -0,0 +1,3 @@
+import { ColDef, RowDef } from "../types";
+declare const inputStrsToRowDef: (cols: ColDef[], inputStrs: string[]) => RowDef;
+export default inputStrsToRowDef;

package/editing/inputStrsToRowDef.js

@@ -0,0 +1,18 @@
+var inputStrsToRowDef = function (cols, inputStrs) {
+    var newRow = {};
+    inputStrs.forEach(function (value, index) {
+        var col = cols[index];
+        switch (col.type) {
+            case "string":
+                newRow[col.name] = value;
+                return;
+            case "number":
+                newRow[col.name] = Number(value);
+                return;
+            default:
+                newRow[col.name] = new Date(value);
+        }
+    });
+    return newRow;
+};
+export default inputStrsToRowDef;

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/{FilterOptionsTable → 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

@@ -0,0 +1,46 @@
+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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { dateFilterSchemeNames, } from "./types";
+import { nanoid } from "nanoid/non-secure";
+import FilterRow from "./FilterRow";
+import classNames from "classnames";
+var DateFilterRow = function (_a) {
+    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 }));
+    };
+    var handleEnabledChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { enabled: target.checked }));
+    };
+    var handleStartValueChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { startDate: target.value }));
+    };
+    var handleEndValueChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { endDate: target.value }));
+    };
+    var enabled = filterState.enabled, scheme = filterState.scheme, startDate = filterState.startDate, endDate = filterState.endDate;
+    var inputType = includeTime ? "datetime-local" : "date";
+    var inputId = useMemo(function () { return nanoid(); }, []);
+    var startDateInputId = "$startDate-".concat(inputId);
+    var endDateInputId = "$endDate-".concat(inputId);
+    var startDateInputLabel = "".concat(columnLabel, " Column Filter Start Date");
+    var endDateInputLabel = "".concat(columnLabel, " Column Filter End Date");
+    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/{FilterOptionsTable → 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/{FilterOptionsTable → 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;