@absreim/react-bootstrap-data-grid-pro 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 const DEFAULT_COL_WIDTH = 100;
+export const 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/{grid → 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/{grid → common}/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 → 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/{grid → common}/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/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/common/filtering/FilterOptionsTable.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import StringFilterRow from "./StringFilterRow";
+import NumberFilterRow from "./NumberFilterRow";
+import useFilterFormState from "./useFilterFormState";
+import DateFilterRow from "./DateFilterRow";
+import classNames from "classnames";
+const convertFilterFormStateToEditableState = (filterFormState) => Object.keys(filterFormState).reduce((editableState, colName) => {
+    const rowFilterFormState = filterFormState[colName];
+    switch (rowFilterFormState.type) {
+        case "string": {
+            editableState[colName] = Object.assign({}, rowFilterFormState);
+            break;
+        }
+        case "number": {
+            editableState[colName] = {
+                type: rowFilterFormState.type,
+                enabled: rowFilterFormState.enabled,
+                scheme: rowFilterFormState.scheme,
+                numValue: rowFilterFormState.inputValue === ""
+                    ? null
+                    : Number(rowFilterFormState.inputValue),
+            };
+            break;
+        }
+        default: {
+            // date or datetime
+            const partialFilterState = {
+                type: rowFilterFormState.type,
+                enabled: rowFilterFormState.enabled,
+            };
+            const inputStrToDate = (str) => str === "" ? null : new Date(str);
+            switch (rowFilterFormState.scheme) {
+                case "startFrom": {
+                    editableState[colName] = Object.assign(Object.assign({}, partialFilterState), { scheme: rowFilterFormState.scheme, startDate: inputStrToDate(rowFilterFormState.startDate) });
+                    break;
+                }
+                case "endAt": {
+                    editableState[colName] = Object.assign(Object.assign({}, partialFilterState), { scheme: rowFilterFormState.scheme, endDate: inputStrToDate(rowFilterFormState.endDate) });
+                    break;
+                }
+                default: {
+                    editableState[colName] = Object.assign(Object.assign({}, partialFilterState), { scheme: rowFilterFormState.scheme, startDate: inputStrToDate(rowFilterFormState.startDate), endDate: inputStrToDate(rowFilterFormState.endDate) });
+                }
+            }
+        }
+    }
+    return editableState;
+}, {});
+const FilterOptionsTable = ({ filterState, setFilterState, caption, styleModel, closeFormCallback, }) => {
+    const formFilterState = useFilterFormState(filterState);
+    const [formState, setFormState] = useState(formFilterState);
+    const getRows = () => Object.keys(formState).map((colName, index) => {
+        function getColStateSetter(colName) {
+            return (rowState) => setFormState(Object.assign(Object.assign({}, formState), { [colName]: rowState }));
+        }
+        const colLabel = filterState[colName].label;
+        const colFilterState = formState[colName];
+        switch (colFilterState.type) {
+            case "string": {
+                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: (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: (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));
+            }
+        }
+    });
+    const onSubmit = (event) => {
+        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((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 → 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/{grid → common}/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 → 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/{grid → common}/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 → 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/{grid → common}/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 → 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/common/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./editing/types";
+export * from "./export/types";
+export * from "./filtering/types";
+export * from "./pagination/types";
+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/common/index.js

@@ -0,0 +1,11 @@
+export * from "./editing/types";
+export * from "./export/types";
+export * from "./filtering/types";
+export * from "./pagination/types";
+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/{grid → 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/{grid → 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/{grid → 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/{grid → common}/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 → 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/{grid → 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,7 @@
+import { useMemo } from "react";
+const useColNameToWidth = (cols) => useMemo(() => {
+    const map = {};
+    cols.forEach(({ name, width }) => (map[name] = width));
+    return map;
+}, [cols]);
+export default useColNameToWidth;

package/{grid → 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/{grid → 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/{grid → 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/{grid → common}/pipeline/useCombinedPipeline/useDisplayRows.js

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { dateToDatetimeInputStr, dateToInputStr } from "../../util/datetime";
+import { dateToDatetimeInputStr, dateToInputStr } from "../../util";
 const getFormattedValue = (value, formatter, typeString) => {
     if (formatter) {
         return formatter(value);
@@ -31,7 +31,6 @@ const useDisplayRows = (currentPageRows, cols, ariaColIndexOffset) => useMemo(()
         const displayRow = [];
         Object.keys(row.data).forEach((name) => {
             if (!nameToIndex.has(name)) {
-                console.error(`Warning: row data contains a property named "${name}", but it was not found among the column definitions.`);
                 return;
             }
             const 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/{grid → 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/{grid → 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/{grid → 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/{grid/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/{grid/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";
 const useSortHeaderStates = (sortModel) => {
     const { isHovering, setIsHovering, handleMouseOver, handleMouseOut } = useControlledHover();
     const handleClick = () => {

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;
+}

package/{grid → common}/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 → common}/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",