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

package/grid/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 @@ const Grid = (props) => {
     });
     const { sortedRowsOutput: { sortColDef, setSortColDef, sortingEnabled }, showSelectCol, displayRows, } = combinedPipelineOutput;
     const gridSelectionFns = useGridSelectionFns(selectModel, rows);
-    const unwrappedStyles = useUnwrappedGridStyles(styleModel);
     const getInputStrSubmitCallback = useGetInputStrSubmitCallback(editModel, cols);
     const colNameToWidth = useMemo(() => {
         const map = {};
@@ -42,11 +40,10 @@ const Grid = (props) => {
         return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: ((_a = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _a === void 0 ? void 0 : _a.theadTh) &&
                 styleModel.mainTableStyleModel.theadTh(index), width: width }, name));
     });
-    const bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, unwrappedStyles: unwrappedStyles, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback }));
+    const 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,
         }, slots: { colHeaderCells, bodyRows } }));
 };
 export default Grid;

package/grid/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/grid/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";
@@ -10,47 +8,51 @@ import useInterfaces from "./toolbar/useInterfaces";
 import ToolbarContainer from "./toolbar/ToolbarContainer";
 import useExportFn from "./export/useExportFn";
 import getWidthStyle from "./util/getWidthStyle";
-const InternalGrid = ({ gridProps: { rows, cols, pagination, filterModel, selectModel, editModel, caption, styleModel, useToolbar, responsive, displayMode, }, hooks: { pipelineOutput, selectFns, unwrappedStyles }, slots: { colHeaderCells, bodyRows, prefixHeader }, }) => {
-    var _a;
+const InternalGrid = ({ gridProps: { rows, cols, pagination, filterModel, selectModel, editModel, caption, styleModel, displayMode, allowExport, }, hooks: { pipelineOutput, selectFns }, slots: { colHeaderCells, bodyRows, prefixHeader }, classes, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     const { normalizedTableFilterModel, filteredRows, filterState, sortedRowsOutput: { sortedRows }, currentPageRowsOutput: { paginatedRows, normalizedModel }, showSelectCol, } = pipelineOutput;
-    const [filterOptionsVisible, setFilterOptionsVisible] = useState(false);
     const exportFnInfo = useExportFn({
         rows,
         cols,
         filteredRows: filterModel && filteredRows,
         currentPageRows: pagination && paginatedRows,
     });
-    const toolbarInterfaceParams = useMemo(() => ({
-        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, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel }
-            : undefined,
-    }), [
+    const showToolbar = filterModel || allowExport;
+    const toolbarPropGen = useMemo(() => (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,
+                    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,
     ]);
-    const toolbarInterfaces = useInterfaces(toolbarInterfaceParams);
-    const handleToggleFilterOptions = () => {
-        setFilterOptionsVisible(!filterOptionsVisible);
-    };
+    const toolbarInterfaces = useInterfaces(toolbarPropGen);
     const { rowsAreSelectable, selectionInfo, selectAllOnClick } = selectFns;
-    const { unwrappedTableModel, unwrappedAdditionalStyleModel } = unwrappedStyles;
-    const mainTable = (_jsxs("table", { className: classNames("table", {
+    const 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: `${filterOptionsVisible ? "Hide" : "Show "} Filter Options`, onClick: handleToggleFilterOptions, classes: (_a = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _a === void 0 ? void 0 : _a.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 }))] })] }));
+        }, ((_a = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _a === void 0 ? void 0 : _a.table) || "table"), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames((_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _b === void 0 ? void 0 : _b.caption), children: caption })), _jsx("thead", { className: classNames((_c = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _c === void 0 ? void 0 : _c.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames((_d = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _d === void 0 ? void 0 : _d.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: (_e = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _e === void 0 ? void 0 : _e.rowSelectColTh, colIndexOffset: prefixHeader ? 1 : 0 })), colHeaderCells, editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames((_f = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _f === void 0 ? void 0 : _f.editColTh), style: getWidthStyle(editModel === null || editModel === void 0 ? void 0 : editModel.editColWidth), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(classNames((_g = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _g === void 0 ? void 0 : _g.tbody)), children: bodyRows })] }));
+    return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames((_h = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _h === void 0 ? void 0 : _h.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((_j = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _j === void 0 ? void 0 : _j.tableAndPaginationDiv), children: [_jsx("div", { "data-testid": "rbdg-table-div", className: classNames(((_k = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _k === void 0 ? void 0 : _k.tableDiv) ||
+                            "table-responsive"), children: mainTable }), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: (_l = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _l === void 0 ? void 0 : _l.paginationUiDiv }))] })] }));
 };
 export default InternalGrid;

