@absreim/react-bootstrap-data-grid 2.0.0 → 2.2.0

package/Grid.d.ts

@@ -16,6 +16,7 @@ export interface GridProps {
     editModel?: EditModel;
     caption?: string;
     styleModel?: StyleModel;
+    useToolbar?: boolean;
 }
 declare const Grid: FC<GridProps>;
 export default Grid;

package/Grid.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useId, useMemo, useState } from "react";
 import ColHeaderCell from "./ColHeaderCell";
 import useFilter from "./pipeline/useFilter";
 import ToggleButton from "./ToggleButton";
@@ -17,18 +17,51 @@ import inputStrsToRowData from "./editing/inputStrsToRowData";
 import { unwrapAdditionalComponentsStyleModel, unwrapTableStyleModel, } from "./styling/styleModelUnwrappers";
 import useCurrentPageRows from "./pipeline/useCurrentPageRows";
 import isSubset from "./util/isSubset";
+import useFilterStateStore from "./pipeline/useFilterStateStore";
+import useInterfaces from "./toolbar/useInterfaces";
+import ToolbarContainer from "./toolbar/ToolbarContainer";
+import useExportFn from "./export/useExportFn";
 var Grid = function (_a) {
     var _b;
-    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel, editModel = _a.editModel, caption = _a.caption, styleModel = _a.styleModel;
-    var editableFilterState = (filterModel === null || filterModel === void 0 ? void 0 : filterModel.tableFilterState) || null;
-    var filterState = useFilterStateFromEditable(cols, editableFilterState);
+    var rows = _a.rows, cols = _a.cols, pagination = _a.pagination, sortModel = _a.sortModel, filterModel = _a.filterModel, selectModel = _a.selectModel, editModel = _a.editModel, caption = _a.caption, styleModel = _a.styleModel, useToolbar = _a.useToolbar;
+    var normalizedTableFilterModel = useFilterStateStore(filterModel, cols);
+    var editableFilterState = (normalizedTableFilterModel === null || normalizedTableFilterModel === void 0 ? void 0 : normalizedTableFilterModel.tableFilterState) || null;
     var filteredRows = useFilter(rows, editableFilterState);
-    var sortedRows = useSortedRows(filteredRows, cols, sortModel);
-    var currentPageRows = useCurrentPageRows(sortedRows, pagination);
+    var filterState = useFilterStateFromEditable(cols, editableFilterState);
+    var _c = useSortedRows(filteredRows, cols, sortModel), sortedRows = _c.sortedRows, sortingEnabled = _c.sortingEnabled, sortColDef = _c.sortColDef, setSortColDef = _c.setSortColDef;
+    var _d = useCurrentPageRows(sortedRows, pagination), paginatedRows = _d.paginatedRows, normalizedModel = _d.normalizedModel;
     var showSelectCol = selectModel && selectModel.mode !== "row";
     var ariaColIndexOffset = showSelectCol ? 1 : 0;
-    var displayRows = useDisplayRows(currentPageRows, cols, ariaColIndexOffset);
-    var _c = useState(false), filterOptionsVisible = _c[0], setFilterOptionsVisible = _c[1];
+    var displayRows = useDisplayRows(paginatedRows, cols, ariaColIndexOffset);
+    var _e = useState(false), filterOptionsVisible = _e[0], setFilterOptionsVisible = _e[1];
+    var exportFnInfo = useExportFn({
+        rows: rows,
+        cols: cols,
+        filteredRows: filterModel && filteredRows,
+        currentPageRows: pagination && paginatedRows,
+    });
+    var toolbarInterfaceParams = useMemo(function () { return ({
+        filtering: useToolbar && filterState && filterModel && normalizedTableFilterModel
+            ? {
+                filterState: filterState,
+                setFilterState: normalizedTableFilterModel.setTableFilterState,
+                caption: filterModel.filterTableCaption,
+                styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
+            }
+            : undefined,
+        exporting: useToolbar
+            ? { exportFnInfo: exportFnInfo, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel }
+            : undefined,
+    }); }, [
+        exportFnInfo,
+        filterModel,
+        filterState,
+        normalizedTableFilterModel,
+        styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel,
+        styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
+        useToolbar,
+    ]);
+    var toolbarInterfaces = useInterfaces(toolbarInterfaceParams);
     var handleToggleFilterOptions = function () {
         setFilterOptionsVisible(!filterOptionsVisible);
     };
@@ -79,11 +112,12 @@ var Grid = function (_a) {
         selectModel.setSelected(selectModel.selected.filter(function (num) { return num !== index; }));
     }; };
     // used to group radio buttons for selection
