@absreim/react-bootstrap-data-grid-pro 2.7.0 → 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,13 +2,11 @@ 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;

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 }, classes, }) => {
-    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, (classes === null || classes === void 0 ? void 0 : classes.headerRow) || []), children: [prefixHeader, showSelectCol && (_jsx(SelectAllHeaderCell, { style: getWidthStyle(selectModel === null || selectModel === void 0 ? void 0 : selectModel.selectColWidth), selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh, colIndexOffset: prefixHeader ? 1 : 0 })), colHeaderCells, editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames(unwrappedTableModel.editColTh), style: getWidthStyle(editModel === null || editModel === void 0 ? void 0 : editModel.editColWidth), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(unwrappedTableModel.tbody), children: bodyRows })] }));
-    return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [normalizedTableFilterModel && !useToolbar && (_jsxs("div", { "data-testid": "rbdg-filter-inputs-div", className: classNames(unwrappedAdditionalStyleModel.filterInputsDiv), children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: `${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,15 +1,15 @@
 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;

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, additionalRowStyles, }) => 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), 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) => 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, { index: index, 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;
 }

package/grid/selection/SelectAllHeaderCell.js

@@ -40,15 +40,13 @@ const getCheckboxState = (selectionInfo, noRows) => {
     // single select mode and none selected
     return disabledState;
 };
-const SelectAllHeaderCell = ({ onClick, selectionInfo, totalRows, additionalClasses, style, colIndexOffset, }) => {
+const SelectAllHeaderCell = ({ onClick, selectionInfo, totalRows, customClasses, style, colIndexOffset, }) => {
     const noRows = totalRows === 0;
     const { indeterminate, checked, disabled, description } = getCheckboxState(selectionInfo, noRows);
     const ref = useRef(null);
     useEffect(() => {
         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", { tabIndex: 0, 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/grid/selection/SelectionInput.d.ts

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

package/grid/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/grid/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/grid/toolbar/ToolbarContainer.js

@@ -1,14 +1,18 @@
 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";
-const ToolbarContainer = ({ interfaces, styleModel, }) => {
+const ToolbarContainer = ({ interfaceGen, styleModel, }) => {
     const [option, setOption] = useState(null);
-    const enabledFeatures = Object.keys(interfaces).reduce((prev, toolbarOption) => {
-        prev[toolbarOption] =
-            !!interfaces[toolbarOption];
-        return prev;
-    }, {});
+    const closeUiCallback = useCallback(() => setOption(null), []);
+    const interfaces = useMemo(() => interfaceGen(closeUiCallback), [closeUiCallback, interfaceGen]);
+    const enabledFeatures = useMemo(() => {
+        return Object.keys(interfaces).reduce((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/grid/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/grid/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/grid/toolbar/useInterfaces.js

@@ -2,10 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import FilterOptionsTable from "../filtering/FilterOptionsTable";
 import { useMemo } from "react";
 import ExportForm from "../export/ExportForm";
-const useInterfaces = ({ filtering, exporting, }) => {
-    return useMemo(() => ({
-        filtering: filtering ? _jsx(FilterOptionsTable, Object.assign({}, filtering)) : undefined,
-        exporting: exporting ? _jsx(ExportForm, Object.assign({}, exporting)) : undefined,
-    }), [exporting, filtering]);
+const useInterfaces = (gen) => {
+    return useMemo(() => (closeCallback) => {
+        const props = gen(closeCallback);
+        const { exporting, filtering } = props;
+        return {
+            filtering: filtering ? (_jsx(FilterOptionsTable, Object.assign({}, filtering))) : undefined,
+            exporting: exporting ? _jsx(ExportForm, Object.assign({}, exporting)) : undefined,
+        };
+    }, [gen]);
 };
 export default useInterfaces;

package/grid/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/grid-pro/GridPro.js

@@ -5,7 +5,6 @@ import useCombinedPipeline from "../grid/pipeline/useCombinedPipeline";
 import InternalGrid from "../grid/InternalGrid";
 import ColHeaderCellPro from "./ColHeaderCellPro";
 import useGridSelectionFns from "../grid/pipeline/useGridSelectionFns";
-import useUnwrappedGridStyles from "../grid/pipeline/useUnwrappedGridStyles";
 import useGetInputStrSubmitCallback from "../grid/pipeline/useGetInputStrSubmitCallback";
 import useAugFormattedRows from "../grid/pipeline/useAugFormattedRows";
 import useResizeModel from "./resize/useResizeModel";
@@ -27,7 +26,6 @@ const GridPro = (props) => {
     });
     const { sortedRowsOutput: { sortColDef, setSortColDef, sortingEnabled }, showSelectCol, displayRows, filterState, } = combinedPipelineOutput;
     const gridSelectionFns = useGridSelectionFns(selectModel, rows);
-    const unwrappedStyles = useUnwrappedGridStyles(styleModel);
     const getInputStrSubmitCallback = useGetInputStrSubmitCallback(editModel, cols);
     const resizeModel = useResizeModel(cols, displayMode);
     const colNameToWidth = useMemo(() => Object.keys(resizeModel).reduce((prev, fieldName) => {
@@ -117,12 +115,11 @@ const GridPro = (props) => {
         setDragee,
         sortingOccurring,
     ]);
-    const bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, unwrappedStyles: unwrappedStyles, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback, renderPrefixCells: renderPrefixCells, additionalColIndexOffset: reorder ? 1 : 0, additionalRowStyles: additionalBodyRowStyles }));
+    const bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback, renderPrefixCells: renderPrefixCells, additionalColIndexOffset: reorder ? 1 : 0, additionalRowStyles: additionalBodyRowStyles, tableStyleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel }));
     const prefixHeader = reorder ? _jsx(ReorderHeaderCell, {}) : null;
     return (_jsx(InternalGrid, { gridProps: props, hooks: {
             pipelineOutput: combinedPipelineOutput,
             selectFns: gridSelectionFns,
-            unwrappedStyles,
         }, slots: { colHeaderCells, bodyRows, prefixHeader }, classes: {
             headerRow: additionalHeaderRowStyles,
         } }));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@absreim/react-bootstrap-data-grid-pro",
   "description": "Pro Version of data grid UI component for use with web apps using React and Bootstrap",
-  "version": "2.7.0",
+  "version": "3.0.0",
   "license": "Commercial. See LICENSE file.",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",

package/grid/main/ToggleButton.d.ts

@@ -1,9 +0,0 @@
-import { FC } from "react";
-export interface ToggleButtonProps {
-    isActive: boolean;
-    label: string;
-    onClick: () => void;
-    classes?: string[];
-}
-declare const ToggleButton: FC<ToggleButtonProps>;
-export default ToggleButton;

package/grid/main/ToggleButton.js

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

package/grid/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/grid/pipeline/useUnwrappedGridStyles.js

@@ -1,15 +0,0 @@
-import { useMemo } from "react";
-import { unwrapAdditionalComponentsStyleModel, unwrapTableStyleModel, } from "../styling/styleModelUnwrappers";
-const UseUnwrappedGridStyles = (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.
-    const unwrappedTableModel = useMemo(() => unwrapTableStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel), [styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel]);
-    const unwrappedAdditionalStyleModel = useMemo(() => unwrapAdditionalComponentsStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel), [styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel]);
-    return {
-        unwrappedTableModel,
-        unwrappedAdditionalStyleModel,
-    };
-};
-export default UseUnwrappedGridStyles;

package/grid/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/grid/styling/styleModelUnwrappers.js

@@ -1,47 +0,0 @@
-const unwrapSharedStyleModel = (sharedStyleModel) => ({
-    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 : () => [],
-    caption: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.caption) || [],
-});
-export const unwrapTableStyleModel = (tableStyleModel) => (Object.assign(Object.assign({}, unwrapSharedStyleModel(tableStyleModel)), { tbodyTr: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTr) ? tableStyleModel.tbodyTr : () => [], tbodyTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTd) ? tableStyleModel.tbodyTd : () => [], tbodyTdInput: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTdInput)
-        ? tableStyleModel.tbodyTdInput
-        : () => [], editColTh: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTh) || [], editColTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTd) ? tableStyleModel.editColTd : () => [], editCancelButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editCancelButton)
-        ? tableStyleModel.editCancelButton
-        : () => [], editDeleteButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editDeleteButton)
-        ? tableStyleModel.editDeleteButton
-        : () => [], editSaveButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editSaveButton)
-        ? tableStyleModel.editSaveButton
-        : () => [], editStartButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editStartButton)
-        ? tableStyleModel.editStartButton
-        : () => [], rowSelectColTh: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTh) || [], rowSelectColTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTd)
-        ? tableStyleModel.rowSelectColTd
-        : () => [], rowSelectInput: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectInput)
-        ? tableStyleModel.rowSelectInput
-        : () => [] }));
-export const unwrapFilterInputTableStyleModel = (filterTableStyleModel) => (Object.assign(Object.assign({}, unwrapSharedStyleModel(filterTableStyleModel)), { tbodyTr: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTr)
-        ? filterTableStyleModel.tbodyTr
-        : () => [], tbodyTd: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTd)
-        ? filterTableStyleModel.tbodyTd
-        : () => [], enablementInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.enablementInput)
-        ? filterTableStyleModel.enablementInput
-        : () => [], schemeSelectionInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.schemeSelectionInput)
-        ? filterTableStyleModel.schemeSelectionInput
-        : () => [], searchStringInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.searchStringInput)
-        ? filterTableStyleModel.searchStringInput
-        : () => [], numberInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.numberInput)
-        ? filterTableStyleModel.numberInput
-        : () => [], startDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.startDateInput)
-        ? filterTableStyleModel.startDateInput
-        : () => [], endDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.endDateInput)
-        ? filterTableStyleModel.endDateInput
-        : () => [], submitButton: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.submitButton) || [], form: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.form) || [] }));
-export const unwrapAdditionalComponentsStyleModel = (styleModel) => ({
-    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) || [],
-});