@absreim/react-bootstrap-data-grid-pro 2.4.0

package/LICENSE

@@ -0,0 +1,16 @@
+Commercial License
+
+Copyright (c) 2026 Brook Li
+
+The software in this package can only be used for evaluation purposes.
+
+A license to use the software in this package in production is currently not available but there are plans to provide
+one in the near future. Once a license is available, this file will be updated with it.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,6 @@
+**@absreim/react-bootstrap-data-grid-pro** is the paid version of a data grid UI component meant for web apps using both
+React and Bootstrap. A license key is required for use in production.
+
+See the documentation site at https://react-bootstrap-data-grid.vercel.app/ for instructions on usage.
+
+See the source repository at https://github.com/absreim/react-bootstrap-data-grid to view the source code.

package/grid/Grid.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { GridProps } from "./types";
+declare const Grid: FC<GridProps>;
+export default Grid;
+export type { GridProps } from "./types";

package/grid/Grid.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import InternalGrid from "./InternalGrid";
+import ColHeaderCell from "./main/ColHeaderCell";
+import useCombinedPipeline from "./pipeline/useCombinedPipeline";
+import useGridSelectionFns from "./pipeline/useGridSelectionFns";
+import useUnwrappedGridStyles from "./pipeline/useUnwrappedGridStyles";
+import useGetInputStrSubmitCallback from "./pipeline/useGetInputStrSubmitCallback";
+import useAugFormattedRows from "./pipeline/useAugFormattedRows";
+import BodyRows from "./main/BodyRows";
+var Grid = function (props) {
+    var rows = props.rows, cols = props.cols, filterModel = props.filterModel, sortModel = props.sortModel, pagination = props.pagination, selectModel = props.selectModel, styleModel = props.styleModel, editModel = props.editModel;
+    var combinedPipelineOutput = useCombinedPipeline({
+        rows: rows,
+        cols: cols,
+        filterModel: filterModel,
+        sortModel: sortModel,
+        pagination: pagination,
+        selectModel: selectModel,
+    });
+    var _a = combinedPipelineOutput.sortedRowsOutput, sortColDef = _a.sortColDef, setSortColDef = _a.setSortColDef, sortingEnabled = _a.sortingEnabled, showSelectCol = combinedPipelineOutput.showSelectCol, displayRows = combinedPipelineOutput.displayRows;
+    var gridSelectionFns = useGridSelectionFns(selectModel, rows);
+    var unwrappedStyles = useUnwrappedGridStyles(styleModel);
+    var getInputStrSubmitCallback = useGetInputStrSubmitCallback(editModel, cols);
+    var colNameToWidth = useMemo(function () {
+        var map = {};
+        cols.forEach(function (_a) {
+            var name = _a.name, width = _a.width;
+            return (map[name] = width);
+        });
+        return map;
+    }, [cols]);
+    var augFormattedRows = useAugFormattedRows(colNameToWidth, displayRows);
+    var colHeaderCells = cols.map(function (_a, index) {
+        var _b;
+        var name = _a.name, label = _a.label, sortable = _a.sortable, width = _a.width;
+        var colSortModel = sortingEnabled && sortable
+            ? {
+                sortOrder: (sortColDef === null || sortColDef === void 0 ? void 0 : sortColDef.name) === name ? sortColDef.order : null,
+                setSortOrder: function (order) {
+                    setSortColDef && setSortColDef(order && { name: name, order: order });
+                },
+            }
+            : undefined;
+        return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: ((_b = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _b === void 0 ? void 0 : _b.theadTh) &&
+                styleModel.mainTableStyleModel.theadTh(index), width: width }, name));
+    });
+    var bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, unwrappedStyles: unwrappedStyles, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback }));
+    return (_jsx(InternalGrid, { gridProps: props, hooks: {
+            pipelineOutput: combinedPipelineOutput,
+            selectFns: gridSelectionFns,
+            unwrappedStyles: unwrappedStyles,
+        }, slots: { colHeaderCells: colHeaderCells, bodyRows: bodyRows } }));
+};
+export default Grid;

