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

package/Grid.js

@@ -5,7 +5,6 @@ import InternalGrid from "./InternalGrid";
 import ColHeaderCell from "./main/ColHeaderCell";
 import useCombinedPipeline from "./pipeline/useCombinedPipeline";
 import useGridSelectionFns from "./pipeline/useGridSelectionFns";
-import useUnwrappedGridStyles from "./pipeline/useUnwrappedGridStyles";
 import useGetInputStrSubmitCallback from "./pipeline/useGetInputStrSubmitCallback";
 import useAugFormattedRows from "./pipeline/useAugFormattedRows";
 import BodyRows from "./main/BodyRows";
@@ -21,7 +20,6 @@ var Grid = function (props) {
     });
     var _a = combinedPipelineOutput.sortedRowsOutput, sortColDef = _a.sortColDef, setSortColDef = _a.setSortColDef, sortingEnabled = _a.sortingEnabled, showSelectCol = combinedPipelineOutput.showSelectCol, displayRows = combinedPipelineOutput.displayRows;
     var gridSelectionFns = useGridSelectionFns(selectModel, rows);
-    var unwrappedStyles = useUnwrappedGridStyles(styleModel);
     var getInputStrSubmitCallback = useGetInputStrSubmitCallback(editModel, cols);
     var colNameToWidth = useMemo(function () {
         var map = {};
@@ -46,11 +44,10 @@ var Grid = function (props) {
         return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: ((_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _b === void 0 ? void 0 : _b.theadTh) &&
                 styleModel.mainTableStyleModel.theadTh(index), width: width }, name));
     });
-    var bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, unwrappedStyles: unwrappedStyles, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback }));
+    var bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback, tableStyleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel }));
     return (_jsx(InternalGrid, { gridProps: props, hooks: {
             pipelineOutput: combinedPipelineOutput,
             selectFns: gridSelectionFns,
-            unwrappedStyles: unwrappedStyles,
         }, slots: { colHeaderCells: colHeaderCells, bodyRows: bodyRows } }));
 };
 export default Grid;

package/InternalGrid.d.ts

@@ -2,19 +2,20 @@ import { FC, ReactNode } from "react";
 import { BaseGridProps } from "./types";
 import { UseCombinedPipelineHook } from "./pipeline/useCombinedPipeline";
 import { UseGridSelectionFnsHook } from "./pipeline/useGridSelectionFns";
-import { UseUnwrappedGridStylesHook } from "./pipeline/useUnwrappedGridStyles";
 export interface InternalGridProps {
     gridProps: BaseGridProps;
     hooks: {
         selectFns: UseGridSelectionFnsHook;
         pipelineOutput: UseCombinedPipelineHook;
-        unwrappedStyles: UseUnwrappedGridStylesHook;
     };
     slots: {
         colHeaderCells: ReactNode;
         bodyRows: ReactNode;
         prefixHeader?: ReactNode;
     };
+    classes?: {
+        headerRow?: string[];
+    };
 }
 declare const InternalGrid: FC<InternalGridProps>;
 export default InternalGrid;

package/InternalGrid.js

@@ -1,8 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import ToggleButton from "./main/ToggleButton";
-import FilterOptionsTable from "./filtering/FilterOptionsTable";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import SelectAllHeaderCell from "./selection/SelectAllHeaderCell";
 import Pagination from "./pagination/Pagination";
 import classNames from "classnames";
@@ -11,47 +9,51 @@ import ToolbarContainer from "./toolbar/ToolbarContainer";
 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 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 _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _o = _a.gridProps, rows = _o.rows, cols = _o.cols, pagination = _o.pagination, filterModel = _o.filterModel, selectModel = _o.selectModel, editModel = _o.editModel, caption = _o.caption, styleModel = _o.styleModel, displayMode = _o.displayMode, allowExport = _o.allowExport, _p = _a.hooks, pipelineOutput = _p.pipelineOutput, selectFns = _p.selectFns, _q = _a.slots, colHeaderCells = _q.colHeaderCells, bodyRows = _q.bodyRows, prefixHeader = _q.prefixHeader, classes = _a.classes;
+    var normalizedTableFilterModel = pipelineOutput.normalizedTableFilterModel, filteredRows = pipelineOutput.filteredRows, filterState = pipelineOutput.filterState, sortedRows = pipelineOutput.sortedRowsOutput.sortedRows, _r = pipelineOutput.currentPageRowsOutput, paginatedRows = _r.paginatedRows, normalizedModel = _r.normalizedModel, showSelectCol = pipelineOutput.showSelectCol;
     var exportFnInfo = useExportFn({
         rows: rows,
         cols: cols,
         filteredRows: filterModel && filteredRows,
         currentPageRows: pagination && paginatedRows,
     });