+    var gridId = useId();
     var getSelectInputModel = function (id, selectModel) {
         if (selectModel.type === "single") {
             return {
                 type: "radio",
-                name: selectModel.groupName,
+                name: selectModel.groupName || gridId,
             };
         }
         return {
@@ -113,9 +147,9 @@ var Grid = function (_a) {
         }
         var getMultiExistingSelection = function (selectionExists, rows) {
             var rowIndices = rows.map(function (_, index) { return index; });
-            var isFullSelection = isSubset(rowIndices, selectModel.selected);
-            // Note that isFullSelection is true if there are no rows at all. In that case, the existing selection value
+            // Note that isFullSelection is true if there are no rows at all. In that case, the return value of this function
             // should be "none", not "full".
+            var isFullSelection = isSubset(rowIndices, selectModel.selected);
             if (!selectionExists) {
                 return "none";
             }
@@ -157,18 +191,16 @@ var Grid = function (_a) {
     var unwrappedAdditionalStyleModel = useMemo(function () {
         return unwrapAdditionalComponentsStyleModel(styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel);
     }, [styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel]);
-    return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [filterState && filterModel && (_jsxs("div", { "data-testid": "rbdg-filter-inputs-div", className: classNames(unwrappedAdditionalStyleModel.filterInputsDiv), children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions, classes: (_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _b === void 0 ? void 0 : _b.filterUiToggleButton }), filterOptionsVisible && (_jsx(FilterOptionsTable, { caption: filterModel.filterTableCaption, filterState: filterState, setFilterState: filterModel.setTableFilterState, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel }))] })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames(unwrappedAdditionalStyleModel.tableAndPaginationDiv), children: [_jsxs("table", { className: classNames("table", {
+    return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [normalizedTableFilterModel && !useToolbar && (_jsxs("div", { "data-testid": "rbdg-filter-inputs-div", className: classNames(unwrappedAdditionalStyleModel.filterInputsDiv), children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".concat(filterOptionsVisible ? "Hide" : "Show ", " Filter Options"), onClick: handleToggleFilterOptions, classes: (_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _b === void 0 ? void 0 : _b.filterUiToggleButton }), filterOptionsVisible && (_jsx(FilterOptionsTable, { caption: filterModel.filterTableCaption, filterState: filterState, setFilterState: normalizedTableFilterModel.setTableFilterState, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel }))] })), useToolbar && (_jsx(ToolbarContainer, { interfaces: toolbarInterfaces, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbarStyleModel })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames(unwrappedAdditionalStyleModel.tableAndPaginationDiv), children: [_jsxs("table", { className: classNames("table", {
                             "table-hover": rowsAreSelectable,
                         }, unwrappedTableModel.table), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames(unwrappedTableModel.caption), children: caption })), _jsx("thead", { className: classNames(unwrappedTableModel.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames(unwrappedTableModel.theadTr), children: [showSelectCol && (_jsx(SelectAllHeaderCell, { selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh })), cols.map(function (_a, index) {
-                                            var _b;
                                             var name = _a.name, label = _a.label, sortable = _a.sortable;
-                                            var colSortModel = sortModel && sortable
+                                            var colSortModel = sortingEnabled && sortable
                                                 ? {
-                                                    sortOrder: ((_b = sortModel.sortColDef) === null || _b === void 0 ? void 0 : _b.name) === name
-                                                        ? sortModel.sortColDef.order
-                                                        : null,
+                                                    sortOrder: (sortColDef === null || sortColDef === void 0 ? void 0 : sortColDef.name) === name ? sortColDef.order : null,
                                                     setSortOrder: function (order) {
-                                                        sortModel.setSortColDef(order && { name: name, order: order });
+                                                        setSortColDef &&
+                                                            setSortColDef(order && { name: name, order: order });
                                                     },
                                                 }
                                                 : undefined;
@@ -183,6 +215,6 @@ var Grid = function (_a) {
                                         }, dataCellInputClasses: function (colIndex) {
                                             return unwrappedTableModel.tbodyTdInput(row.id, index, colIndex);
                                         }, editCellClasses: unwrappedTableModel.editColTd(row.id, index), saveButtonClasses: unwrappedTableModel.editSaveButton(row.id, index), deleteButtonClasses: unwrappedTableModel.editDeleteButton(row.id, index), startButtonClasses: unwrappedTableModel.editStartButton(row.id, index), cancelButtonClasses: unwrappedTableModel.editCancelButton(row.id, index), children: showSelectCol && (_jsx("td", { className: classNames(unwrappedTableModel.rowSelectColTd(row.id, index)), "aria-colindex": 1, children: _jsx(SelectionInput, { selected: selectedSet.has(row.id), selectionInputModel: getSelectInputModel(row.id, selectModel), selectCallback: getSelectHandler(row.id), additionalClasses: unwrappedTableModel.rowSelectInput(row.id, index) }) })) }, row.id));
-                                }) })] }), pagination && (_jsx(Pagination, { componentSize: pagination.componentSize || "medium", pageSizeOptions: pagination.pageSizeOptions, pageSizeIndex: pagination.pageSizeIndex, handleSetPageSizeIndex: pagination.setPageSizeIndex, handleSetPageNum: pagination.setCurrentPage, prePagingNumRows: sortedRows.length, maxPageButtons: pagination.maxPageButtons, currentPage: pagination.currentPage, pageSelectorJustifyContent: pagination.pageSelectorJustifyContent, pageSelectorAriaLabel: pagination.pageSelectorAriaLabel }))] })] }));
+                                }) })] }), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: unwrappedAdditionalStyleModel.paginationUiDiv }))] })] }));
 };
 export default Grid;