package/grid/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/grid/editing/EditControlsCell.js

@@ -5,14 +5,6 @@ const stopPropagationWrapper = (fn) => (event) => {
     fn();
 };
 const EditControlsCell = ({ ariaColIndex, beginEditingCallback, cancelEditingCallback, isEditing, saveCallback, deleteCallback, editControlsCellClasses, saveButtonClasses, deleteButtonClasses, startButtonClasses, 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/grid/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/grid/editing/EditableRow.js

@@ -57,6 +57,6 @@ const EditableRow = ({ ariaColIndexOffset, cellData, children, updateCallback, d
             setIsEditing(false);
         }
     };
-    return (_jsxs("tr", { ref: trRef, onClick: onClick, className: className, "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, "data-rowid": dataRowId, children: [children, cellData.map(({ type, value, formattedValue, label, width }, index) => (_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-${dataRowId}-${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: () => setIsEditing(true), cancelEditingCallback: () => setIsEditing(false), isEditing: isEditing, saveCallback: handleSave, deleteCallback: deleteCallback, editControlsCellClasses: editCellClasses, startButtonClasses: startButtonClasses, deleteButtonClasses: deleteButtonClasses, cancelButtonClasses: cancelButtonClasses, saveButtonClasses: saveButtonClasses, style: editControlCellStyles }))] }));
+    return (_jsxs("tr", { ref: trRef, onClick: onClick, className: className, "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, "data-rowid": dataRowId, children: [children, cellData.map(({ type, value, formattedValue, label, width }, index) => (_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-${dataRowId}-${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: () => setIsEditing(true), cancelEditingCallback: () => setIsEditing(false), isEditing: isEditing, saveCallback: handleSave, deleteCallback: deleteCallback, editControlsCellClasses: editCellClasses, startButtonClasses: startButtonClasses, deleteButtonClasses: deleteButtonClasses, cancelButtonClasses: cancelButtonClasses, saveButtonClasses: saveButtonClasses, style: editControlCellStyles }))] }));
 };
 export default EditableRow;

package/grid/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/grid/export/ExportForm.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useState } from "react";
 import classNames from "classnames";
-const ExportForm = ({ exportFnInfo: { exportFn, formattersExist, paginationEnabled, filteringEnabled, rowCounts, }, styleModel, }) => {
+const ExportForm = ({ exportFnInfo: { exportFn, formattersExist, paginationEnabled, filteringEnabled, rowCounts, }, closeCallback, styleModel, }) => {
     const formId = useId();
     const [formState, setFormState] = useState({
         stage: "original",
@@ -67,7 +67,7 @@ const ExportForm = ({ exportFnInfo: { exportFn, formattersExist, paginationEnabl
     const radioContainerClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.radioContainer) || ["form-check"]);
     const radioInputClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.radioInput) || ["form-check-input"]);
     const radioLabelClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.radioLabel) || ["form-check-label"]);
-    const submitButtonClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.submitButton) || ["btn", "btn-secondary"]);
-    return (_jsxs("form", { onSubmit: handleSubmit, children: [_jsxs("fieldset", { children: [_jsx("legend", { className: legendClasses, children: "Choose data to export" }), stageOptions.map(({ value, label, disabled }) => (_jsxs("div", { className: radioContainerClasses, children: [_jsx("input", { className: radioInputClasses, type: "radio", id: `${formId}-${value}`, value: value, checked: formState.stage === value, onChange: getChangeHandler("stage", value), disabled: disabled }), _jsx("label", { className: radioLabelClasses, htmlFor: `${formId}-${value}`, children: label })] }, value)))] }), _jsxs("fieldset", { children: [_jsx("legend", { className: legendClasses, children: "Choose whether to apply formatters" }), formatOptions.map(({ formatted, label, disabled }) => (_jsxs("div", { className: radioContainerClasses, children: [_jsx("input", { className: radioInputClasses, type: "radio", id: `${formId}-${formatted}`, value: String(formatted), checked: formState.formatted === formatted, onChange: getChangeHandler("formatted", formatted), disabled: disabled }), _jsx("label", { className: radioLabelClasses, htmlFor: `${formId}-${formatted}`, children: label })] }, String(formatted))))] }), _jsxs("fieldset", { children: [_jsx("legend", { className: legendClasses, children: "Choose the file type" }), fileTypeOptions.map(({ fileType, label }) => (_jsxs("div", { className: radioContainerClasses, children: [_jsx("input", { className: radioInputClasses, type: "radio", id: `${formId}-${fileType}`, value: fileType, checked: formState.fileType === fileType, onChange: getChangeHandler("fileType", fileType) }), _jsx("label", { className: radioLabelClasses, htmlFor: `${formId}-${fileType}`, children: label })] }, fileType)))] }), _jsx("button", { type: "submit", className: submitButtonClasses, children: "Submit" })] }));
+    const 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(({ value, label, disabled }) => (_jsxs("div", { className: radioContainerClasses, children: [_jsx("input", { className: radioInputClasses, type: "radio", id: `${formId}-${value}`, value: value, checked: formState.stage === value, onChange: getChangeHandler("stage", value), disabled: disabled }), _jsx("label", { className: radioLabelClasses, htmlFor: `${formId}-${value}`, children: label })] }, value)))] }), _jsxs("fieldset", { children: [_jsx("legend", { className: legendClasses, children: "Choose whether to apply formatters" }), formatOptions.map(({ formatted, label, disabled }) => (_jsxs("div", { className: radioContainerClasses, children: [_jsx("input", { className: radioInputClasses, type: "radio", id: `${formId}-${formatted}`, value: String(formatted), checked: formState.formatted === formatted, onChange: getChangeHandler("formatted", formatted), disabled: disabled }), _jsx("label", { className: radioLabelClasses, htmlFor: `${formId}-${formatted}`, children: label })] }, String(formatted))))] }), _jsxs("fieldset", { children: [_jsx("legend", { className: legendClasses, children: "Choose the file type" }), fileTypeOptions.map(({ fileType, label }) => (_jsxs("div", { className: radioContainerClasses, children: [_jsx("input", { className: radioInputClasses, type: "radio", id: `${formId}-${fileType}`, value: fileType, checked: formState.fileType === fileType, onChange: getChangeHandler("fileType", fileType) }), _jsx("label", { className: radioLabelClasses, htmlFor: `${formId}-${fileType}`, children: label })] }, fileType)))] }), _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/grid/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/grid/filtering/DateFilterRow.js

@@ -23,7 +23,7 @@ const DateFilterRow = ({ ariaRowIndex, includeTime, columnLabel, filterState, se
     const endDateInputId = `$endDate-${inputId}`;
     const startDateInputLabel = `${columnLabel} Column Filter Start Date`;
     const endDateInputLabel = `${columnLabel} Column Filter End Date`;
-    const 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 })] }))] }));
+    const 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/grid/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/grid/filtering/FilterOptionsTable.js

