@absreim/react-bootstrap-data-grid 2.7.0 → 4.0.0

package/common/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_COL_WIDTH = 100;
+export declare const CSS_PREFIX = "rbdg-grid";

package/common/constants.js

@@ -0,0 +1,2 @@
+export var DEFAULT_COL_WIDTH = 100;
+export var CSS_PREFIX = "rbdg-grid";

package/common/editing/types.d.ts

@@ -0,0 +1,7 @@
+import { RowData, RowId } from "../types";
+export type UpdateCallbackGenerator = (id: RowId) => (rowData: RowData) => void;
+export interface EditModel {
+    getUpdateCallback: UpdateCallbackGenerator;
+    getDeleteCallback?: (id: RowId) => () => void;
+    editColWidth?: number;
+}

package/{export → common/export}/ExportForm.d.ts

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

package/{export → common/export}/ExportForm.js

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

package/{filtering → common/filtering}/DateFilterRow.d.ts

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

package/{filtering → common/filtering}/DateFilterRow.js

@@ -39,7 +39,7 @@ var DateFilterRow = function (_a) {
     var endDateInputId = "$endDate-".concat(inputId);
     var startDateInputLabel = "".concat(columnLabel, " Column Filter Start Date");
     var endDateInputLabel = "".concat(columnLabel, " Column Filter End Date");
-    var searchStringInputCellContents = (_jsxs(_Fragment, { children: [scheme !== "endAt" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: startDateInputId, children: "Start Date" })), _jsx("input", { id: startDateInputId, className: classNames("form-control", startDateInputClasses), type: inputType, required: enabled, disabled: !enabled, value: startDate, onChange: handleStartValueChange, "aria-label": startDateInputLabel })] })), scheme !== "startFrom" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: endDateInputId, children: "End Date" })), _jsx("input", { id: endDateInputId, className: classNames("form-control", endDateInputClasses), type: inputType, required: enabled, disabled: !enabled, value: endDate, onChange: handleEndValueChange, "aria-label": endDateInputLabel })] }))] }));
+    var searchStringInputCellContents = (_jsxs(_Fragment, { children: [scheme !== "endAt" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: startDateInputId, children: "Start Date" })), _jsx("input", { id: startDateInputId, className: classNames(startDateInputClasses || "form-control"), type: inputType, required: enabled, disabled: !enabled, value: startDate, onChange: handleStartValueChange, "aria-label": startDateInputLabel })] })), scheme !== "startFrom" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: endDateInputId, children: "End Date" })), _jsx("input", { id: endDateInputId, className: classNames(endDateInputClasses || "form-control"), type: inputType, required: enabled, disabled: !enabled, value: endDate, onChange: handleEndValueChange, "aria-label": endDateInputLabel })] }))] }));
     return (_jsx(FilterRow, { ariaRowIndex: ariaRowIndex, columnLabel: columnLabel, typeLabel: filterState.type === "date" ? "Date" : "Datetime", enabled: enabled, enabledChangeHandler: handleEnabledChange, currentScheme: scheme, handleSchemeChange: handleOpChange, schemesToLabels: dateFilterSchemeNames, searchStringInputCellContents: searchStringInputCellContents, trClasses: trClasses, tdClasses: tdClasses, inputClasses: enableInputClasses, selectClasses: schemeSelectClasses }));
 };
 export default DateFilterRow;

package/common/filtering/FilterOptionsTable.d.ts

@@ -0,0 +1,12 @@
+import { FC } from "react";
+import { EditableFilterState, FilterState } from "./types";
+import { FilterInputTableStyleModel } from "../../table/styling/types";
+export interface FilterOptionsTableProps {
+    filterState: FilterState;
+    setFilterState: (filterState: EditableFilterState) => void;
+    closeFormCallback: () => void;
+    caption?: string;
+    styleModel?: FilterInputTableStyleModel;
+}
+declare const FilterOptionsTable: FC<FilterOptionsTableProps>;
+export default FilterOptionsTable;

package/{filtering → common/filtering}/FilterOptionsTable.js

@@ -9,23 +9,13 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import StringFilterRow from "./StringFilterRow";
 import NumberFilterRow from "./NumberFilterRow";
 import useFilterFormState from "./useFilterFormState";
 import DateFilterRow from "./DateFilterRow";
 import classNames from "classnames";