package/export/ExportForm.d.ts

@@ -0,0 +1,9 @@
+import { ExportFnInfo } from "./useExportFn";
+import { FC } from "react";
+import { ExportFormStyleModel } from "../styling/types";
+export interface ExportFormProps {
+    exportFnInfo: ExportFnInfo;
+    styleModel?: ExportFormStyleModel;
+}
+declare const ExportForm: FC<ExportFormProps>;
+export default ExportForm;

package/export/ExportForm.js

@@ -0,0 +1,97 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 formId = useId();
+    var _c = useState({
+        stage: "original",
+        formatted: false,
+        fileType: "json",
+    }), formState = _c[0], setFormState = _c[1];
+    var getChangeHandler = function (field, value) {
+        return function () {
+            setFormState(function (prev) {
+                var _a;
+                return (__assign(__assign({}, prev), (_a = {}, _a[field] = value, _a)));
+            });
+        };
+    };
+    var getRowCountLabel = function (featureType, count) {
+        if (count === undefined) {
+            return "".concat(featureType, " disabled");
+        }
+        return "".concat(count, " ").concat(count === 1 ? "row" : "rows");
+    };
+    var stageOptions = [
+        {
+            value: "original",
+            label: "Original rows (total ".concat(rowCounts.total, " ").concat(rowCounts.total === 1 ? "row" : "rows", ")"),
+            disabled: false,
+        },
+        {
+            value: "filtered",
+            label: "After filters applied (".concat(getRowCountLabel("filtering", rowCounts.filtered), ")"),
+            disabled: !filteringEnabled,
+        },
+        {
+            value: "paged",
+            label: "Current page only (".concat(getRowCountLabel("pagination", rowCounts.currentPage), ")"),
+            disabled: !paginationEnabled,
+        },
+    ];
+    var formatOptions = [
+        {
+            formatted: false,
+            label: "Use original data",
+            disabled: false,
+        },
+        {
+            formatted: true,
+            label: "Apply formatters to data".concat(formattersExist ? "" : " (no formatters defined)"),
+            disabled: !formattersExist,
+        },
+    ];
+    var fileTypeOptions = [
+        {
+            fileType: "json",
+            label: "JSON",
+        },
+        {
+            fileType: "csv",
+            label: "CSV",
+        },
+    ];
+    var handleSubmit = function (event) {
+        event.preventDefault();
+        var stage = formState.stage, fileType = formState.fileType, formatted = formState.formatted;
+        exportFn(stage, fileType, formatted);
+    };
+    var legendClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.legend) || []);
+    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"]);
+    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));
+                    })] }), _jsxs("fieldset", { children: [_jsx("legend", { className: legendClasses, children: "Choose whether to apply formatters" }), formatOptions.map(function (_a) {
+                        var formatted = _a.formatted, label = _a.label, disabled = _a.disabled;
+                        return (_jsxs("div", { className: radioContainerClasses, children: [_jsx("input", { className: radioInputClasses, type: "radio", id: "".concat(formId, "-").concat(formatted), value: String(formatted), checked: formState.formatted === formatted, onChange: getChangeHandler("formatted", formatted), disabled: disabled }), _jsx("label", { className: radioLabelClasses, htmlFor: "".concat(formId, "-").concat(formatted), children: label })] }, String(formatted)));
+                    })] }), _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" })] }));
+};
+export default ExportForm;

package/export/types.d.ts

@@ -0,0 +1,5 @@
+import { RowId } from "../types";
+export type FormattedExportRow = {
+    id: RowId;
+    data: Record<string, string | number>;
+};

package/export/types.js

@@ -0,0 +1 @@
+export {};

package/export/useExportFn.d.ts

@@ -0,0 +1,23 @@
+import { ColDef, RowDef } from "../types";
+export interface UseExportFnsParams {
+    rows: RowDef[];
+    cols: ColDef[];
+    filteredRows?: RowDef[];
+    currentPageRows?: RowDef[];
+}
+export type Stage = "original" | "filtered" | "paged";
+export type FileType = "csv" | "json";
+export type ExportFn = (stage: Stage, fileType: FileType, formatted: boolean) => void;
+export interface ExportFnInfo {
+    exportFn: ExportFn;
+    formattersExist: boolean;
+    filteringEnabled: boolean;
+    paginationEnabled: boolean;
+    rowCounts: {
+        total: number;
+        filtered?: number;
+        currentPage?: number;
+    };
+}
+declare const useExportFn: (params: UseExportFnsParams) => ExportFnInfo;
+export default useExportFn;

package/export/useExportFn.js