-    var toolbarInterfaceParams = useMemo(function () { return ({
-        filtering: useToolbar && filterState && filterModel && normalizedTableFilterModel
-            ? {
-                filterState: filterState,
-                setFilterState: normalizedTableFilterModel.setTableFilterState,
-                caption: filterModel.filterTableCaption,
-                styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
-            }
-            : undefined,
-        exporting: useToolbar
-            ? { exportFnInfo: exportFnInfo, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel }
-            : undefined,
-    }); }, [
+    var showToolbar = filterModel || allowExport;
+    var toolbarPropGen = useMemo(function () { return function (closeUiCallback) {
+        return {
+            filtering: filterState && filterModel && normalizedTableFilterModel
+                ? {
+                    filterState: filterState,
+                    setFilterState: normalizedTableFilterModel.setTableFilterState,
+                    caption: filterModel.filterTableCaption,
+                    styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
+                    closeFormCallback: closeUiCallback,
+                }
+                : undefined,
+            exporting: allowExport
+                ? {
+                    exportFnInfo: exportFnInfo,
+                    styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel,
+                    closeCallback: closeUiCallback,
+                }
+                : undefined,
+        };
+    }; }, [
+        allowExport,
         exportFnInfo,
         filterModel,
         filterState,
         normalizedTableFilterModel,
         styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel,
         styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
-        useToolbar,
     ]);
-    var toolbarInterfaces = useInterfaces(toolbarInterfaceParams);
-    var handleToggleFilterOptions = function () {
-        setFilterOptionsVisible(!filterOptionsVisible);
-    };
+    var toolbarInterfaces = useInterfaces(toolbarPropGen);
     var rowsAreSelectable = selectFns.rowsAreSelectable, selectionInfo = selectFns.selectionInfo, selectAllOnClick = selectFns.selectAllOnClick;
-    var unwrappedTableModel = unwrappedStyles.unwrappedTableModel, unwrappedAdditionalStyleModel = unwrappedStyles.unwrappedAdditionalStyleModel;
-    var mainTable = (_jsxs("table", { className: classNames("table", {
+    var mainTable = (_jsxs("table", { className: classNames({
             "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 })] }));
-    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 }))] })] }));
+        }, ((_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _b === void 0 ? void 0 : _b.table) || "table"), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames((_c = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _c === void 0 ? void 0 : _c.caption), children: caption })), _jsx("thead", { className: classNames((_d = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _d === void 0 ? void 0 : _d.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames((_e = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _e === void 0 ? void 0 : _e.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, customClasses: (_f = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _f === void 0 ? void 0 : _f.rowSelectColTh, colIndexOffset: prefixHeader ? 1 : 0 })), colHeaderCells, editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames((_g = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _g === void 0 ? void 0 : _g.editColTh), style: getWidthStyle(editModel === null || editModel === void 0 ? void 0 : editModel.editColWidth), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(classNames((_h = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _h === void 0 ? void 0 : _h.tbody)), children: bodyRows })] }));
+    return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames((_j = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _j === void 0 ? void 0 : _j.topLevelDiv), children: [showToolbar && (_jsx(ToolbarContainer, { interfaceGen: toolbarInterfaces, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbarStyleModel })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames((_k = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _k === void 0 ? void 0 : _k.tableAndPaginationDiv), children: [_jsx("div", { "data-testid": "rbdg-table-div", className: classNames(((_l = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _l === void 0 ? void 0 : _l.tableDiv) ||
+                            "table-responsive"), children: mainTable }), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: (_m = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _m === void 0 ? void 0 : _m.paginationUiDiv }))] })] }));
 };
 export default InternalGrid;

package/editing/EditControlsCell.d.ts

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

package/editing/EditControlsCell.js

@@ -6,14 +6,6 @@ var stopPropagationWrapper = function (fn) { return function (event) {
 }; };
 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", { "aria-label": "Cancel", className: classNames("btn", cancelButtonClasses.length === 0