@@ -1,11 +1,10 @@
 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";
 const convertFilterFormStateToEditableState = (filterFormState) => Object.keys(filterFormState).reduce((editableState, colName) => {
     const rowFilterFormState = filterFormState[colName];
     switch (rowFilterFormState.type) {
@@ -48,10 +47,9 @@ const convertFilterFormStateToEditableState = (filterFormState) => Object.keys(f
     }
     return editableState;
 }, {});
-const FilterOptionsTable = ({ filterState, setFilterState, caption, styleModel, }) => {
+const FilterOptionsTable = ({ filterState, setFilterState, caption, styleModel, closeFormCallback, }) => {
     const formFilterState = useFilterFormState(filterState);
     const [formState, setFormState] = useState(formFilterState);
-    const unwrappedStyleModel = useMemo(() => unwrapFilterInputTableStyleModel(styleModel), [styleModel]);
     const getRows = () => Object.keys(formState).map((colName, index) => {
         function getColStateSetter(colName) {
             return (rowState) => setFormState(Object.assign(Object.assign({}, formState), { [colName]: rowState }));
@@ -60,14 +58,21 @@ const FilterOptionsTable = ({ filterState, setFilterState, caption, styleModel,
         const 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: (colIndex) => unwrappedStyleModel.tbodyTd(index, colIndex) }, colName));
+                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: (colIndex) => (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: (colIndex) => unwrappedStyleModel.tbodyTd(index, colIndex) }, colName));
+                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: (colIndex) => (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: (colIndex) => unwrappedStyleModel.tbodyTd(index, colIndex) }, colName));
+                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: (colIndex) => (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd(index, colIndex)) }, colName));
             }
         }
     });