@@ -0,0 +1,115 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
+import Papa from "papaparse";
+import { useCallback, useMemo } from "react";
+var downloadFile = function (data, filename, type) {
+    var blob = new Blob([data], { type: type });
+    var url = URL.createObjectURL(blob);
+    var a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    a.remove();
+    setTimeout(function () { return URL.revokeObjectURL(url); }, 0);
+};
+var getDefaultFormatter = function (type) {
+    switch (type) {
+        case "date":
+            return dateToInputStr;
+        case "datetime":
+            return dateToDatetimeInputStr;
+        default:
+            return function (a) { return a; };
+    }
+};
+var applyFormatters = function (rows, cols, defaultOnly) {
+    var colToFormatter = cols.reduce(function (map, _a) {
+        var name = _a.name, formatter = _a.formatter, type = _a.type;
+        var normalizedFormatter = (!defaultOnly && formatter) || getDefaultFormatter(type);
+        map.set(name, normalizedFormatter);
+        return map;
+    }, new Map());
+    return rows.map(function (_a) {
+        var id = _a.id, data = _a.data;
+        return ({
+            id: id,
+            data: Object.keys(data).reduce(function (newData, name) {
+                var formatter = colToFormatter.get(name);
+                newData[name] = formatter(data[name]);
+                return newData;
+            }, {}),
+        });
+    });
+};
+var flattenExportRows = function (rows) {
+    return rows.map(function (_a) {
+        var id = _a.id, data = _a.data;
+        return (__assign({ id: id }, data));
+    });
+};
+var exportJson = function (rows, cols, useDefaultFormatters) {
+    var formattedRows = applyFormatters(rows, cols, useDefaultFormatters);
+    var json = JSON.stringify(formattedRows, null, 2);
+    downloadFile(json, "export.json", "application/json");
+};
+var exportCsv = function (rows, cols, useDefaultFormatters) {
+    var formattedRows = applyFormatters(rows, cols, useDefaultFormatters);
+    var flattenedRows = flattenExportRows(formattedRows);
+    var csv = Papa.unparse(flattenedRows, { header: true });
+    downloadFile(csv, "export.csv", "text/csv");
+};
+var useExportFn = function (_a) {
+    var rows = _a.rows, cols = _a.cols, filteredRows = _a.filteredRows, currentPageRows = _a.currentPageRows;
+    var formattersExist = useMemo(function () { return cols.reduce(function (prev, _a) {
+        var formatter = _a.formatter;
+        return prev || !!formatter;
+    }, false); }, [cols]);
+    var exportFn = useCallback(function (stage, fileType, formatted) {
+        if (stage === "filtered" && !filteredRows) {
+            throw Error("Cannot export filtered rows because filtering is not enabled for this grid");
+        }
+        if (stage === "paged" && !currentPageRows) {
+            throw Error("Cannot export current page of rows because paging is not enabled for this grid");
+        }
+        if (formatted && !formattersExist) {
+            throw Error("Cannot export formatted rows because formatters are not defined for this grid");
+        }
+        var exportRows = (function () {
+            switch (stage) {
+                case "filtered":
+                    return filteredRows;
+                case "paged":
+                    return currentPageRows;
+                default:
+                    return rows;
+            }
+        })();
+        if (fileType === "csv") {
+            exportCsv(exportRows, cols, !formatted);
+            return;
+        }
+        exportJson(exportRows, cols, !formatted);
+    }, [cols, currentPageRows, filteredRows, formattersExist, rows]);
+    return useMemo(function () { return ({
+        exportFn: exportFn,
+        formattersExist: formattersExist,
+        paginationEnabled: !!currentPageRows,
+        filteringEnabled: !!filteredRows,
+        rowCounts: {
+            total: rows.length,
+            filtered: filteredRows === null || filteredRows === void 0 ? void 0 : filteredRows.length,
+            currentPage: currentPageRows === null || currentPageRows === void 0 ? void 0 : currentPageRows.length,
+        }
+    }); }, [currentPageRows, exportFn, filteredRows, formattersExist, rows.length]);
+};
+export default useExportFn;

package/filtering/DateFilterRow.js

@@ -10,9 +10,8 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useId } from "react";
 import { dateFilterSchemeNames, } from "./types";