-                            ? ["btn-secondary"]
-                            : cancelButtonClasses), onClick: stopPropagationWrapper(cancelEditingCallback), title: "Cancel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z" }) }) }), _jsx("button", { "aria-label": "Save", className: classNames("btn", saveButtonClasses.length === 0
-                            ? ["btn-primary"]
-                            : saveButtonClasses), onClick: stopPropagationWrapper(saveCallback), title: "Save", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M12 2h-2v3h2z" }), _jsx("path", { d: "M1.5 0A1.5 1.5 0 0 0 0 1.5v13A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5V2.914a1.5 1.5 0 0 0-.44-1.06L14.147.439A1.5 1.5 0 0 0 13.086 0zM4 6a1 1 0 0 1-1-1V1h10v4a1 1 0 0 1-1 1zM3 9h10a1 1 0 0 1 1 1v5H2v-5a1 1 0 0 1 1-1" })] }) })] })) : (_jsxs(_Fragment, { children: [deleteCallback && (_jsx("button", { "aria-label": "Delete", className: classNames("btn", deleteButtonClasses.length === 0
-                            ? ["btn-secondary"]
-                            : deleteButtonClasses), onClick: stopPropagationWrapper(deleteCallback), title: "Delete", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" }) }) })), _jsx("button", { "aria-label": "Edit", className: classNames("btn", startButtonClasses.length === 0
-                            ? ["btn-primary"]
-                            : startButtonClasses), onClick: stopPropagationWrapper(beginEditingCallback), title: "Edit", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" }), _jsx("path", { fillRule: "evenodd", d: "M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z" })] }) })] })) }) }));
+    return (_jsx("td", { "aria-colindex": ariaColIndex, className: classNames(editControlsCellClasses), children: _jsx("div", { className: "hstack gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { "aria-label": "Cancel", className: classNames(cancelButtonClasses || ["btn", "btn-secondary"]), onClick: stopPropagationWrapper(cancelEditingCallback), title: "Cancel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z" }) }) }), _jsx("button", { "aria-label": "Save", className: classNames(saveButtonClasses || ["btn", "btn-primary"]), onClick: stopPropagationWrapper(saveCallback), title: "Save", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M12 2h-2v3h2z" }), _jsx("path", { d: "M1.5 0A1.5 1.5 0 0 0 0 1.5v13A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5V2.914a1.5 1.5 0 0 0-.44-1.06L14.147.439A1.5 1.5 0 0 0 13.086 0zM4 6a1 1 0 0 1-1-1V1h10v4a1 1 0 0 1-1 1zM3 9h10a1 1 0 0 1 1 1v5H2v-5a1 1 0 0 1 1-1" })] }) })] })) : (_jsxs(_Fragment, { children: [deleteCallback && (_jsx("button", { "aria-label": "Delete", className: classNames(deleteButtonClasses || ["btn", "btn-secondary"]), onClick: stopPropagationWrapper(deleteCallback), title: "Delete", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" }) }) })), _jsx("button", { "aria-label": "Edit", className: classNames(startButtonClasses || ["btn", "btn-primary"]), onClick: stopPropagationWrapper(beginEditingCallback), title: "Edit", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" }), _jsx("path", { fillRule: "evenodd", d: "M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z" })] }) })] })) }) }));
 };
 export default EditControlsCell;

package/editing/EditableRow.d.ts

@@ -9,13 +9,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[];
+    dataCellClasses: (colIndex: number) => string[] | null;
+    dataCellInputClasses: (colIndex: number) => string[] | null;
+    editCellClasses: string[] | null;
+    deleteButtonClasses: string[] | null;
+    cancelButtonClasses: string[] | null;
+    startButtonClasses: string[] | null;
+    saveButtonClasses: string[] | null;
     editControlCellStyles?: CSSProperties;
 };
 declare const EditableRow: FC<EditableRowProps>;

package/editing/EditableRow.js

@@ -62,7 +62,7 @@ var EditableRow = function (_a) {
     };
     return (_jsxs("tr", { ref: trRef, onClick: onClick, className: className, "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, "data-rowid": dataRowId, children: [children, cellData.map(function (_a, index) {
                 var type = _a.type, value = _a.value, formattedValue = _a.formattedValue, label = _a.label, width = _a.width;
-                return (_jsx("td", { "aria-colindex": index + ariaColIndexOffset + 1, className: classNames(dataCellClasses(index)), style: getWidthStyle(width), children: isEditing && !!updateCallback ? (_jsx("input", { "aria-label": label, name: "editable-cell-input-".concat(dataRowId, "-").concat(index), className: classNames("form-control", dataCellInputClasses(index)), type: colDataTypeToInputType(type), defaultValue: initValueToFormValue(value, type), required: type !== "string" })) : (formattedValue) }, index));
+                return (_jsx("td", { "aria-colindex": index + ariaColIndexOffset + 1, className: classNames(dataCellClasses(index)), style: getWidthStyle(width), children: isEditing && !!updateCallback ? (_jsx("input", { "aria-label": label, name: "editable-cell-input-".concat(dataRowId, "-").concat(index), className: classNames(dataCellInputClasses(index) || "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, editControlsCellClasses: editCellClasses, startButtonClasses: startButtonClasses, deleteButtonClasses: deleteButtonClasses, cancelButtonClasses: cancelButtonClasses, saveButtonClasses: saveButtonClasses, style: editControlCellStyles }))] }));
 };
 export default EditableRow;

package/export/ExportForm.d.ts

@@ -3,6 +3,7 @@ import { FC } from "react";
 import { ExportFormStyleModel } from "../styling/types";
 export interface ExportFormProps {
     exportFnInfo: ExportFnInfo;
+    closeCallback: () => void;
     styleModel?: ExportFormStyleModel;
 }
 declare const ExportForm: FC<ExportFormProps>;

package/export/ExportForm.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
 import classNames from "classnames";
 var ExportForm = function (_a) {
-    var _b = _a.exportFnInfo, exportFn = _b.exportFn, formattersExist = _b.formattersExist, paginationEnabled = _b.paginationEnabled, filteringEnabled = _b.filteringEnabled, rowCounts = _b.rowCounts, styleModel = _a.styleModel;
+    var _b = _a.exportFnInfo, exportFn = _b.exportFn, formattersExist = _b.formattersExist, paginationEnabled = _b.paginationEnabled, filteringEnabled = _b.filteringEnabled, rowCounts = _b.rowCounts, closeCallback = _a.closeCallback, styleModel = _a.styleModel;
     var formId = useId();
     var _c = useState({
         stage: "original",
@@ -82,7 +82,7 @@ var ExportForm = function (_a) {
     var radioContainerClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.radioContainer) || ["form-check"]);
     var radioInputClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.radioInput) || ["form-check-input"]);
     var radioLabelClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.radioLabel) || ["form-check-label"]);
-    var submitButtonClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.submitButton) || ["btn", "btn-secondary"]);
+    var submitButtonClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.submitButton) || ["btn", "btn-primary"]);
     return (_jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("fieldset", { children: [_jsx("legend", { className: legendClasses, children: "Choose data to export" }), stageOptions.map(function (_a) {
                         var value = _a.value, label = _a.label, disabled = _a.disabled;
                         return (_jsxs("div", { className: radioContainerClasses, children: [_jsx("input", { className: radioInputClasses, type: "radio", id: "".concat(formId, "-").concat(value), value: value, checked: formState.stage === value, onChange: getChangeHandler("stage", value), disabled: disabled }), _jsx("label", { className: radioLabelClasses, htmlFor: "".concat(formId, "-").concat(value), children: label })] }, value));
@@ -92,6 +92,6 @@ var ExportForm = function (_a) {
                     })] }), _jsxs("fieldset", { children: [_jsx("legend", { className: legendClasses, children: "Choose the file type" }), fileTypeOptions.map(function (_a) {
                         var fileType = _a.fileType, label = _a.label;
                         return (_jsxs("div", { className: radioContainerClasses, children: [_jsx("input", { className: radioInputClasses, type: "radio", id: "".concat(formId, "-").concat(fileType), value: fileType, checked: formState.fileType === fileType, onChange: getChangeHandler("fileType", fileType) }), _jsx("label", { className: radioLabelClasses, htmlFor: "".concat(formId, "-").concat(fileType), children: label })] }, fileType));
-                    })] }), _jsx("button", { type: "submit", className: submitButtonClasses, children: "Submit" })] }));
+                    })] }), _jsxs("div", { className: "hstack justify-content-end gap-2", children: [_jsx("button", { className: "btn btn-secondary", onClick: closeCallback, type: "button", children: "Cancel" }), _jsx("button", { type: "submit", className: submitButtonClasses, children: "Submit" })] })] }));
 };
 export default ExportForm;