-import { unwrapFilterInputTableStyleModel } from "../styling/styleModelUnwrappers";
 var convertFilterFormStateToEditableState = function (filterFormState) {
     return Object.keys(filterFormState).reduce(function (editableState, colName) {
         var rowFilterFormState = filterFormState[colName];
@@ -73,10 +63,9 @@ var convertFilterFormStateToEditableState = function (filterFormState) {
     }, {});
 };
 var FilterOptionsTable = function (_a) {
-    var filterState = _a.filterState, setFilterState = _a.setFilterState, caption = _a.caption, styleModel = _a.styleModel;
+    var filterState = _a.filterState, setFilterState = _a.setFilterState, caption = _a.caption, styleModel = _a.styleModel, closeFormCallback = _a.closeFormCallback;
     var formFilterState = useFilterFormState(filterState);
     var _b = useState(formFilterState), formState = _b[0], setFormState = _b[1];
-    var unwrappedStyleModel = useMemo(function () { return unwrapFilterInputTableStyleModel(styleModel); }, [styleModel]);
     var getRows = function () {
         return Object.keys(formState).map(function (colName, index) {
             function getColStateSetter(colName) {
@@ -89,19 +78,26 @@ var FilterOptionsTable = function (_a) {
             var colFilterState = formState[colName];
             switch (colFilterState.type) {
                 case "string": {
-                    return (_jsx(StringFilterRow, { ariaRowIndex: index + 2, columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: unwrappedStyleModel.schemeSelectionInput(index), enableInputClasses: unwrappedStyleModel.enablementInput(index), searchStringInputClasses: unwrappedStyleModel.searchStringInput(index), trClasses: unwrappedStyleModel.tbodyTr(index), tdClasses: function (colIndex) {
-                            return unwrappedStyleModel.tbodyTd(index, colIndex);
+                    return (_jsx(StringFilterRow, { ariaRowIndex: index + 2, columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.schemeSelectionInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.schemeSelectionInput(index)), enableInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.enablementInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.enablementInput(index)), searchStringInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.searchStringInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.searchStringInput(index)), trClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTr) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTr(index)), tdClasses: function (colIndex) {
+                            return (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd(index, colIndex));
                         } }, colName));
                 }
                 case "number": {
-                    return (_jsx(NumberFilterRow, { ariaRowIndex: index + 2, columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: unwrappedStyleModel.schemeSelectionInput(index), enableInputClasses: unwrappedStyleModel.enablementInput(index), numberInputClasses: unwrappedStyleModel.numberInput(index), trClasses: unwrappedStyleModel.tbodyTr(index), tdClasses: function (colIndex) {
-                            return unwrappedStyleModel.tbodyTd(index, colIndex);
+                    return (_jsx(NumberFilterRow, { ariaRowIndex: index + 2, columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.schemeSelectionInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.schemeSelectionInput(index)), enableInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.enablementInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.enablementInput(index)), numberInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.numberInput) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.numberInput(index)), trClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTr) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTr(index)), tdClasses: function (colIndex) {
+                            return (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd(index, colIndex));
                         } }, colName));
                 }
                 default: {
                     // date or datetime
-                    return (_jsx(DateFilterRow, { ariaRowIndex: index + 2, includeTime: colFilterState.type === "datetime", columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: unwrappedStyleModel.schemeSelectionInput(index), enableInputClasses: unwrappedStyleModel.enablementInput(index), startDateInputClasses: unwrappedStyleModel.startDateInput(index), endDateInputClasses: unwrappedStyleModel.endDateInput(index), trClasses: unwrappedStyleModel.tbodyTr(index), tdClasses: function (colIndex) {
-                            return unwrappedStyleModel.tbodyTd(index, colIndex);
+                    return (_jsx(DateFilterRow, { ariaRowIndex: index + 2, includeTime: colFilterState.type === "datetime", columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.schemeSelectionInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.schemeSelectionInput(index)), enableInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.enablementInput) &&
+                            (styleModel === null || styleModel === void 0 ? void 0 : styleModel.enablementInput(index)), startDateInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.startDateInput) && styleModel.startDateInput(index), endDateInputClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.endDateInput) && styleModel.endDateInput(index), trClasses: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTr) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTr(index)), tdClasses: function (colIndex) {
+                            return (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd) && (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbodyTd(index, colIndex));
                         } }, colName));
                 }
             }
@@ -111,7 +107,8 @@ var FilterOptionsTable = function (_a) {
         event.preventDefault();
         var editableTableFilterState = convertFilterFormStateToEditableState(formState);
         setFilterState(editableTableFilterState);
+        closeFormCallback();
     };
-    return (_jsxs("form", { onSubmit: onSubmit, className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.form), children: [_jsxs("table", { className: classNames.apply(void 0, __spreadArray(["table"], unwrappedStyleModel.table, false)), children: [caption && (_jsx("caption", { className: classNames(unwrappedStyleModel.caption), children: caption })), _jsx("thead", { className: classNames.apply(void 0, unwrappedStyleModel.thead), children: _jsx("tr", { className: classNames.apply(void 0, unwrappedStyleModel.theadTr), children: ["Enabled", "Column", "Type", "Operator", "Value"].map(function (colName, index) { return (_jsx("th", { className: classNames.apply(void 0, unwrappedStyleModel.theadTh(index)), children: colName }, index)); }) }) }), _jsx("tbody", { className: classNames.apply(void 0, unwrappedStyleModel.tbody), children: getRows() })] }), _jsx("button", { className: classNames("btn", { "btn-secondary": unwrappedStyleModel.submitButton.length === 0 }, unwrappedStyleModel.submitButton), type: "submit", children: "Submit" })] }));
+    return (_jsxs("form", { onSubmit: onSubmit, className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.form), children: [_jsxs("table", { className: classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.table) || "table"), children: [caption && (_jsx("caption", { className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.caption), children: caption })), _jsx("thead", { className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.thead), children: _jsx("tr", { className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.theadTr), children: ["Enabled", "Column", "Type", "Operator", "Value"].map(function (colName, index) { return (_jsx("th", { className: classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.theadTh) && styleModel.theadTh(index)), children: colName }, index)); }) }) }), _jsx("tbody", { className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.tbody), children: getRows() })] }), _jsxs("div", { className: "hstack justify-content-end gap-2", children: [_jsx("button", { className: "btn btn-secondary", onClick: closeFormCallback, type: "button", children: "Cancel" }), _jsx("button", { className: classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.submitButton) || ["btn", "btn-primary"]), type: "submit", children: "Submit" })] })] }));
 };
 export default FilterOptionsTable;