-import { nanoid } from "nanoid/non-secure";
 import FilterRow from "./FilterRow";
 import classNames from "classnames";
 var DateFilterRow = function (_a) {
@@ -35,7 +34,7 @@ var DateFilterRow = function (_a) {
     };
     var enabled = filterState.enabled, scheme = filterState.scheme, startDate = filterState.startDate, endDate = filterState.endDate;
     var inputType = includeTime ? "datetime-local" : "date";
-    var inputId = useMemo(function () { return nanoid(); }, []);
+    var inputId = useId();
     var startDateInputId = "$startDate-".concat(inputId);
     var endDateInputId = "$endDate-".concat(inputId);
     var startDateInputLabel = "".concat(columnLabel, " Column Filter Start Date");

package/filtering/FilterOptionsTable.d.ts

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

package/filtering/FilterOptionsTable.js

@@ -112,7 +112,9 @@ var FilterOptionsTable = function (_a) {
         var editableTableFilterState = convertFilterFormStateToEditableState(formState);
         setFilterState(editableTableFilterState);
     };
-    // TODO: consider using an accordion to show and hide this component
+    // TODO: consider using an accordion to show and hide this component.
+    // Will eventually be a moot point due to the toolbar being implemented, but
+    // still worth considering for backwards compatibility.
     return (_jsxs("form", { onSubmit: onSubmit, 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" })] }));
 };
 export default FilterOptionsTable;

package/filtering/types.d.ts

@@ -45,16 +45,22 @@ export interface BetweenDatesFilterState extends AbstractDateFilterState {
 }
 export type DateFilterState = StartDateFilterState | EndDateFilterState | BetweenDatesFilterState;
 export type FilterState = StringFilterState | NumberFilterState | DateFilterState;
-export interface FilterModel {
+export interface ControlledFilterModel {
+    type?: "controlled";
     tableFilterState: EditableTableFilterState;
     setTableFilterState: (state: EditableTableFilterState) => void;
     filterTableCaption?: string;
 }
+export type UncontrolledFilterModel = Partial<Pick<ControlledFilterModel, "tableFilterState" | "filterTableCaption">> & {
+    type: "uncontrolled";
+};
+export type NormalizedTableFilterModel = Pick<ControlledFilterModel, "tableFilterState" | "setTableFilterState">;
 export interface NumberFormFilterState extends AbstractFilterState {
     type: "number";
     scheme: NumberFilterScheme;
     inputValue: string;
 }
+export type FilterModel = ControlledFilterModel | UncontrolledFilterModel;
 export interface DateFormFilterState extends AbstractDateFilterState {
     scheme: DateFilterScheme;
     startDate: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@absreim/react-bootstrap-data-grid",
   "description": "Data grid UI component for use with web apps using React and Bootstrap",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",
@@ -16,7 +16,8 @@
   ],
   "dependencies": {
     "classnames": "^2.5.1",
-    "dayjs": "^1.11.13"
+    "dayjs": "^1.11.13",
+    "papaparse": "^5.5.3"
   },
   "peerDependencies": {
     "react": "^19",

package/pagination/Pagination.d.ts

@@ -1,16 +1,9 @@
 import { FC } from "react";
-import { JustifyContentSetting, Size } from "../types";
+import { NormalizedPaginationModel } from "./types";
 export interface PaginationProps {
-    componentSize: Size;
-    pageSizeOptions: number[];
-    pageSizeIndex: number;
-    handleSetPageSizeIndex: (index: number) => void;
-    handleSetPageNum: (index: number) => void;
+    normalizedModel: NormalizedPaginationModel;
     prePagingNumRows: number;
-    maxPageButtons: number;
-    currentPage: number;
-    pageSelectorAriaLabel?: string;
-    pageSelectorJustifyContent?: JustifyContentSetting;
+    containerDivClasses: string[];
 }
 declare const Pagination: FC<PaginationProps>;
 export default Pagination;

package/pagination/Pagination.js

@@ -1,20 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PageSizeSelector from "./PageSizeSelector";
 import PageSelector from "./PageSelector";
+import classNames from "classnames";
 var Pagination = function (_a) {
-    var componentSize = _a.componentSize, pageSizeOptions = _a.pageSizeOptions, pageSizeIndex = _a.pageSizeIndex, handleSetPageSizeIndex = _a.handleSetPageSizeIndex, handleSetPageNum = _a.handleSetPageNum, prePagingNumRows = _a.prePagingNumRows, maxPageButtons = _a.maxPageButtons, currentPage = _a.currentPage, pageSelectorAriaLabel = _a.pageSelectorAriaLabel, pageSelectorJustifyContent = _a.pageSelectorJustifyContent;
+    var normalizedModel = _a.normalizedModel, prePagingNumRows = _a.prePagingNumRows, containerDivClasses = _a.containerDivClasses;
+    var pageSizeOptions = normalizedModel.pageSizeOptions, pageSizeIndex = normalizedModel.pageSizeIndex, currentPage = normalizedModel.currentPage, setCurrentPage = normalizedModel.setCurrentPage, setPageSizeIndex = normalizedModel.setPageSizeIndex, componentSize = normalizedModel.componentSize, maxPageButtons = normalizedModel.maxPageButtons, pageSelectorAriaLabel = normalizedModel.pageSelectorAriaLabel, pageSelectorJustifyContent = normalizedModel.pageSelectorJustifyContent;
     var numPages = Math.ceil(prePagingNumRows / pageSizeOptions[pageSizeIndex]);
     var pageIndexAwarePageSizeSetter = function (newPageSizeIndex) {
         var newPageSize = pageSizeOptions[newPageSizeIndex];
         var maxPages = Math.ceil(prePagingNumRows / newPageSize);
-        handleSetPageSizeIndex(newPageSizeIndex);
+        setPageSizeIndex(newPageSizeIndex);
         // The new page size can cause the current page number to be out of bounds.
         // In that case, set the page num to the maximum possible with new page
         // size.
         if (currentPage > maxPages) {
-            handleSetPageNum(maxPages);
+            setCurrentPage(maxPages);
         }
     };
-    return (_jsxs("div", { className: "d-flex justify-content-end gap-2", children: [_jsx(PageSizeSelector, { componentSize: componentSize, pageSizeOptions: pageSizeOptions, pageSizeIndex: pageSizeIndex, handleSetPageSize: pageIndexAwarePageSizeSetter }), _jsx(PageSelector, { numPages: numPages, pageNum: currentPage, numButtons: maxPageButtons, setPageNum: handleSetPageNum, size: componentSize, ariaLabel: pageSelectorAriaLabel, alignment: pageSelectorJustifyContent })] }));
+    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 })] }));
 };
 export default Pagination;