package/grid/InternalGrid.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from "react";
+import { BaseGridProps } from "./types";
+import { UseCombinedPipelineHook } from "./pipeline/useCombinedPipeline";
+import { UseGridSelectionFnsHook } from "./pipeline/useGridSelectionFns";
+import { UseUnwrappedGridStylesHook } from "./pipeline/useUnwrappedGridStyles";
+export interface InternalGridProps {
+    gridProps: BaseGridProps;
+    hooks: {
+        selectFns: UseGridSelectionFnsHook;
+        pipelineOutput: UseCombinedPipelineHook;
+        unwrappedStyles: UseUnwrappedGridStylesHook;
+    };
+    slots: {
+        colHeaderCells: ReactNode;
+        bodyRows: ReactNode;
+    };
+}
+declare const InternalGrid: FC<InternalGridProps>;
+export default InternalGrid;

package/grid/InternalGrid.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import ToggleButton from "./main/ToggleButton";
+import FilterOptionsTable from "./filtering/FilterOptionsTable";
+import SelectAllHeaderCell from "./selection/SelectAllHeaderCell";
+import Pagination from "./pagination/Pagination";
+import classNames from "classnames";
+import useInterfaces from "./toolbar/useInterfaces";
+import ToolbarContainer from "./toolbar/ToolbarContainer";
+import useExportFn from "./export/useExportFn";
+import getWidthStyle from "./util/getWidthStyle";
+var InternalGrid = function (_a) {
+    var _b;
+    var _c = _a.gridProps, rows = _c.rows, cols = _c.cols, pagination = _c.pagination, filterModel = _c.filterModel, selectModel = _c.selectModel, editModel = _c.editModel, caption = _c.caption, styleModel = _c.styleModel, useToolbar = _c.useToolbar, responsive = _c.responsive, displayMode = _c.displayMode, _d = _a.hooks, pipelineOutput = _d.pipelineOutput, selectFns = _d.selectFns, unwrappedStyles = _d.unwrappedStyles, _e = _a.slots, colHeaderCells = _e.colHeaderCells, bodyRows = _e.bodyRows;
+    var normalizedTableFilterModel = pipelineOutput.normalizedTableFilterModel, filteredRows = pipelineOutput.filteredRows, filterState = pipelineOutput.filterState, sortedRows = pipelineOutput.sortedRowsOutput.sortedRows, _f = pipelineOutput.currentPageRowsOutput, paginatedRows = _f.paginatedRows, normalizedModel = _f.normalizedModel, showSelectCol = pipelineOutput.showSelectCol;
+    var _g = useState(false), filterOptionsVisible = _g[0], setFilterOptionsVisible = _g[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);
+    };
+    var rowsAreSelectable = selectFns.rowsAreSelectable, selectionInfo = selectFns.selectionInfo, selectAllOnClick = selectFns.selectAllOnClick;
+    var unwrappedTableModel = unwrappedStyles.unwrappedTableModel, unwrappedAdditionalStyleModel = unwrappedStyles.unwrappedAdditionalStyleModel;
+    var mainTable = (_jsxs("table", { className: classNames("table", {
+            "table-hover": rowsAreSelectable,
+            "d-block": displayMode === "block",
+        }, unwrappedTableModel.table), "aria-rowcount": filteredRows.length + 1, children: [caption !== undefined && (_jsx("caption", { className: classNames(unwrappedTableModel.caption), children: caption })), _jsx("thead", { className: classNames(unwrappedTableModel.thead), children: _jsxs("tr", { "aria-rowindex": 1, className: classNames(unwrappedTableModel.theadTr), children: [showSelectCol && (_jsx(SelectAllHeaderCell, { style: getWidthStyle(selectModel === null || selectModel === void 0 ? void 0 : selectModel.selectColWidth), selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh })), colHeaderCells, editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames(unwrappedTableModel.editColTh), style: getWidthStyle(editModel === null || editModel === void 0 ? void 0 : editModel.editColWidth), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(unwrappedTableModel.tbody), children: bodyRows })] }));
+    return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [normalizedTableFilterModel && !useToolbar && (_jsxs("div", { "data-testid": "rbdg-filter-inputs-div", className: classNames(unwrappedAdditionalStyleModel.filterInputsDiv), children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: "".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: [responsive ? (_jsx("div", { "data-testid": "rbdg-table-div", className: "table-responsive", children: mainTable })) : (_jsx(_Fragment, { children: mainTable })), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: unwrappedAdditionalStyleModel.paginationUiDiv }))] })] }));
+};
+export default InternalGrid;

