@absreim/react-bootstrap-data-grid-pro 2.4.1 → 2.6.0

package/grid/Grid.js

@@ -9,48 +9,44 @@ 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,
+const Grid = (props) => {
+    const { rows, cols, filterModel, sortModel, pagination, selectModel, styleModel, editModel, } = props;
+    const combinedPipelineOutput = useCombinedPipeline({
+        rows,
+        cols,
+        filterModel,
+        sortModel,
+        pagination,
+        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);
-        });
+    const { sortedRowsOutput: { sortColDef, setSortColDef, sortingEnabled }, showSelectCol, displayRows, } = combinedPipelineOutput;
+    const gridSelectionFns = useGridSelectionFns(selectModel, rows);
+    const unwrappedStyles = useUnwrappedGridStyles(styleModel);
+    const getInputStrSubmitCallback = useGetInputStrSubmitCallback(editModel, cols);
+    const colNameToWidth = useMemo(() => {
+        const map = {};
+        cols.forEach(({ name, width }) => (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
+    const augFormattedRows = useAugFormattedRows(colNameToWidth, displayRows);
+    const colHeaderCells = cols.map(({ name, label, sortable, width }, index) => {
+        var _a;
+        const 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 });
+                setSortOrder: (order) => {
+                    setSortColDef && setSortColDef(order && { name, 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) &&
+        return (_jsx(ColHeaderCell, { label: label, sortModel: colSortModel, ariaColIndex: index + 1 + (showSelectCol ? 1 : 0), additionalClasses: ((_a = styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel) === null || _a === void 0 ? void 0 : _a.theadTh) &&
                 styleModel.mainTableStyleModel.theadTh(index), width: width }, name));
     });
-    var bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, unwrappedStyles: unwrappedStyles, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback }));
+    const bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, 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 } }));
+            unwrappedStyles,
+        }, slots: { colHeaderCells, bodyRows } }));
 };
 export default Grid;

package/grid/InternalGrid.d.ts

@@ -13,6 +13,7 @@ export interface InternalGridProps {
     slots: {
         colHeaderCells: ReactNode;
         bodyRows: ReactNode;
+        prefixHeader?: ReactNode;
     };
 }
 declare const InternalGrid: FC<InternalGridProps>;

package/grid/InternalGrid.js