package/pagination/types.d.ts

@@ -1,12 +1,22 @@
 import { JustifyContentSetting, Size } from "../types";
-export interface GridPaginationState {
-    pageSizeOptions: number[];
-    pageSizeIndex: number;
-    setPageSizeIndex: (pageSizeIndex: number) => void;
-    currentPage: number;
-    setCurrentPage: (pageNum: number) => void;
-    maxPageButtons: number;
+export interface PaginationOptions {
+    pageSizeOptions?: number[];
+    maxPageButtons?: number;
     componentSize?: Size;
     pageSelectorAriaLabel?: string;
     pageSelectorJustifyContent?: JustifyContentSetting;
 }
+export type ControlledPaginationModel = PaginationOptions & {
+    type?: "controlled";
+    pageSizeIndex: number;
+    setPageSizeIndex: (pageSizeIndex: number) => void;
+    currentPage: number;
+    setCurrentPage: (pageNum: number) => void;
+};
+export type UncontrolledPaginationModel = PaginationOptions & {
+    type: "uncontrolled";
+    startingPageSizeIndex?: number;
+    startingCurrentPage?: number;
+};
+export type GridPaginationState = ControlledPaginationModel | UncontrolledPaginationModel;
+export type NormalizedPaginationModel = Required<Omit<ControlledPaginationModel, "type" | "pageSelectorAriaLabel" | "pageSelectorJustifyContent">> & Pick<ControlledPaginationModel, "pageSelectorAriaLabel" | "pageSelectorJustifyContent">;

package/pipeline/useCurrentPageRows.d.ts

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

package/pipeline/useCurrentPageRows.js

@@ -1,14 +1,52 @@
-import { useMemo } from "react";
-var useCurrentPageRows = function (sortedRows, pagination) {
+import { useMemo, useState } from "react";
+var useCurrentPageRows = function (sortedRows, paginationModel) {
+    var componentSize = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.componentSize) || "medium";
+    var isControlled = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.type) !== "uncontrolled";
+    var _a = useState(isControlled ? 0 : paginationModel.startingPageSizeIndex || 0), internalPageSizeIndex = _a[0], setInternalPageSizeIndex = _a[1];
+    var pageSizeIndex = isControlled
+        ? (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSizeIndex) || 0
+        : internalPageSizeIndex;
+    var setPageSizeIndex = isControlled
+        ? paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.setPageSizeIndex
+        : setInternalPageSizeIndex;
+    var _b = useState(isControlled ? 1 : paginationModel.startingCurrentPage || 1), internalPageNum = _b[0], setInternalPageNum = _b[1];
+    var currentPage = isControlled
+        ? (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.currentPage) || 1
+        : internalPageNum;
+    var setCurrentPage = isControlled
+        ? paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.setCurrentPage
+        : setInternalPageNum;
+    var maxPageButtons = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.maxPageButtons) || 5;
     return useMemo(function () {
-        if (pagination === undefined) {
-            return sortedRows;
+        if (paginationModel === undefined) {
+            return { paginatedRows: sortedRows, normalizedModel: null };
         }
-        var pageSizeOptions = pagination.pageSizeOptions, pageSizeIndex = pagination.pageSizeIndex, currentPage = pagination.currentPage;
+        var pageSizeOptions = (paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSizeOptions) || [10, 25, 100];
+        var normalizedModel = {
+            pageSizeIndex: pageSizeIndex,
+            setPageSizeIndex: setPageSizeIndex,
+            currentPage: currentPage,
+            setCurrentPage: setCurrentPage,
+            pageSizeOptions: pageSizeOptions,
+            maxPageButtons: maxPageButtons,
+            componentSize: componentSize,
+            pageSelectorAriaLabel: paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSelectorAriaLabel,
+            pageSelectorJustifyContent: paginationModel === null || paginationModel === void 0 ? void 0 : paginationModel.pageSelectorJustifyContent,
+        };
         var pageSize = pageSizeOptions[pageSizeIndex];
         var lowerIndex = pageSize * (currentPage - 1);
         var upperIndex = lowerIndex + pageSize;
-        return sortedRows.slice(lowerIndex, upperIndex);
-    }, [sortedRows, pagination]);
+        var paginatedRows = sortedRows.slice(lowerIndex, upperIndex);
+        return { paginatedRows: paginatedRows, normalizedModel: normalizedModel };
+    }, [
+        paginationModel,
+        pageSizeIndex,
+        setPageSizeIndex,
+        currentPage,
+        setCurrentPage,
+        maxPageButtons,
+        componentSize,
+        sortedRows,
+    ]);
 };
 export default useCurrentPageRows;