package/grid/editing/EditControlsCell.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties, FC } from "react";
+export interface EditControlsCellProps {
+    ariaColIndex: number;
+    beginEditingCallback: () => void;
+    cancelEditingCallback: () => void;
+    isEditing: boolean;
+    saveCallback: () => void;
+    deleteCallback?: () => void;
+    editControlsCellClasses: string[];
+    saveButtonClasses: string[];
+    deleteButtonClasses: string[];
+    startButtonClasses: string[];
+    cancelButtonClasses: string[];
+    style?: CSSProperties;
+}
+declare const EditControlsCell: FC<EditControlsCellProps>;
+export default EditControlsCell;

package/grid/editing/EditControlsCell.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+var stopPropagationWrapper = function (fn) { return function (event) {
+    event.stopPropagation();
+    fn();
+}; };
+var EditControlsCell = function (_a) {
+    var ariaColIndex = _a.ariaColIndex, beginEditingCallback = _a.beginEditingCallback, cancelEditingCallback = _a.cancelEditingCallback, isEditing = _a.isEditing, saveCallback = _a.saveCallback, deleteCallback = _a.deleteCallback, editControlsCellClasses = _a.editControlsCellClasses, saveButtonClasses = _a.saveButtonClasses, deleteButtonClasses = _a.deleteButtonClasses, startButtonClasses = _a.startButtonClasses, cancelButtonClasses = _a.cancelButtonClasses;
+    return (_jsx("td", { "aria-colindex": ariaColIndex, className: classNames(editControlsCellClasses), children: _jsx("div", { className: "hstack gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { "aria-label": "Cancel", className: classNames("btn", cancelButtonClasses.length === 0
+                            ? ["btn-secondary"]
+                            : cancelButtonClasses), onClick: stopPropagationWrapper(cancelEditingCallback), title: "Cancel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z" }) }) }), _jsx("button", { "aria-label": "Save", className: classNames("btn", saveButtonClasses.length === 0
+                            ? ["btn-primary"]
+                            : saveButtonClasses), onClick: stopPropagationWrapper(saveCallback), title: "Save", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M12 2h-2v3h2z" }), _jsx("path", { d: "M1.5 0A1.5 1.5 0 0 0 0 1.5v13A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5V2.914a1.5 1.5 0 0 0-.44-1.06L14.147.439A1.5 1.5 0 0 0 13.086 0zM4 6a1 1 0 0 1-1-1V1h10v4a1 1 0 0 1-1 1zM3 9h10a1 1 0 0 1 1 1v5H2v-5a1 1 0 0 1 1-1" })] }) })] })) : (_jsxs(_Fragment, { children: [deleteCallback && (_jsx("button", { "aria-label": "Delete", className: classNames("btn", deleteButtonClasses.length === 0
+                            ? ["btn-secondary"]
+                            : deleteButtonClasses), onClick: stopPropagationWrapper(deleteCallback), title: "Delete", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" }) }) })), _jsx("button", { "aria-label": "Edit", className: classNames("btn", startButtonClasses.length === 0
+                            ? ["btn-primary"]
+                            : startButtonClasses), onClick: stopPropagationWrapper(beginEditingCallback), title: "Edit", children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: [_jsx("path", { d: "M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" }), _jsx("path", { fillRule: "evenodd", d: "M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z" })] }) })] })) }) }));
+};
+export default EditControlsCell;