package/filtering/DateFilterRow.d.ts

@@ -7,10 +7,10 @@ export type DateFilterRowProps = {
     columnLabel: string;
     filterState: DateFormFilterState;
     setFilterState: (filterState: DateFormFilterState) => void;
-    schemeSelectClasses: string[];
-    enableInputClasses: string[];
-    startDateInputClasses: string[];
-    endDateInputClasses: string[];
+    schemeSelectClasses: string[] | null | undefined;
+    enableInputClasses: string[] | null | undefined;
+    startDateInputClasses: string[] | null | undefined;
+    endDateInputClasses: string[] | null | undefined;
 } & CommonFilterRowStyleProps;
 declare const DateFilterRow: FC<DateFilterRowProps>;
 export default DateFilterRow;

package/filtering/DateFilterRow.js

@@ -39,7 +39,7 @@ var DateFilterRow = function (_a) {
     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 })] }))] }));
+    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(startDateInputClasses || "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: classNames(endDateInputClasses || "form-control"), 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

@@ -4,6 +4,7 @@ import { FilterInputTableStyleModel } from "../styling/types";
 export interface FilterOptionsTableProps {
     filterState: TableFilterState;
     setFilterState: (filterState: EditableTableFilterState) => void;
+    closeFormCallback: () => void;
     caption?: string;
     styleModel?: FilterInputTableStyleModel;
 }

package/filtering/FilterOptionsTable.js

@@ -9,23 +9,13 @@ 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 { useMemo, useState } from "react";
+import { useState } from "react";
 import StringFilterRow from "./StringFilterRow";
 import NumberFilterRow from "./NumberFilterRow";
 import useFilterFormState from "./useFilterFormState";
 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];
@@ -73,10 +63,9 @@ var convertFilterFormStateToEditableState = function (filterFormState) {
     }, {});
 };
 var FilterOptionsTable = function (_a) {
-    var filterState = _a.filterState, setFilterState = _a.setFilterState, caption = _a.caption, styleModel = _a.styleModel;
+    var filterState = _a.filterState, setFilterState = _a.setFilterState, caption = _a.caption, styleModel = _a.styleModel, closeFormCallback = _a.closeFormCallback;
     var formFilterState = useFilterFormState(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, index) {
             function getColStateSetter(colName) {
@@ -89,19 +78,26 @@ var FilterOptionsTable = function (_a) {
             var colFilterState = formState[colName];
             switch (colFilterState.type) {
                 case "string": {
-                    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);
+                    return (_jsx(StringFilterRow, { ariaRowIndex: index + 2, columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.schemeSelectionInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.schemeSelectionInput(index)), enableInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.enablementInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.enablementInput(index)), searchStringInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.searchStringInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.searchStringInput(index)), trClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTr) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTr(index)), tdClasses: function (colIndex) {
+                            return (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd(index, colIndex));
                         } }, colName));
                 }
                 case "number": {
-                    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);
+                    return (_jsx(NumberFilterRow, { ariaRowIndex: index + 2, columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.schemeSelectionInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.schemeSelectionInput(index)), enableInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.enablementInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.enablementInput(index)), numberInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.numberInput) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.numberInput(index)), trClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTr) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTr(index)), tdClasses: function (colIndex) {
+                            return (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd(index, colIndex));
                         } }, colName));
                 }
                 default: {
                     // date or datetime
-                    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);
+                    return (_jsx(DateFilterRow, { ariaRowIndex: index + 2, includeTime: colFilterState.type === "datetime", columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.schemeSelectionInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.schemeSelectionInput(index)), enableInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.enablementInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.enablementInput(index)), startDateInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.startDateInput) && styleModel.startDateInput(index), endDateInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.endDateInput) && styleModel.endDateInput(index), trClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTr) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTr(index)), tdClasses: function (colIndex) {
+                            return (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd(index, colIndex));
                         } }, colName));
                 }
             }