package/pipeline/useFilterStateStore.d.ts

@@ -0,0 +1,4 @@
+import { FilterModel, NormalizedTableFilterModel } from "../filtering/types";
+import { ColDef } from "../types";
+declare const useFilterStateStore: (filterModel: FilterModel | undefined, cols: ColDef[]) => NormalizedTableFilterModel | null;
+export default useFilterStateStore;

package/pipeline/useFilterStateStore.js

@@ -0,0 +1,57 @@
+import { useState } from "react";
+var generateEmptyFilterState = function (cols) {
+    var filterState = {};
+    cols.forEach(function (_a) {
+        var type = _a.type, name = _a.name;
+        switch (type) {
+            case "string": {
+                filterState[name] = {
+                    type: "string",
+                    enabled: false,
+                    scheme: "contains",
+                    searchString: "",
+                };
+                break;
+            }
+            case "number": {
+                filterState[name] = {
+                    type: "number",
+                    enabled: false,
+                    scheme: "greaterOrEqual",
+                    numValue: null,
+                };
+                break;
+            }
+            default: {
+                filterState[name] = {
+                    type: type,
+                    enabled: false,
+                    scheme: "startFrom",
+                    startDate: null,
+                };
+            }
+        }
+    });
+    return filterState;
+};
+var useFilterStateStore = function (filterModel, cols) {
+    // Initial states being from prop values means that should uncontrolled
+    // FilterModel starting values change, the changes will not take effect
+    // unless the Grid is remounted. The documentation for this and other
+    // uncontrolled features should indicate this fact and recommend using
+    // controlled modes if this behavior is unacceptable.
+    var _a = useState((filterModel === null || filterModel === void 0 ? void 0 : filterModel.tableFilterState) || generateEmptyFilterState(cols)), internalFilterState = _a[0], setInternalFilterState = _a[1];
+    if (!filterModel) {
+        return null;
+    }
+    return filterModel.type === "uncontrolled"
+        ? {
+            tableFilterState: internalFilterState,
+            setTableFilterState: setInternalFilterState,
+        }
+        : {
+            tableFilterState: filterModel.tableFilterState,
+            setTableFilterState: filterModel.setTableFilterState,
+        };
+};
+export default useFilterStateStore;

package/pipeline/useSortedRows.d.ts

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