@@ -10,18 +10,17 @@ 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,
+const InternalGrid = ({ gridProps: { rows, cols, pagination, filterModel, selectModel, editModel, caption, styleModel, useToolbar, responsive, displayMode, }, hooks: { pipelineOutput, selectFns, unwrappedStyles }, slots: { colHeaderCells, bodyRows, prefixHeader }, }) => {
+    var _a;
+    const { normalizedTableFilterModel, filteredRows, filterState, sortedRowsOutput: { sortedRows }, currentPageRowsOutput: { paginatedRows, normalizedModel }, showSelectCol, } = pipelineOutput;
+    const [filterOptionsVisible, setFilterOptionsVisible] = useState(false);
+    const exportFnInfo = useExportFn({
+        rows,
+        cols,
         filteredRows: filterModel && filteredRows,
         currentPageRows: pagination && paginatedRows,
     });
-    var toolbarInterfaceParams = useMemo(function () { return ({
+    const toolbarInterfaceParams = useMemo(() => ({
         filtering: useToolbar && filterState && filterModel && normalizedTableFilterModel
             ? {
                 filterState: filterState,
@@ -31,9 +30,9 @@ var InternalGrid = function (_a) {
             }
             : undefined,
         exporting: useToolbar
-            ? { exportFnInfo: exportFnInfo, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel }
+            ? { exportFnInfo, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.exportFormStyleModel }
             : undefined,
-    }); }, [
+    }), [
         exportFnInfo,
         filterModel,
         filterState,
@@ -42,16 +41,16 @@ var InternalGrid = function (_a) {
         styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel,
         useToolbar,
     ]);
-    var toolbarInterfaces = useInterfaces(toolbarInterfaceParams);
-    var handleToggleFilterOptions = function () {
+    const toolbarInterfaces = useInterfaces(toolbarInterfaceParams);
+    const handleToggleFilterOptions = () => {
         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", {
+    const { rowsAreSelectable, selectionInfo, selectAllOnClick } = selectFns;
+    const { unwrappedTableModel, unwrappedAdditionalStyleModel } = unwrappedStyles;
+    const 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 }))] })] }));
+        }, 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: [prefixHeader, showSelectCol && (_jsx(SelectAllHeaderCell, { style: getWidthStyle(selectModel === null || selectModel === void 0 ? void 0 : selectModel.selectColWidth), selectionInfo: selectionInfo, onClick: selectAllOnClick, totalRows: rows.length, additionalClasses: unwrappedTableModel.rowSelectColTh, colIndexOffset: prefixHeader ? 1 : 0 })), colHeaderCells, editModel && (_jsx("th", { "aria-colindex": cols.length + 1 + (showSelectCol ? 1 : 0), className: classNames(unwrappedTableModel.editColTh), style: getWidthStyle(editModel === null || editModel === void 0 ? void 0 : editModel.editColWidth), children: "Edit Controls" }))] }) }), _jsx("tbody", { className: classNames(unwrappedTableModel.tbody), children: bodyRows })] }));
+    return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames(unwrappedAdditionalStyleModel.topLevelDiv), children: [normalizedTableFilterModel && !useToolbar && (_jsxs("div", { "data-testid": "rbdg-filter-inputs-div", className: classNames(unwrappedAdditionalStyleModel.filterInputsDiv), children: [_jsx(ToggleButton, { isActive: filterOptionsVisible, label: `${filterOptionsVisible ? "Hide" : "Show "} Filter Options`, onClick: handleToggleFilterOptions, classes: (_a = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _a === void 0 ? void 0 : _a.filterUiToggleButton }), filterOptionsVisible && (_jsx(FilterOptionsTable, { caption: filterModel.filterTableCaption, filterState: filterState, setFilterState: normalizedTableFilterModel.setTableFilterState, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputTableStyleModel }))] })), useToolbar && (_jsx(ToolbarContainer, { interfaces: toolbarInterfaces, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbarStyleModel })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames(unwrappedAdditionalStyleModel.tableAndPaginationDiv), children: [responsive ? (_jsx("div", { "data-testid": "rbdg-table-div", className: "table-responsive", children: mainTable })) : (_jsx(_Fragment, { children: mainTable })), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: unwrappedAdditionalStyleModel.paginationUiDiv }))] })] }));
 };
 export default InternalGrid;

package/grid/editing/EditControlsCell.js