@@ -111,7 +107,8 @@ var FilterOptionsTable = function (_a) {
         event.preventDefault();
         var editableTableFilterState = convertFilterFormStateToEditableState(formState);
         setFilterState(editableTableFilterState);
+        closeFormCallback();
     };
-    return (_jsxs("form", { onSubmit: onSubmit, className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.form), 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" })] }));
+    return (_jsxs("form", { onSubmit: onSubmit, className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.form), children: [_jsxs("table", { className: classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.table) || "table"), children: [caption && (_jsx("caption", { className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.caption), children: caption })), _jsx("thead", { className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.thead), children: _jsx("tr", { className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.theadTr), children: ["Enabled", "Column", "Type", "Operator", "Value"].map(function (colName, index) { return (_jsx("th", { className: classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.theadTh) && styleModel.theadTh(index)), children: colName }, index)); }) }) }), _jsx("tbody", { className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbody), children: getRows() })] }), _jsxs("div", { className: "hstack justify-content-end gap-2", children: [_jsx("button", { className: "btn btn-secondary", onClick: closeFormCallback, type: "button", children: "Cancel" }), _jsx("button", { className: classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.submitButton) || ["btn", "btn-primary"]), type: "submit", children: "Submit" })] })] }));
 };
 export default FilterOptionsTable;

package/filtering/FilterRow.d.ts

@@ -9,10 +9,10 @@ export interface FilterRowProps<FilterScheme extends string> {
     handleSchemeChange: ChangeEventHandler<HTMLSelectElement>;
     schemesToLabels: Record<FilterScheme, string>;
     searchStringInputCellContents: ReactNode;
-    trClasses: string[];
-    tdClasses: (colIndex: number) => string[];
-    inputClasses: string[];
-    selectClasses: string[];
+    trClasses: string[] | null | undefined;
+    tdClasses: (colIndex: number) => (string[] | null) | undefined;
+    inputClasses: string[] | null | undefined;
+    selectClasses: string[] | null | undefined;
 }
 export type CommonFilterRowStyleProps = Pick<FilterRowProps<string>, "trClasses" | "tdClasses">;
 export declare function FilterRow<FilterScheme extends string = string>(props: FilterRowProps<FilterScheme>): ReactNode;

package/filtering/FilterRow.js

@@ -1,18 +1,9 @@
-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 })] }));
+    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(selectClasses || "form-select"), 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

@@ -6,9 +6,9 @@ export type NumberFilterRowProps = {
     columnLabel: string;
     filterState: NumberFormFilterState;
     setFilterState: (filterState: NumberFormFilterState) => void;
-    schemeSelectClasses: string[];
-    enableInputClasses: string[];
-    numberInputClasses: string[];
+    schemeSelectClasses: string[] | null | undefined;
+    enableInputClasses: string[] | null | undefined;
+    numberInputClasses: string[] | null | undefined;
 } & CommonFilterRowStyleProps;
 declare const NumberFilterRow: FC<NumberFilterRowProps>;
 export default NumberFilterRow;

package/filtering/NumberFilterRow.js

@@ -29,7 +29,7 @@ var NumberFilterRow = function (_a) {
     };
     var enabled = filterState.enabled, scheme = filterState.scheme, inputValue = filterState.inputValue;
     var valueInputLabel = "".concat(columnLabel, " Column Filter Value");