package/{filtering → common/filtering}/FilterRow.d.ts

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

package/{filtering → common/filtering}/FilterRow.js

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

package/{filtering → common/filtering}/NumberFilterRow.d.ts

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

package/{filtering → common/filtering}/NumberFilterRow.js

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

package/{filtering → common/filtering}/StringFilterRow.d.ts

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

package/{filtering → common/filtering}/StringFilterRow.js

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

package/{filtering → common/filtering}/types.d.ts

@@ -1,7 +1,7 @@
-export type TableFilterState = Record<string, ColFilterState>;
-export type EditableTableFilterState = Record<string, FilterState>;
+export type FilterState = Record<string, ColFilterState>;
+export type EditableFilterState = Record<string, EditableColFilterState>;
 export interface ColFilterState {
-    editableState: FilterState;
+    editableState: EditableColFilterState;
     label: string;
 }
 export interface AbstractFilterState {
@@ -44,11 +44,11 @@ export interface BetweenDatesFilterState extends AbstractDateFilterState {
     endDate: Date | null;
 }
 export type DateFilterState = StartDateFilterState | EndDateFilterState | BetweenDatesFilterState;
-export type FilterState = StringFilterState | NumberFilterState | DateFilterState;
+export type EditableColFilterState = StringFilterState | NumberFilterState | DateFilterState;
 export interface ControlledFilterModel {
     type?: "controlled";
-    tableFilterState: EditableTableFilterState;
-    setTableFilterState: (state: EditableTableFilterState) => void;
+    tableFilterState: EditableFilterState;
+    setTableFilterState: (state: EditableFilterState) => void;
     filterTableCaption?: string;
 }
 export type UncontrolledFilterModel = Partial<Pick<ControlledFilterModel, "tableFilterState" | "filterTableCaption">> & {

package/common/filtering/useFilterFormState.d.ts

@@ -0,0 +1,3 @@
+import { FilterFormState, FilterState } from "./types";
+declare const useFilterFormState: (tableFilterState: FilterState) => FilterFormState;
+export default useFilterFormState;

package/{index.d.ts → common/index.d.ts}

@@ -1,10 +1,11 @@
-export * from "./types";
-export * from "./styling/types";
 export * from "./editing/types";
-export * from "./selection/types";
+export * from "./export/types";
 export * from "./filtering/types";
-export * from "./sorting/types";
 export * from "./pagination/types";
-export * from "./Grid";
-export * from "./util/datetime";
-export { default } from "./Grid";
+export * from "./pipeline/types";
+export * from "./sorting/types";
+export * from "./styling/types";
+export * from "./toolbar/types";
+export * from "./selection/types";
+export * from "./types";
+export * from "./util";

package/{index.js → common/index.js}

@@ -1,10 +1,11 @@
-export * from "./types";
-export * from "./styling/types";
 export * from "./editing/types";
-export * from "./selection/types";
+export * from "./export/types";
 export * from "./filtering/types";
-export * from "./sorting/types";
 export * from "./pagination/types";
-export * from "./Grid";
-export * from "./util/datetime";
-export { default } from "./Grid";
+export * from "./pipeline/types";
+export * from "./sorting/types";
+export * from "./styling/types";
+export * from "./toolbar/types";
+export * from "./selection/types";
+export * from "./types";
+export * from "./util";

package/{pagination → common/pagination}/PageSelector.d.ts

@@ -1,5 +1,5 @@
-import { JustifyContentSetting, Size } from "../types";
 import { FC } from "react";
+import { JustifyContentSetting, Size } from "../";
 export interface PageSelectorProps {
     numPages: number;
     pageNum: number;

package/{pagination → common/pagination}/PageSizeSelector.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Size } from "../types";
+import { Size } from "../";
 export interface PageSizeSelectorProps {
     componentSize: Size;
     pageSizeOptions: number[];

package/{pagination → common/pagination}/Pagination.d.ts

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

package/{pagination → common/pagination}/Pagination.js

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

package/{pagination → common/pagination}/types.d.ts

@@ -1,4 +1,5 @@
-import { JustifyContentSetting, Size } from "../types";
+export type JustifyContentSetting = "start" | "end" | "center" | "between" | "around" | "evenly";
+export type Size = "small" | "medium" | "large";
 export interface PaginationOptions {
     pageSizeOptions?: number[];
     maxPageButtons?: number;
@@ -18,5 +19,5 @@ export type UncontrolledPaginationModel = PaginationOptions & {
     startingPageSizeIndex?: number;
     startingCurrentPage?: number;
 };
-export type GridPaginationState = ControlledPaginationModel | UncontrolledPaginationModel;
+export type PaginationModel = ControlledPaginationModel | UncontrolledPaginationModel;
 export type NormalizedPaginationModel = Required<Omit<ControlledPaginationModel, "type" | "pageSelectorAriaLabel" | "pageSelectorJustifyContent">> & Pick<ControlledPaginationModel, "pageSelectorAriaLabel" | "pageSelectorJustifyContent">;

package/{pipeline → common/pipeline}/useAugFormattedRows.d.ts

@@ -1,4 +1,4 @@
-import { AugFormattedRow, FormattedRow } from "../types";
 import { ColNameToWidth } from "./types";
+import { AugFormattedRow, FormattedRow } from "../";
 declare const useAugFormattedRows: (colNameToWidth: ColNameToWidth, rows: FormattedRow[]) => AugFormattedRow[];
 export default useAugFormattedRows;

package/common/pipeline/useColNameToWidth.d.ts

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

package/common/pipeline/useColNameToWidth.js

@@ -0,0 +1,12 @@
+import { useMemo } from "react";
+var useColNameToWidth = function (cols) {
+    return useMemo(function () {
+        var map = {};
+        cols.forEach(function (_a) {
+            var name = _a.name, width = _a.width;
+            return (map[name] = width);
+        });
+        return map;
+    }, [cols]);
+};
+export default useColNameToWidth;

package/{pipeline → common/pipeline}/useCombinedPipeline/index.d.ts

@@ -1,14 +1,14 @@
 import { SortedRowsOutput } from "./useSortedRows";
 import { CurrentPageRowsOutput } from "./useCurrentPageRows";
-import { ColDefBase, FormattedRow, GridProps, RowDef } from "../../types";
-import { NormalizedTableFilterModel, TableFilterState } from "../../filtering/types";
-export type CombinedPipelineParams = Pick<GridProps, "rows" | "filterModel" | "sortModel" | "pagination" | "selectModel"> & {
+import { NormalizedTableFilterModel, FilterState } from "../../";
+import { ColDefBase, FormattedRow, MainComponentSharedProps, RowDef } from "../../types";
+export type CombinedPipelineParams = Pick<MainComponentSharedProps, "rows" | "filterModel" | "sortModel" | "pagination" | "selectModel"> & {
     cols: ColDefBase[];
 };
 export interface UseCombinedPipelineHook {
     normalizedTableFilterModel: NormalizedTableFilterModel | null;
     filteredRows: RowDef[];
-    filterState: TableFilterState | null;
+    filterState: FilterState | null;
     sortedRowsOutput: SortedRowsOutput;
     currentPageRowsOutput: CurrentPageRowsOutput;
     showSelectCol: boolean;

package/{pipeline → common/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";
+import { AugRowDef, PostPaginationRowDef } from "../../";
 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/{pipeline → common/pipeline}/useCombinedPipeline/useDisplayRows.d.ts

@@ -1,3 +1,3 @@
-import { FormattedRow, ColDef, PostPaginationRowDef } from "../../types";
+import { ColDef, FormattedRow, PostPaginationRowDef } from "../../types";
 declare const useDisplayRows: (currentPageRows: PostPaginationRowDef[], cols: ColDef[], ariaColIndexOffset: number) => FormattedRow[];
 export default useDisplayRows;

package/{pipeline → common/pipeline}/useCombinedPipeline/useDisplayRows.js

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { dateToDatetimeInputStr, dateToInputStr } from "../../util/datetime";
+import { dateToDatetimeInputStr, dateToInputStr } from "../../util";
 var getFormattedValue = function (value, formatter, typeString) {
     if (formatter) {
         return formatter(value);
@@ -36,7 +36,6 @@ var useDisplayRows = function (currentPageRows, cols, ariaColIndexOffset) {
             var displayRow = [];
             Object.keys(row.data).forEach(function (name) {
                 if (!nameToIndex.has(name)) {
-                    console.error("Warning: row data contains a property named \"".concat(name, "\", but it was not found among the column definitions."));
                     return;
                 }
                 var index = nameToIndex.get(name);

package/common/pipeline/useCombinedPipeline/useFilter.d.ts

@@ -0,0 +1,4 @@
+import { EditableFilterState } from "../../filtering/types";
+import { AugRowDef, RowDef } from "../../types";
+declare const useFilter: (rows: RowDef[], filterState: EditableFilterState | null) => AugRowDef[];
+export default useFilter;

package/common/pipeline/useCombinedPipeline/useFilterStateFromEditable.d.ts

@@ -0,0 +1,4 @@
+import { EditableFilterState, FilterState } from "../../filtering/types";
+import { ColDef } from "../../types";
+declare const useFilterStateFromEditable: (colDefs: ColDef[], editableFilterState: EditableFilterState | null) => FilterState | null;
+export default useFilterStateFromEditable;

package/{pipeline → common/pipeline}/useCombinedPipeline/useSortedRows.d.ts

@@ -1,10 +1,10 @@
+import { SortColDef, SortModel } from "../../sorting/types";
 import { AugRowDef, ColDefBase } from "../../types";
-import { SortColDef, TableSortModel } from "../../sorting/types";
 export interface SortedRowsOutput {
     sortedRows: AugRowDef[];
     sortingEnabled: boolean;
     sortColDef: SortColDef | null | undefined;
     setSortColDef: ((sortColDef: SortColDef | null) => void) | undefined;
 }
-declare const useSortedRows: (rows: AugRowDef[], cols: ColDefBase[], sortModel: TableSortModel | undefined) => SortedRowsOutput;
+declare const useSortedRows: (rows: AugRowDef[], cols: ColDefBase[], sortModel: SortModel | undefined) => SortedRowsOutput;
 export default useSortedRows;

package/{pipeline → common/pipeline}/useGridSelectionFns.d.ts

@@ -1,7 +1,7 @@
-import { RowDef, RowId } from "../types";
 import { MouseEventHandler } from "react";
 import { SelectionInfo, SelectModel } from "../selection/types";
-import { SelectionInputModel } from "../selection/SelectionInput";
+import { SelectionInputModel } from "../../table/selection/SelectionInput";
+import { RowDef, RowId } from "../types";
 export interface UseGridSelectionFnsHook {
     selectedSet: Set<RowId>;
     rowsAreSelectable: boolean | undefined;

package/{sorting → common/sorting}/types.d.ts

@@ -7,13 +7,13 @@ export interface ColSortModel {
     sortOrder: SortOrder | null;
     setSortOrder: (order: SortOrder | null) => void;
 }
-export interface ControlledTableSortModel {
+export interface ControlledSortModel {
     type?: "controlled";
     sortColDef: SortColDef | null;
     setSortColDef: (sortColDef: SortColDef | null) => void;
 }
-export interface UncontrolledTableSortModel {
+export interface UncontrolledSortModel {
     type: "uncontrolled";
     initialSortColDef: SortColDef | null;
 }
-export type TableSortModel = ControlledTableSortModel | UncontrolledTableSortModel;
+export type SortModel = ControlledSortModel | UncontrolledSortModel;

package/{main/ColHeaderCell → common/sorting}/useSortHeaderStates.d.ts

@@ -1,6 +1,6 @@
-import { UseControlledHoverHook } from "../../util/useControlledHover";
+import { UseControlledHoverHook } from "../util/useControlledHover";
 import { ReactNode } from "react";
-import { ColSortModel } from "../../sorting/types";
+import { ColSortModel } from "./types";
 export type UseSortHeaderStatesHook = UseControlledHoverHook<HTMLTableCellElement> & {
     handleClick: () => void;
     sortSymbol: ReactNode;

package/{main/ColHeaderCell → common/sorting}/useSortHeaderStates.js

@@ -1,8 +1,8 @@
-import useControlledHover from "../../util/useControlledHover";
+import useControlledHover from "../util/useControlledHover";
 import { useMemo } from "react";
-import upArrow from "../../sorting/upArrow";
-import arrowPlaceholder from "../../sorting/arrowPlaceholder";
-import downArrow from "../../sorting/downArrow";
+import upArrow from "./upArrow";
+import arrowPlaceholder from "./arrowPlaceholder";
+import downArrow from "./downArrow";
 var useSortHeaderStates = function (sortModel) {
     var _a = useControlledHover(), isHovering = _a.isHovering, setIsHovering = _a.setIsHovering, handleMouseOver = _a.handleMouseOver, handleMouseOut = _a.handleMouseOut;
     var handleClick = function () {

package/common/styling/types.d.ts

@@ -0,0 +1,21 @@
+import { AdditionalComponentsStyleModel, FilterInputTableStyleModel, TableStyleModel } from "../../table";
+export interface ToolbarStyleModel {
+    activeButton?: string[];
+    inactiveButton?: string[];
+    toolbar?: string[];
+    interfaceContainer?: string[];
+}
+export interface ExportFormStyleModel {
+    legend?: string[];
+    radioContainer?: string[];
+    radioInput?: string[];
+    radioLabel?: string[];
+    submitButton?: string[];
+}
+export interface StyleModel {
+    mainTableStyleModel?: TableStyleModel;
+    filterInputTableStyleModel?: FilterInputTableStyleModel;
+    additionalComponentsStyleModel?: AdditionalComponentsStyleModel;
+    toolbarStyleModel?: ToolbarStyleModel;
+    exportFormStyleModel?: ExportFormStyleModel;
+}