@@ -75,7 +80,8 @@ const FilterOptionsTable = ({ filterState, setFilterState, caption, styleModel,
         event.preventDefault();
         const 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("table", ...unwrappedStyleModel.table), children: [caption && (_jsx("caption", { className: classNames(unwrappedStyleModel.caption), children: caption })), _jsx("thead", { className: classNames(...unwrappedStyleModel.thead), children: _jsx("tr", { className: classNames(...unwrappedStyleModel.theadTr), children: ["Enabled", "Column", "Type", "Operator", "Value"].map((colName, index) => (_jsx("th", { className: classNames(...unwrappedStyleModel.theadTh(index)), children: colName }, index))) }) }), _jsx("tbody", { className: classNames(...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((colName, index) => (_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/grid/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/grid/filtering/FilterRow.js

@@ -4,6 +4,6 @@ export function FilterRow(props) {
     const { ariaRowIndex, columnLabel, typeLabel, enabled, enabledChangeHandler, currentScheme, handleSchemeChange, schemesToLabels, searchStringInputCellContents, trClasses, tdClasses, inputClasses, selectClasses, } = props;
     const checkboxLabel = `${columnLabel} Column Filter Toggle`;
     const opSelectLabel = `${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("form-select", ...selectClasses), value: currentScheme, onChange: handleSchemeChange, children: Object.keys(schemesToLabels).map((scheme) => (_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((scheme) => (_jsx("option", { value: scheme, children: schemesToLabels[scheme] }, scheme))) }) }), _jsx("td", { className: classNames(tdClasses(4)), "aria-colindex": 5, children: searchStringInputCellContents })] }));
 }
 export default FilterRow;

package/grid/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/grid/filtering/NumberFilterRow.js

@@ -14,7 +14,7 @@ const NumberFilterRow = ({ ariaRowIndex, columnLabel, filterState, setFilterStat
     };
     const { enabled, scheme, inputValue } = filterState;
     const valueInputLabel = `${columnLabel} Column Filter Value`;
-    const searchStringInputCellContents = (_jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: classNames("form-control", numberInputClasses), type: "number", required: enabled, disabled: !enabled, value: inputValue, onChange: handleNumInputValueChange }));
+    const 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/grid/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/grid/filtering/StringFilterRow.js

@@ -14,7 +14,7 @@ const StringFilterRow = ({ ariaRowIndex, columnLabel, filterState, setFilterStat
     };
     const { enabled, scheme, searchString } = filterState;
     const valueInputLabel = `${columnLabel} Column Filter Value`;
-    const searchStringInputCellContents = (_jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: classNames("form-control", searchStringInputClasses), required: enabled, disabled: !enabled, value: searchString, onChange: handleSearchStringChange }));
+    const 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/grid/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/grid/main/BodyRows.js

@@ -3,9 +3,25 @@ import EditableRow from "../editing/EditableRow";
 import classNames from "classnames";
 import getWidthStyle from "../util/getWidthStyle";
 import SelectionInput from "../selection/SelectionInput";
-const BodyRows = ({ augFormattedRows, gridSelectionFns: { selectedSet, getSelectInputModel, getSelectHandler, getRowClickHandler, getAriaSelectedValue, }, unwrappedStyles: { unwrappedTableModel }, combinedPipelineOutput: { showSelectCol, ariaColIndexOffset }, selectModel, editModel, getInputStrSubmitCallback, additionalColIndexOffset, renderPrefixCells, }) => augFormattedRows.map((row, index) => {
+const BodyRows = ({ augFormattedRows, gridSelectionFns: { selectedSet, getSelectInputModel, getSelectHandler, getRowClickHandler, getAriaSelectedValue, }, tableStyleModel, combinedPipelineOutput: { showSelectCol, ariaColIndexOffset }, selectModel, editModel, getInputStrSubmitCallback, additionalColIndexOffset, renderPrefixCells, additionalRowStyles, }) => augFormattedRows.map((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: (colIndex) => unwrappedTableModel.tbodyTd(row.id, index, colIndex), dataCellInputClasses: (colIndex) => 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));
+        }, (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: (colIndex) => (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTd)
+            ? tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTd(row.id, index, colIndex)
+            : null, dataCellInputClasses: (colIndex) => (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/grid/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/grid/pagination/Pagination.js

@@ -16,8 +16,11 @@ const Pagination = ({ normalizedModel, prePagingNumRows, containerDivClasses, })
             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/grid/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/grid/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/grid/selection/SelectAllHeaderCell.d.ts

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