package/grid/editing/EditableRow.d.ts

@@ -0,0 +1,22 @@
+import { CSSProperties, FC, ReactNode } from "react";
+import { RowId } from "../types";
+import React from "react";
+import { CellData } from "./types";
+export type EditableRowProps = Pick<React.ComponentProps<"tr">, "onClick" | "className" | "aria-rowindex" | "aria-selected"> & {
+    ariaColIndexOffset: number;
+    dataRowId: RowId;
+    children: ReactNode;
+    cellData: CellData[];
+    updateCallback?: (values: string[]) => void;
+    deleteCallback?: () => void;
+    dataCellClasses: (colIndex: number) => string[];
+    dataCellInputClasses: (colIndex: number) => string[];
+    editCellClasses: string[];
+    deleteButtonClasses: string[];
+    cancelButtonClasses: string[];
+    startButtonClasses: string[];
+    saveButtonClasses: string[];
+    editControlCellStyles?: CSSProperties;
+};
+declare const EditableRow: FC<EditableRowProps>;
+export default EditableRow;

package/grid/editing/EditableRow.js

@@ -0,0 +1,68 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
+import EditControlsCell from "./EditControlsCell";
+import classNames from "classnames";
+import getWidthStyle from "../util/getWidthStyle";
+var initValueToFormValue = function (value, type) {
+    switch (type) {
+        case "date":
+            return dateToInputStr(value);
+        case "datetime":
+            return dateToDatetimeInputStr(value);
+        case "number":
+            return String(value);
+        default:
+            return value;
+    }
+};
+var colDataTypeToInputType = function (colDataType) {
+    switch (colDataType) {
+        case "date":
+            return "date";
+        case "datetime":
+            return "datetime-local";
+        case "number":
+            return "number";
+        default:
+            return "text";
+    }
+};
+var EditableRow = function (_a) {
+    var ariaColIndexOffset = _a.ariaColIndexOffset, cellData = _a.cellData, children = _a.children, updateCallback = _a.updateCallback, deleteCallback = _a.deleteCallback, onClick = _a.onClick, className = _a.className, ariaRowIndex = _a["aria-rowindex"], ariaSelected = _a["aria-selected"], dataRowId = _a.dataRowId, dataCellClasses = _a.dataCellClasses, dataCellInputClasses = _a.dataCellInputClasses, editCellClasses = _a.editCellClasses, saveButtonClasses = _a.saveButtonClasses, startButtonClasses = _a.startButtonClasses, cancelButtonClasses = _a.cancelButtonClasses, deleteButtonClasses = _a.deleteButtonClasses, editControlCellStyles = _a.editControlCellStyles;
+    var trRef = useRef(null);
+    var _b = useState(false), isEditing = _b[0], setIsEditing = _b[1];
+    var handleSave = function () {
+        var failedValidationFound = false;
+        var formValues = [];
+        for (var _i = 0, _a = Array.from(trRef.current.children); _i < _a.length; _i++) {
+            var rowChild = _a[_i];
+            if (!(rowChild instanceof HTMLTableCellElement)) {
+                console.warn("Found non-td element inside EditableRow");
+                continue;
+            }
+            for (var _b = 0, _c = Array.from(rowChild.children); _b < _c.length; _b++) {
+                var cellChild = _c[_b];
+                if (!(cellChild instanceof HTMLInputElement) ||
+                    cellChild.type === "checkbox" ||
+                    cellChild.type === "radio") {
+                    continue;
+                }
+                formValues.push(cellChild.value);
+                failedValidationFound =
+                    !cellChild.reportValidity() || failedValidationFound;
+                break; // Each cell should only have one input element
+            }
+        }
+        if (!failedValidationFound) {
+            updateCallback(formValues);
+            setIsEditing(false);
+        }
+    };
+    return (_jsxs("tr", { ref: trRef, onClick: onClick, className: className, "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, "data-rowid": dataRowId, children: [children, cellData.map(function (_a, index) {
+                var type = _a.type, value = _a.value, formattedValue = _a.formattedValue, label = _a.label, width = _a.width;
+                return (_jsx("td", { "aria-colindex": index + ariaColIndexOffset + 1, className: classNames(dataCellClasses(index)), style: getWidthStyle(width), children: isEditing && !!updateCallback ? (_jsx("input", { "aria-label": label, name: "editable-cell-input-".concat(dataRowId, "-").concat(index), className: classNames("form-control", dataCellInputClasses(index)), type: colDataTypeToInputType(type), defaultValue: initValueToFormValue(value, type), required: type !== "string" })) : (formattedValue) }, index));
+            }), updateCallback && (_jsx(EditControlsCell, { ariaColIndex: ariaColIndexOffset + cellData.length + 1, beginEditingCallback: function () { return setIsEditing(true); }, cancelEditingCallback: function () { return setIsEditing(false); }, isEditing: isEditing, saveCallback: handleSave, deleteCallback: deleteCallback, editControlsCellClasses: editCellClasses, startButtonClasses: startButtonClasses, deleteButtonClasses: deleteButtonClasses, cancelButtonClasses: cancelButtonClasses, saveButtonClasses: saveButtonClasses, style: editControlCellStyles }))] }));
+};
+export default EditableRow;