package/pipeline/useSortedRows.js

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 var getTypeComparator = function (typeStr) {
     if (typeStr === "date" || typeStr === "datetime") {
         return function (a, b) { return a.valueOf() - b.valueOf(); };
@@ -20,12 +20,21 @@ var getRowComparator = function (comparator, fieldName) {
     return function (rowA, rowB) { return comparator(rowA.data[fieldName], rowB.data[fieldName]); };
 };
 var useSortedRows = function (rows, cols, sortModel) {
-    return useMemo(function () {
-        if (!sortModel || !sortModel.sortColDef) {
+    var _a = useState(((sortModel === null || sortModel === void 0 ? void 0 : sortModel.type) === "uncontrolled" && sortModel.initialSortColDef) ||
+        null), internalSortColDef = _a[0], setInternalSortColDef = _a[1];
+    var sortColDef = (sortModel === null || sortModel === void 0 ? void 0 : sortModel.type) === "uncontrolled"
+        ? internalSortColDef
+        : (sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortColDef) || undefined;
+    var setSortColDef = (sortModel === null || sortModel === void 0 ? void 0 : sortModel.type) === "uncontrolled"
+        ? setInternalSortColDef
+        : (sortModel === null || sortModel === void 0 ? void 0 : sortModel.setSortColDef) || undefined;
+    var sortingEnabled = !!sortModel;
+    var sortedRows = useMemo(function () {
+        if (!sortColDef) {
             return rows;
         }
-        var sortFieldName = sortModel.sortColDef.name;
-        var sortOrder = sortModel.sortColDef.order;
+        var sortFieldName = sortColDef.name;
+        var sortOrder = sortColDef.order;
         var sortColIndex = cols.findIndex(function (_a) {
             var name = _a.name;
             return name === sortFieldName;
@@ -43,6 +52,7 @@ var useSortedRows = function (rows, cols, sortModel) {
             rowComparator = getRowComparator(descComparator, sortFieldName);
         }
         return rows.slice().sort(rowComparator);
-    }, [rows, cols, sortModel]);
+    }, [sortColDef, cols, rows]);
+    return { sortedRows: sortedRows, sortingEnabled: sortingEnabled, sortColDef: sortColDef, setSortColDef: setSortColDef };
 };
 export default useSortedRows;

package/selection/types.d.ts

@@ -12,7 +12,7 @@ export interface SingleSelectModel {
     type: "single";
     selected: RowId | null;
     setSelected: (selected: RowId | null) => void;
-    groupName: string;
+    groupName?: string;
 }
 export type SelectModel = SingleSelectModel | MultiSelectModel;
 export type MultiExistingSelection = "full" | "partial" | "none";

package/sorting/types.d.ts

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

package/styling/styleModelUnwrappers.js

@@ -54,4 +54,5 @@ export var unwrapAdditionalComponentsStyleModel = function (styleModel) { return
     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) || [],
 }); };

package/styling/types.d.ts

@@ -37,9 +37,25 @@ export interface AdditionalComponentsStyleModel {
     filterInputsDiv?: string[];
     tableAndPaginationDiv?: string[];
     filterUiToggleButton?: string[];
+    paginationUiDiv?: string[];
+}
+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/toolbar/Toolbar.d.ts

@@ -0,0 +1,12 @@
+import { ToolbarOption } from "./types";
+import { FC } from "react";
+export interface ToolbarProps {
+    enabledFeatures: Partial<Record<ToolbarOption, boolean>>;
+    option: ToolbarOption | null;
+    setOption: (option: ToolbarOption | null) => void;
+    toolbarClasses?: string[];
+    activeClasses?: string[];
+    inactiveClasses?: string[];
+}
+declare const Toolbar: FC<ToolbarProps>;
+export default Toolbar;

package/toolbar/Toolbar.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+var buttonSpecs = {
+    filtering: {
+        label: "Filtering",
+        icon: (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M6 10.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5" }) })),
+    },
+    exporting: {
+        label: "Export",
+        icon: (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5" }), _jsx("path", { d: "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708z" })] })),
+    },
+};
+// TODO: figure out tabindex and accessibility
+var Toolbar = function (_a) {
+    var enabledFeatures = _a.enabledFeatures, option = _a.option, setOption = _a.setOption, toolbarClasses = _a.toolbarClasses, activeClasses = _a.activeClasses, inactiveClasses = _a.inactiveClasses;
+    return (_jsx("div", { className: classNames(toolbarClasses || ["hstack", "gap-2", "justify-content-start", "px-2"]), role: "toolbar", children: Object.keys(buttonSpecs)
+            .filter(function (toolbarOption) { return !!enabledFeatures[toolbarOption]; })
+            .map(function (toolbarOption) { return (_jsx("button", { "aria-label": buttonSpecs[toolbarOption].label, "aria-roledescription": "Grouped toggle button to show/hide ".concat(toolbarOption, " UI"), "aria-pressed": option === toolbarOption, className: classNames.apply(void 0, (option === toolbarOption
+                ? activeClasses || ["btn", "btn-outline-secondary", "active"]
+                : inactiveClasses || ["btn", "btn-outline-secondary"])), title: buttonSpecs[toolbarOption].label, onClick: function () {
+                setOption(option === toolbarOption
+                    ? null
+                    : toolbarOption);
+            }, children: buttonSpecs[toolbarOption].icon }, toolbarOption)); }) }));
+};
+export default Toolbar;

package/toolbar/ToolbarContainer.d.ts

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

package/toolbar/ToolbarContainer.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Toolbar from "./Toolbar";
+import classNames from "classnames";
+var ToolbarContainer = function (_a) {
+    var interfaces = _a.interfaces, styleModel = _a.styleModel;
+    var _b = useState(null), option = _b[0], setOption = _b[1];
+    var enabledFeatures = Object.keys(interfaces).reduce(function (prev, toolbarOption) {
+        prev[toolbarOption] =
+            !!interfaces[toolbarOption];
+        return prev;
+    }, {});
+    // TODO: mention in documentation that Bootstrap 5.3 is required due to the
+    // use of the z-index utility
+    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",
+                        "bg-body",
+                        "border",
+                        "shadow",
+                        "p-2",
+                    ]), children: interfaces[option] })) })] }));
+};
+export default ToolbarContainer;

package/toolbar/types.d.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from "react";
+export type ToolbarOption = "filtering" | "exporting";
+export type ToolbarInterfaces = Partial<Record<ToolbarOption, ReactNode>>;

package/toolbar/types.js

@@ -0,0 +1 @@
+export {};

package/toolbar/useInterfaces.d.ts

@@ -0,0 +1,9 @@
+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;
+export default useInterfaces;

package/toolbar/useInterfaces.js

@@ -0,0 +1,23 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import FilterOptionsTable from "../filtering/FilterOptionsTable";
+import { useMemo } from "react";
+import ExportForm from "../export/ExportForm";
+var useInterfaces = function (_a) {
+    var filtering = _a.filtering, exporting = _a.exporting;
+    return useMemo(function () { return ({
+        filtering: filtering ? _jsx(FilterOptionsTable, __assign({}, filtering)) : undefined,
+        exporting: exporting ? _jsx(ExportForm, __assign({}, exporting)) : undefined,
+    }); }, [exporting, filtering]);
+};
+export default useInterfaces;