-    var searchStringInputCellContents = (_jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: classNames("form-control", numberInputClasses), type: "number", required: enabled, disabled: !enabled, value: inputValue, onChange: handleNumInputValueChange }));
+    var searchStringInputCellContents = (_jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: classNames(numberInputClasses || "form-control"), 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

@@ -6,9 +6,9 @@ type StringFilterRowProps = {
     columnLabel: string;
     filterState: StringFilterState;
     setFilterState: (filterState: StringFilterState) => void;
-    schemeSelectClasses: string[];
-    enableInputClasses: string[];
-    searchStringInputClasses: string[];
+    schemeSelectClasses: string[] | null | undefined;
+    enableInputClasses: string[] | null | undefined;
+    searchStringInputClasses: string[] | null | undefined;
 } & CommonFilterRowStyleProps;
 declare const StringFilterRow: FC<StringFilterRowProps>;
 export default StringFilterRow;

package/filtering/StringFilterRow.js

@@ -29,7 +29,7 @@ var StringFilterRow = function (_a) {
     };
     var enabled = filterState.enabled, scheme = filterState.scheme, searchString = filterState.searchString;
     var valueInputLabel = "".concat(columnLabel, " Column Filter Value");
-    var searchStringInputCellContents = (_jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: classNames("form-control", searchStringInputClasses), required: enabled, disabled: !enabled, value: searchString, onChange: handleSearchStringChange }));
+    var searchStringInputCellContents = (_jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: classNames(searchStringInputClasses || "form-control"), required: enabled, disabled: !enabled, value: searchString, onChange: handleSearchStringChange }));
     return (_jsx(FilterRow, { ariaRowIndex: ariaRowIndex, columnLabel: columnLabel, typeLabel: "String", enabled: enabled, enabledChangeHandler: handleEnabledChange, currentScheme: scheme, handleSchemeChange: handleOpChange, schemesToLabels: stringFilterSchemeNames, searchStringInputCellContents: searchStringInputCellContents, trClasses: trClasses, tdClasses: tdClasses, inputClasses: enableInputClasses, selectClasses: schemeSelectClasses }));
 };
 export default StringFilterRow;

package/main/BodyRows.d.ts

@@ -1,21 +1,22 @@
-import { AugFormattedRow } from "../types";
+import { AugFormattedRow, RowId } from "../types";
 import { FC, ReactNode } from "react";
 import { UseGridSelectionFnsHook } from "../pipeline/useGridSelectionFns";
-import { UseUnwrappedGridStylesHook } from "../pipeline/useUnwrappedGridStyles";
 import { UseCombinedPipelineHook } from "../pipeline/useCombinedPipeline";
 import { SelectModel } from "../selection/types";
 import { EditModel } from "../editing/types";
 import { UseGetInputStrSubmitCallbackHook } from "../pipeline/useGetInputStrSubmitCallback";
+import { TableStyleModel } from "../styling/types";
 interface BodyRowsProps {
     augFormattedRows: AugFormattedRow[];
     gridSelectionFns: UseGridSelectionFnsHook;
-    unwrappedStyles: UseUnwrappedGridStylesHook;
+    tableStyleModel: TableStyleModel | undefined;
     combinedPipelineOutput: UseCombinedPipelineHook;
     selectModel: SelectModel | undefined;
     editModel: EditModel | undefined;
     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,31 @@ 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, tableStyleModel = _a.tableStyleModel, _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) {
-                return unwrappedTableModel.tbodyTd(row.id, index, colIndex);
+            }, (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTr) && (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.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 (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTd)
+                    ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTd(row.id, index, colIndex)
+                    : null;
             }, 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));