package/grid/editing/inputStrsToRowData.d.ts

@@ -0,0 +1,3 @@
+import { ColDefBase, RowData } from "../types";
+declare const inputStrsToRowData: (cols: ColDefBase[], inputStrs: string[]) => RowData;
+export default inputStrsToRowData;

package/grid/editing/inputStrsToRowData.js

@@ -0,0 +1,18 @@
+var inputStrsToRowData = function (cols, inputStrs) {
+    var newRow = {};
+    inputStrs.forEach(function (value, index) {
+        var col = cols[index];
+        switch (col.type) {
+            case "string":
+                newRow[col.name] = value;
+                return;
+            case "number":
+                newRow[col.name] = Number(value);
+                return;
+            default:
+                newRow[col.name] = new Date(value);
+        }
+    });
+    return newRow;
+};
+export default inputStrsToRowData;

package/grid/editing/types.d.ts

@@ -0,0 +1,16 @@
+import { ColDataType, ColDataTypeStrings, RowData, RowId } from "../types";
+export interface CellData {
+    fieldName: string;
+    value: ColDataType;
+    type: ColDataTypeStrings;
+    ariaColIndex: number;
+    formattedValue: string;
+    label: string;
+    width?: number;
+}
+export type UpdateCallbackGenerator = (id: RowId) => (rowData: RowData) => void;
+export interface EditModel {
+    getUpdateCallback: UpdateCallbackGenerator;
+    getDeleteCallback?: (id: RowId) => () => void;
+    editColWidth?: number;
+}

package/grid/editing/types.js

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

package/grid/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/grid/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/grid/export/types.d.ts

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

package/grid/export/types.js

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

package/grid/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/grid/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/grid/filtering/DateFilterRow.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { DateFormFilterState } from "./types";
+import { CommonFilterRowStyleProps } from "./FilterRow";
+export type DateFilterRowProps = {
+    ariaRowIndex: number;
+    includeTime: boolean;
+    columnLabel: string;
+    filterState: DateFormFilterState;
+    setFilterState: (filterState: DateFormFilterState) => void;
+    schemeSelectClasses: string[];
+    enableInputClasses: string[];
+    startDateInputClasses: string[];
+    endDateInputClasses: string[];
+} & CommonFilterRowStyleProps;
+declare const DateFilterRow: FC<DateFilterRowProps>;
+export default DateFilterRow;