@@ -1,11 +1,10 @@
 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) {
+const stopPropagationWrapper = (fn) => (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;
+};
+const EditControlsCell = ({ ariaColIndex, beginEditingCallback, cancelEditingCallback, isEditing, saveCallback, deleteCallback, editControlsCellClasses, saveButtonClasses, deleteButtonClasses, startButtonClasses, cancelButtonClasses, }) => {
     return (_jsx("td", { "aria-colindex": ariaColIndex, className: classNames(editControlsCellClasses), children: _jsx("div", { className: "hstack gap-2", children: isEditing ? (_jsxs(_Fragment, { children: [_jsx("button", { "aria-label": "Cancel", className: classNames("btn", cancelButtonClasses.length === 0
                             ? ["btn-secondary"]
                             : cancelButtonClasses), onClick: stopPropagationWrapper(cancelEditingCallback), title: "Cancel", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentColor", viewBox: "0 0 16 16", children: _jsx("path", { d: "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z" }) }) }), _jsx("button", { "aria-label": "Save", className: classNames("btn", saveButtonClasses.length === 0

package/grid/editing/EditableRow.js

@@ -5,7 +5,7 @@ import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
 import EditControlsCell from "./EditControlsCell";
 import classNames from "classnames";
 import getWidthStyle from "../util/getWidthStyle";
-var initValueToFormValue = function (value, type) {
+const initValueToFormValue = (value, type) => {
     switch (type) {
         case "date":
             return dateToInputStr(value);
@@ -17,7 +17,7 @@ var initValueToFormValue = function (value, type) {
             return value;
     }
 };
-var colDataTypeToInputType = function (colDataType) {
+const colDataTypeToInputType = (colDataType) => {
     switch (colDataType) {
         case "date":
             return "date";
@@ -29,21 +29,18 @@ var colDataTypeToInputType = function (colDataType) {
             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];
+const EditableRow = ({ ariaColIndexOffset, cellData, children, updateCallback, deleteCallback, onClick, className, "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, dataRowId, dataCellClasses, dataCellInputClasses, editCellClasses, saveButtonClasses, startButtonClasses, cancelButtonClasses, deleteButtonClasses, editControlCellStyles, }) => {
+    const trRef = useRef(null);
+    const [isEditing, setIsEditing] = useState(false);
+    const handleSave = () => {
+        let failedValidationFound = false;
+        const formValues = [];
+        for (const rowChild of Array.from(trRef.current.children)) {
             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];
+            for (const cellChild of Array.from(rowChild.children)) {
                 if (!(cellChild instanceof HTMLInputElement) ||
                     cellChild.type === "checkbox" ||
                     cellChild.type === "radio") {
@@ -60,9 +57,6 @@ var EditableRow = function (_a) {
             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 }))] }));
+    return (_jsxs("tr", { ref: trRef, onClick: onClick, className: className, "aria-rowindex": ariaRowIndex, "aria-selected": ariaSelected, "data-rowid": dataRowId, children: [children, cellData.map(({ type, value, formattedValue, label, width }, index) => (_jsx("td", { "aria-colindex": index + ariaColIndexOffset + 1, className: classNames(dataCellClasses(index)), style: getWidthStyle(width), children: isEditing && !!updateCallback ? (_jsx("input", { "aria-label": label, name: `editable-cell-input-${dataRowId}-${index}`, className: classNames("form-control", dataCellInputClasses(index)), type: colDataTypeToInputType(type), defaultValue: initValueToFormValue(value, type), required: type !== "string" })) : (formattedValue) }, index))), updateCallback && (_jsx(EditControlsCell, { ariaColIndex: ariaColIndexOffset + cellData.length + 1, beginEditingCallback: () => setIsEditing(true), cancelEditingCallback: () => setIsEditing(false), isEditing: isEditing, saveCallback: handleSave, deleteCallback: deleteCallback, editControlsCellClasses: editCellClasses, startButtonClasses: startButtonClasses, deleteButtonClasses: deleteButtonClasses, cancelButtonClasses: cancelButtonClasses, saveButtonClasses: saveButtonClasses, style: editControlCellStyles }))] }));
 };
 export default EditableRow;

package/grid/editing/inputStrsToRowData.js

@@ -1,7 +1,7 @@
-var inputStrsToRowData = function (cols, inputStrs) {
-    var newRow = {};
-    inputStrs.forEach(function (value, index) {
-        var col = cols[index];
+const inputStrsToRowData = (cols, inputStrs) => {
+    const newRow = {};
+    inputStrs.forEach((value, index) => {
+        const col = cols[index];
         switch (col.type) {
             case "string":
                 newRow[col.name] = value;

package/grid/export/ExportForm.js

@@ -1,57 +1,42 @@
-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({
+const ExportForm = ({ exportFnInfo: { exportFn, formattersExist, paginationEnabled, filteringEnabled, rowCounts, }, styleModel, }) => {
+    const formId = useId();
+    const [formState, setFormState] = 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)));
-            });
+    });
+    const getChangeHandler = (field, value) => {
+        return () => {
+            setFormState((prev) => (Object.assign(Object.assign({}, prev), { [field]: value })));
         };
     };
-    var getRowCountLabel = function (featureType, count) {
+    const getRowCountLabel = (featureType, count) => {
         if (count === undefined) {
-            return "".concat(featureType, " disabled");
+            return `${featureType} disabled`;
         }
-        return "".concat(count, " ").concat(count === 1 ? "row" : "rows");
+        return `${count} ${count === 1 ? "row" : "rows"}`;
     };
-    var stageOptions = [
+    const stageOptions = [
         {
             value: "original",
-            label: "Original rows (total ".concat(rowCounts.total, " ").concat(rowCounts.total === 1 ? "row" : "rows", ")"),
+            label: `Original rows (total ${rowCounts.total} ${rowCounts.total === 1 ? "row" : "rows"})`,
             disabled: false,
         },
         {
             value: "filtered",
-            label: "After filters applied (".concat(getRowCountLabel("filtering", rowCounts.filtered), ")"),
+            label: `After filters applied (${getRowCountLabel("filtering", rowCounts.filtered)})`,
             disabled: !filteringEnabled,
         },
         {
             value: "paged",
-            label: "Current page only (".concat(getRowCountLabel("pagination", rowCounts.currentPage), ")"),
+            label: `Current page only (${getRowCountLabel("pagination", rowCounts.currentPage)})`,
             disabled: !paginationEnabled,
         },
     ];
-    var formatOptions = [
+    const formatOptions = [
         {
             formatted: false,
             label: "Use original data",
@@ -59,11 +44,11 @@ var ExportForm = function (_a) {
         },
         {
             formatted: true,
-            label: "Apply formatters to data".concat(formattersExist ? "" : " (no formatters defined)"),
+            label: `Apply formatters to data${formattersExist ? "" : " (no formatters defined)"}`,
             disabled: !formattersExist,
         },
     ];
-    var fileTypeOptions = [
+    const fileTypeOptions = [
         {
             fileType: "json",
             label: "JSON",
@@ -73,25 +58,16 @@ var ExportForm = function (_a) {
             label: "CSV",
         },
     ];
-    var handleSubmit = function (event) {
+    const handleSubmit = (event) => {
         event.preventDefault();
-        var stage = formState.stage, fileType = formState.fileType, formatted = formState.formatted;
+        const { stage, fileType, formatted } = formState;
         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" })] }));
+    const legendClasses = classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.legend) || []);
+    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" })] }));
 };
 export default ExportForm;

package/grid/export/useExportFn.js

@@ -1,80 +1,56 @@
-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");
+const downloadFile = (data, filename, type) => {
+    const blob = new Blob([data], { type });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
     a.href = url;
     a.download = filename;
     a.click();
     a.remove();
-    setTimeout(function () { return URL.revokeObjectURL(url); }, 0);
+    setTimeout(() => URL.revokeObjectURL(url), 0);
 };
-var getDefaultFormatter = function (type) {
+const getDefaultFormatter = (type) => {
     switch (type) {
         case "date":
             return dateToInputStr;
         case "datetime":
             return dateToDatetimeInputStr;
         default:
-            return function (a) { return a; };
+            return (a) => 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);
+const applyFormatters = (rows, cols, defaultOnly) => {
+    const colToFormatter = cols.reduce((map, { name, formatter, type }) => {
+        const 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));
-    });
+    return rows.map(({ id, data }) => ({
+        id,
+        data: Object.keys(data).reduce((newData, name) => {
+            const formatter = colToFormatter.get(name);
+            newData[name] = formatter(data[name]);
+            return newData;
+        }, {}),
+    }));
 };
-var exportJson = function (rows, cols, useDefaultFormatters) {
-    var formattedRows = applyFormatters(rows, cols, useDefaultFormatters);
-    var json = JSON.stringify(formattedRows, null, 2);
+const flattenExportRows = (rows) => rows.map(({ id, data }) => (Object.assign({ id }, data)));
+const exportJson = (rows, cols, useDefaultFormatters) => {
+    const formattedRows = applyFormatters(rows, cols, useDefaultFormatters);
+    const 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 });
+const exportCsv = (rows, cols, useDefaultFormatters) => {
+    const formattedRows = applyFormatters(rows, cols, useDefaultFormatters);
+    const flattenedRows = flattenExportRows(formattedRows);
+    const 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) {
+const useExportFn = ({ rows, cols, filteredRows, currentPageRows, }) => {
+    const formattersExist = useMemo(() => cols.reduce((prev, { formatter }) => prev || !!formatter, false), [cols]);
+    const exportFn = useCallback((stage, fileType, formatted) => {
         if (stage === "filtered" && !filteredRows) {
             throw Error("Cannot export filtered rows because filtering is not enabled for this grid");
         }
@@ -84,7 +60,7 @@ var useExportFn = function (_a) {
         if (formatted && !formattersExist) {
             throw Error("Cannot export formatted rows because formatters are not defined for this grid");
         }
-        var exportRows = (function () {
+        const exportRows = (() => {
             switch (stage) {
                 case "filtered":
                     return filteredRows;
@@ -100,9 +76,9 @@ var useExportFn = function (_a) {
         }
         exportJson(exportRows, cols, !formatted);
     }, [cols, currentPageRows, filteredRows, formattersExist, rows]);
-    return useMemo(function () { return ({
-        exportFn: exportFn,
-        formattersExist: formattersExist,
+    return useMemo(() => ({
+        exportFn,
+        formattersExist,
         paginationEnabled: !!currentPageRows,
         filteringEnabled: !!filteredRows,
         rowCounts: {
@@ -110,6 +86,6 @@ var useExportFn = function (_a) {
             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]);
+    }), [currentPageRows, exportFn, filteredRows, formattersExist, rows.length]);
 };
 export default useExportFn;

package/grid/filtering/DateFilterRow.js

@@ -1,45 +1,29 @@
-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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { dateFilterSchemeNames, } from "./types";
 import FilterRow from "./FilterRow";
 import classNames from "classnames";
-var DateFilterRow = function (_a) {
-    var ariaRowIndex = _a.ariaRowIndex, includeTime = _a.includeTime, columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState, schemeSelectClasses = _a.schemeSelectClasses, enableInputClasses = _a.enableInputClasses, startDateInputClasses = _a.startDateInputClasses, endDateInputClasses = _a.endDateInputClasses, tdClasses = _a.tdClasses, trClasses = _a.trClasses;
-    var handleOpChange = function (_a) {
-        var target = _a.target;
-        setFilterState(__assign(__assign({}, filterState), { scheme: target.value }));
+const DateFilterRow = ({ ariaRowIndex, includeTime, columnLabel, filterState, setFilterState, schemeSelectClasses, enableInputClasses, startDateInputClasses, endDateInputClasses, tdClasses, trClasses, }) => {
+    const handleOpChange = ({ target, }) => {
+        setFilterState(Object.assign(Object.assign({}, filterState), { scheme: target.value }));
     };
-    var handleEnabledChange = function (_a) {
-        var target = _a.target;
-        setFilterState(__assign(__assign({}, filterState), { enabled: target.checked }));
+    const handleEnabledChange = ({ target, }) => {
+        setFilterState(Object.assign(Object.assign({}, filterState), { enabled: target.checked }));
     };
-    var handleStartValueChange = function (_a) {
-        var target = _a.target;
-        setFilterState(__assign(__assign({}, filterState), { startDate: target.value }));
+    const handleStartValueChange = ({ target, }) => {
+        setFilterState(Object.assign(Object.assign({}, filterState), { startDate: target.value }));
     };
-    var handleEndValueChange = function (_a) {
-        var target = _a.target;
-        setFilterState(__assign(__assign({}, filterState), { endDate: target.value }));
+    const handleEndValueChange = ({ target, }) => {
+        setFilterState(Object.assign(Object.assign({}, filterState), { endDate: target.value }));
     };
-    var enabled = filterState.enabled, scheme = filterState.scheme, startDate = filterState.startDate, endDate = filterState.endDate;
-    var inputType = includeTime ? "datetime-local" : "date";
-    var inputId = useId();
-    var startDateInputId = "$startDate-".concat(inputId);
-    var endDateInputId = "$endDate-".concat(inputId);
-    var startDateInputLabel = "".concat(columnLabel, " Column Filter Start Date");
-    var endDateInputLabel = "".concat(columnLabel, " Column Filter End Date");
-    var searchStringInputCellContents = (_jsxs(_Fragment, { children: [scheme !== "endAt" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: startDateInputId, children: "Start Date" })), _jsx("input", { id: startDateInputId, className: classNames("form-control", startDateInputClasses), type: inputType, required: enabled, disabled: !enabled, value: startDate, onChange: handleStartValueChange, "aria-label": startDateInputLabel })] })), scheme !== "startFrom" && (_jsxs(_Fragment, { children: [scheme === "between" && (_jsx("label", { htmlFor: endDateInputId, children: "End Date" })), _jsx("input", { id: endDateInputId, className: classNames("form-control", endDateInputClasses), type: inputType, required: enabled, disabled: !enabled, value: endDate, onChange: handleEndValueChange, "aria-label": endDateInputLabel })] }))] }));
+    const { enabled, scheme, startDate, endDate } = filterState;
+    const inputType = includeTime ? "datetime-local" : "date";
+    const inputId = useId();
+    const startDateInputId = `$startDate-${inputId}`;
+    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 })] }))] }));
     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;