+                return (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTdInput)
+                    ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTdInput(row.id, index, colIndex)
+                    : null;
+            }, editCellClasses: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTd)
+                ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTd(row.id, index)
+                : null, saveButtonClasses: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editSaveButton)
+                ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editSaveButton(row.id, index)
+                : null, deleteButtonClasses: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editDeleteButton)
+                ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editDeleteButton(row.id, index)
+                : null, startButtonClasses: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editStartButton)
+                ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editStartButton(row.id, index)
+                : null, cancelButtonClasses: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editCancelButton)
+                ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editCancelButton(row.id, index)
+                : null, children: [renderPrefixCells && renderPrefixCells(row), showSelectCol && (_jsx("td", { className: classNames((tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTd) &&
+                        (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.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: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectInput) &&
+                            (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.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.1",
+  "version": "3.0.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",

package/pagination/Pagination.d.ts

@@ -3,7 +3,7 @@ import { NormalizedPaginationModel } from "./types";
 export interface PaginationProps {
     normalizedModel: NormalizedPaginationModel;
     prePagingNumRows: number;
-    containerDivClasses: string[];
+    containerDivClasses: string[] | undefined;
 }
 declare const Pagination: FC<PaginationProps>;
 export default Pagination;

package/pagination/Pagination.js

@@ -17,8 +17,11 @@ var Pagination = function (_a) {
             setCurrentPage(maxPages);
         }
     };
-    return (_jsxs("div", { "data-testid": "pagination ui container div", className: classNames(containerDivClasses.length > 0
-            ? containerDivClasses
-            : ["d-flex", "justify-content-end", "gap-2", "px-2"]), children: [_jsx(PageSizeSelector, { componentSize: componentSize, pageSizeOptions: pageSizeOptions, pageSizeIndex: pageSizeIndex, handleSetPageSize: pageIndexAwarePageSizeSetter }), _jsx(PageSelector, { numPages: numPages, pageNum: currentPage, numButtons: maxPageButtons, setPageNum: setCurrentPage, size: componentSize, ariaLabel: pageSelectorAriaLabel, alignment: pageSelectorJustifyContent })] }));
+    return (_jsxs("div", { "data-testid": "pagination ui container div", className: classNames(containerDivClasses || [
+            "d-flex",
+            "justify-content-end",
+            "gap-2",
+            "px-2",
+        ]), children: [_jsx(PageSizeSelector, { componentSize: componentSize, pageSizeOptions: pageSizeOptions, pageSizeIndex: pageSizeIndex, handleSetPageSize: pageIndexAwarePageSizeSetter }), _jsx(PageSelector, { numPages: numPages, pageNum: currentPage, numButtons: maxPageButtons, setPageNum: setCurrentPage, size: componentSize, ariaLabel: pageSelectorAriaLabel, alignment: pageSelectorJustifyContent })] }));
 };
 export default Pagination;

package/pagination/types.d.ts

@@ -18,5 +18,5 @@ export type UncontrolledPaginationModel = PaginationOptions & {
     startingPageSizeIndex?: number;
     startingCurrentPage?: number;
 };
-export type GridPaginationState = ControlledPaginationModel | UncontrolledPaginationModel;
+export type PaginationModel = ControlledPaginationModel | UncontrolledPaginationModel;
 export type NormalizedPaginationModel = Required<Omit<ControlledPaginationModel, "type" | "pageSelectorAriaLabel" | "pageSelectorJustifyContent">> & Pick<ControlledPaginationModel, "pageSelectorAriaLabel" | "pageSelectorJustifyContent">;

package/pipeline/useCombinedPipeline/useCurrentPageRows.d.ts

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

package/selection/SelectAllHeaderCell.d.ts

@@ -4,7 +4,7 @@ interface SelectAllHeaderCellProps {
     onClick: () => void;
     selectionInfo: SelectionInfo;
     totalRows: number;
-    additionalClasses?: string[];
+    customClasses?: string[];
     style?: CSSProperties;
     colIndexOffset?: number;
 }

package/selection/SelectAllHeaderCell.js

@@ -41,15 +41,13 @@ var getCheckboxState = function (selectionInfo, noRows) {
     return disabledState;
 };
 var SelectAllHeaderCell = function (_a) {
-    var onClick = _a.onClick, selectionInfo = _a.selectionInfo, totalRows = _a.totalRows, additionalClasses = _a.additionalClasses, style = _a.style, colIndexOffset = _a.colIndexOffset;
+    var onClick = _a.onClick, selectionInfo = _a.selectionInfo, totalRows = _a.totalRows, customClasses = _a.customClasses, style = _a.style, colIndexOffset = _a.colIndexOffset;
     var noRows = totalRows === 0;
     var _b = getCheckboxState(selectionInfo, noRows), indeterminate = _b.indeterminate, checked = _b.checked, disabled = _b.disabled, description = _b.description;
     var ref = useRef(null);
     useEffect(function () {
         ref.current.indeterminate = indeterminate;
     }, [indeterminate]);
-    return (_jsx("th", { style: style, "aria-colindex": 1 + (colIndexOffset || 0), title: description, "aria-description": description, className: classNames({
-            "btn-primary": !additionalClasses || additionalClasses.length === 0,
-        }, additionalClasses || []), children: _jsx("input", { type: "checkbox", checked: checked, ref: ref, disabled: disabled, "aria-label": description, onChange: onClick }) }));
+    return (_jsx("th", { style: style, "aria-colindex": 1 + (colIndexOffset || 0), title: description, "aria-description": description, className: classNames(customClasses || "btn-primary"), children: _jsx("input", { tabIndex: 0, type: "checkbox", checked: checked, ref: ref, disabled: disabled, "aria-label": description, onChange: onClick }) }));
 };
 export default SelectAllHeaderCell;

package/selection/SelectionInput.d.ts

@@ -13,7 +13,8 @@ export interface SelectionInputProps {
     selected: boolean;
     selectionInputModel: SelectionInputModel;
     selectCallback: () => void;
-    additionalClasses?: string[];
+    additionalClasses?: string[] | null;
+    index: number;
 }
 declare const SelectionInput: FC<SelectionInputProps>;
 export default SelectionInput;

package/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/styling/types.d.ts

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

package/toolbar/ToolbarContainer.d.ts

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

package/toolbar/ToolbarContainer.js

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

package/toolbar/types.d.ts

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

package/toolbar/useInterfaces.d.ts

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

package/toolbar/useInterfaces.js

@@ -13,11 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import FilterOptionsTable from "../filtering/FilterOptionsTable";
 import { useMemo } from "react";
 import ExportForm from "../export/ExportForm";
-var useInterfaces = function (_a) {
-    var filtering = _a.filtering, exporting = _a.exporting;
-    return useMemo(function () { return ({
-        filtering: filtering ? _jsx(FilterOptionsTable, __assign({}, filtering)) : undefined,
-        exporting: exporting ? _jsx(ExportForm, __assign({}, exporting)) : undefined,
-    }); }, [exporting, filtering]);
+var useInterfaces = function (gen) {
+    return useMemo(function () { return function (closeCallback) {
+        var props = gen(closeCallback);
+        var exporting = props.exporting, filtering = props.filtering;
+        return {
+            filtering: filtering ? (_jsx(FilterOptionsTable, __assign({}, filtering))) : undefined,
+            exporting: exporting ? _jsx(ExportForm, __assign({}, exporting)) : undefined,
+        };
+    }; }, [gen]);
 };
 export default useInterfaces;

package/types.d.ts

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

package/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;

package/pipeline/useUnwrappedGridStyles.d.ts

@@ -1,7 +0,0 @@
-import { AdditionalComponentsStyleModel, StyleModel, TableStyleModel } from "../styling/types";
-export interface UseUnwrappedGridStylesHook {
-    unwrappedTableModel: Required<TableStyleModel>;
-    unwrappedAdditionalStyleModel: Required<AdditionalComponentsStyleModel>;
-}
-declare const UseUnwrappedGridStyles: (styleModel: StyleModel | undefined) => UseUnwrappedGridStylesHook;
-export default UseUnwrappedGridStyles;

package/pipeline/useUnwrappedGridStyles.js

@@ -1,17 +0,0 @@
-import { useMemo } from "react";
-import { unwrapAdditionalComponentsStyleModel, unwrapTableStyleModel, } from "../styling/styleModelUnwrappers";
-var UseUnwrappedGridStyles = function (styleModel) {
-    // To give the developer the ability to specify between removing existing styles
-    // and simply adding additional ones, we should migrate off of this "unwrapped"
-    // design over time and instead apply logic based on the original params that
-    // can be undefined.
-    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 {
-        unwrappedTableModel: unwrappedTableModel,
-        unwrappedAdditionalStyleModel: unwrappedAdditionalStyleModel,
-    };
-};
-export default UseUnwrappedGridStyles;

package/styling/styleModelUnwrappers.d.ts

@@ -1,4 +0,0 @@
-import { AdditionalComponentsStyleModel, FilterInputTableStyleModel, TableStyleModel } from "./types";
-export declare const unwrapTableStyleModel: (tableStyleModel: TableStyleModel | undefined) => Required<TableStyleModel>;
-export declare const unwrapFilterInputTableStyleModel: (filterTableStyleModel: FilterInputTableStyleModel | undefined) => Required<FilterInputTableStyleModel>;
-export declare const unwrapAdditionalComponentsStyleModel: (styleModel: AdditionalComponentsStyleModel | undefined) => Required<AdditionalComponentsStyleModel>;

package/styling/styleModelUnwrappers.js

@@ -1,58 +0,0 @@
-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);
-};
-var unwrapSharedStyleModel = function (sharedStyleModel) { return ({
-    table: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.table) || [],
-    tbody: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.tbody) || [],
-    thead: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.thead) || [],
-    theadTr: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.theadTr) || [],
-    theadTh: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.theadTh) ? sharedStyleModel.theadTh : function () { return []; },
-    caption: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.caption) || [],
-}); };
-export var unwrapTableStyleModel = function (tableStyleModel) { return (__assign(__assign({}, unwrapSharedStyleModel(tableStyleModel)), { tbodyTr: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTr) ? tableStyleModel.tbodyTr : function () { return []; }, tbodyTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTd) ? tableStyleModel.tbodyTd : function () { return []; }, tbodyTdInput: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTdInput)
-        ? tableStyleModel.tbodyTdInput
-        : function () { return []; }, editColTh: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTh) || [], editColTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTd) ? tableStyleModel.editColTd : function () { return []; }, editCancelButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editCancelButton)
-        ? tableStyleModel.editCancelButton
-        : function () { return []; }, editDeleteButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editDeleteButton)
-        ? tableStyleModel.editDeleteButton
-        : function () { return []; }, editSaveButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editSaveButton)
-        ? tableStyleModel.editSaveButton
-        : function () { return []; }, editStartButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editStartButton)
-        ? tableStyleModel.editStartButton
-        : function () { return []; }, rowSelectColTh: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTh) || [], rowSelectColTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTd)
-        ? tableStyleModel.rowSelectColTd
-        : function () { return []; }, rowSelectInput: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectInput)
-        ? tableStyleModel.rowSelectInput
-        : function () { return []; } })); };
-export var unwrapFilterInputTableStyleModel = function (filterTableStyleModel) { return (__assign(__assign({}, unwrapSharedStyleModel(filterTableStyleModel)), { tbodyTr: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTr)
-        ? filterTableStyleModel.tbodyTr
-        : function () { return []; }, tbodyTd: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTd)
-        ? filterTableStyleModel.tbodyTd
-        : function () { return []; }, enablementInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.enablementInput)
-        ? filterTableStyleModel.enablementInput
-        : function () { return []; }, schemeSelectionInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.schemeSelectionInput)
-        ? filterTableStyleModel.schemeSelectionInput
-        : function () { return []; }, searchStringInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.searchStringInput)
-        ? filterTableStyleModel.searchStringInput
-        : function () { return []; }, numberInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.numberInput)
-        ? filterTableStyleModel.numberInput
-        : function () { return []; }, startDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.startDateInput)
-        ? filterTableStyleModel.startDateInput
-        : function () { return []; }, endDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.endDateInput)
-        ? filterTableStyleModel.endDateInput
-        : function () { return []; }, submitButton: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.submitButton) || [], form: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.form) || [] })); };
-export var unwrapAdditionalComponentsStyleModel = function (styleModel) { return ({
-    topLevelDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.topLevelDiv) || [],
-    filterInputsDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputsDiv) || [],
-    tableAndPaginationDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tableAndPaginationDiv) || [],
-    filterUiToggleButton: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterUiToggleButton) || [],
-    paginationUiDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.paginationUiDiv) || [],
-}); };