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

package/grid/filtering/FilterOptionsTable.js

@@ -1,23 +1,3 @@
-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);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from "react";
 import StringFilterRow from "./StringFilterRow";
@@ -26,92 +6,76 @@ import useFilterFormState from "./useFilterFormState";
 import DateFilterRow from "./DateFilterRow";
 import classNames from "classnames";
 import { unwrapFilterInputTableStyleModel } from "../styling/styleModelUnwrappers";
-var convertFilterFormStateToEditableState = function (filterFormState) {
-    return Object.keys(filterFormState).reduce(function (editableState, colName) {
-        var rowFilterFormState = filterFormState[colName];
-        switch (rowFilterFormState.type) {
+const convertFilterFormStateToEditableState = (filterFormState) => Object.keys(filterFormState).reduce((editableState, colName) => {
+    const rowFilterFormState = filterFormState[colName];
+    switch (rowFilterFormState.type) {
+        case "string": {
+            editableState[colName] = Object.assign({}, rowFilterFormState);
+            break;
+        }
+        case "number": {
+            editableState[colName] = {
+                type: rowFilterFormState.type,
+                enabled: rowFilterFormState.enabled,
+                scheme: rowFilterFormState.scheme,
+                numValue: rowFilterFormState.inputValue === ""
+                    ? null
+                    : Number(rowFilterFormState.inputValue),
+            };
+            break;
+        }
+        default: {
+            // date or datetime
+            const partialFilterState = {
+                type: rowFilterFormState.type,
+                enabled: rowFilterFormState.enabled,
+            };
+            const inputStrToDate = (str) => str === "" ? null : new Date(str);
+            switch (rowFilterFormState.scheme) {
+                case "startFrom": {
+                    editableState[colName] = Object.assign(Object.assign({}, partialFilterState), { scheme: rowFilterFormState.scheme, startDate: inputStrToDate(rowFilterFormState.startDate) });
+                    break;
+                }
+                case "endAt": {
+                    editableState[colName] = Object.assign(Object.assign({}, partialFilterState), { scheme: rowFilterFormState.scheme, endDate: inputStrToDate(rowFilterFormState.endDate) });
+                    break;
+                }
+                default: {
+                    editableState[colName] = Object.assign(Object.assign({}, partialFilterState), { scheme: rowFilterFormState.scheme, startDate: inputStrToDate(rowFilterFormState.startDate), endDate: inputStrToDate(rowFilterFormState.endDate) });
+                }
+            }
+        }
+    }
+    return editableState;
+}, {});
+const FilterOptionsTable = ({ filterState, setFilterState, caption, styleModel, }) => {
+    const formFilterState = useFilterFormState(filterState);
+    const [formState, setFormState] = useState(formFilterState);
+    const unwrappedStyleModel = useMemo(() => unwrapFilterInputTableStyleModel(styleModel), [styleModel]);
+    const getRows = () => Object.keys(formState).map((colName, index) => {
+        function getColStateSetter(colName) {
+            return (rowState) => setFormState(Object.assign(Object.assign({}, formState), { [colName]: rowState }));
+        }
+        const colLabel = filterState[colName].label;
+        const colFilterState = formState[colName];
+        switch (colFilterState.type) {
             case "string": {
-                editableState[colName] = __assign({}, rowFilterFormState);
-                break;
+                return (_jsx(StringFilterRow, { ariaRowIndex: index + 2, columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: unwrappedStyleModel.schemeSelectionInput(index), enableInputClasses: unwrappedStyleModel.enablementInput(index), searchStringInputClasses: unwrappedStyleModel.searchStringInput(index), trClasses: unwrappedStyleModel.tbodyTr(index), tdClasses: (colIndex) => unwrappedStyleModel.tbodyTd(index, colIndex) }, colName));
             }
             case "number": {
-                editableState[colName] = {
-                    type: rowFilterFormState.type,
-                    enabled: rowFilterFormState.enabled,
-                    scheme: rowFilterFormState.scheme,
-                    numValue: rowFilterFormState.inputValue === ""
-                        ? null
-                        : Number(rowFilterFormState.inputValue),
-                };
-                break;
+                return (_jsx(NumberFilterRow, { ariaRowIndex: index + 2, columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: unwrappedStyleModel.schemeSelectionInput(index), enableInputClasses: unwrappedStyleModel.enablementInput(index), numberInputClasses: unwrappedStyleModel.numberInput(index), trClasses: unwrappedStyleModel.tbodyTr(index), tdClasses: (colIndex) => unwrappedStyleModel.tbodyTd(index, colIndex) }, colName));
             }
             default: {
                 // date or datetime
-                var partialFilterState = {
-                    type: rowFilterFormState.type,
-                    enabled: rowFilterFormState.enabled,
-                };
-                var inputStrToDate = function (str) {
-                    return str === "" ? null : new Date(str);
-                };
-                switch (rowFilterFormState.scheme) {
-                    case "startFrom": {
-                        editableState[colName] = __assign(__assign({}, partialFilterState), { scheme: rowFilterFormState.scheme, startDate: inputStrToDate(rowFilterFormState.startDate) });
-                        break;
-                    }
-                    case "endAt": {
-                        editableState[colName] = __assign(__assign({}, partialFilterState), { scheme: rowFilterFormState.scheme, endDate: inputStrToDate(rowFilterFormState.endDate) });
-                        break;
-                    }
-                    default: {
-                        editableState[colName] = __assign(__assign({}, partialFilterState), { scheme: rowFilterFormState.scheme, startDate: inputStrToDate(rowFilterFormState.startDate), endDate: inputStrToDate(rowFilterFormState.endDate) });
-                    }
-                }
+                return (_jsx(DateFilterRow, { ariaRowIndex: index + 2, includeTime: colFilterState.type === "datetime", columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: unwrappedStyleModel.schemeSelectionInput(index), enableInputClasses: unwrappedStyleModel.enablementInput(index), startDateInputClasses: unwrappedStyleModel.startDateInput(index), endDateInputClasses: unwrappedStyleModel.endDateInput(index), trClasses: unwrappedStyleModel.tbodyTr(index), tdClasses: (colIndex) => unwrappedStyleModel.tbodyTd(index, colIndex) }, colName));
             }
         }
-        return editableState;
-    }, {});
-};
-var FilterOptionsTable = function (_a) {
-    var filterState = _a.filterState, setFilterState = _a.setFilterState, caption = _a.caption, styleModel = _a.styleModel;
-    var formFilterState = useFilterFormState(filterState);
-    var _b = useState(formFilterState), formState = _b[0], setFormState = _b[1];
-    var unwrappedStyleModel = useMemo(function () { return unwrapFilterInputTableStyleModel(styleModel); }, [styleModel]);
-    var getRows = function () {
-        return Object.keys(formState).map(function (colName, index) {
-            function getColStateSetter(colName) {
-                return function (rowState) {
-                    var _a;
-                    return setFormState(__assign(__assign({}, formState), (_a = {}, _a[colName] = rowState, _a)));
-                };
-            }
-            var colLabel = filterState[colName].label;
-            var colFilterState = formState[colName];
-            switch (colFilterState.type) {
-                case "string": {
-                    return (_jsx(StringFilterRow, { ariaRowIndex: index + 2, columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: unwrappedStyleModel.schemeSelectionInput(index), enableInputClasses: unwrappedStyleModel.enablementInput(index), searchStringInputClasses: unwrappedStyleModel.searchStringInput(index), trClasses: unwrappedStyleModel.tbodyTr(index), tdClasses: function (colIndex) {
-                            return unwrappedStyleModel.tbodyTd(index, colIndex);
-                        } }, colName));
-                }
-                case "number": {
-                    return (_jsx(NumberFilterRow, { ariaRowIndex: index + 2, columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: unwrappedStyleModel.schemeSelectionInput(index), enableInputClasses: unwrappedStyleModel.enablementInput(index), numberInputClasses: unwrappedStyleModel.numberInput(index), trClasses: unwrappedStyleModel.tbodyTr(index), tdClasses: function (colIndex) {
-                            return unwrappedStyleModel.tbodyTd(index, colIndex);
-                        } }, colName));
-                }
-                default: {
-                    // date or datetime
-                    return (_jsx(DateFilterRow, { ariaRowIndex: index + 2, includeTime: colFilterState.type === "datetime", columnLabel: colLabel, filterState: colFilterState, setFilterState: getColStateSetter(colName), schemeSelectClasses: unwrappedStyleModel.schemeSelectionInput(index), enableInputClasses: unwrappedStyleModel.enablementInput(index), startDateInputClasses: unwrappedStyleModel.startDateInput(index), endDateInputClasses: unwrappedStyleModel.endDateInput(index), trClasses: unwrappedStyleModel.tbodyTr(index), tdClasses: function (colIndex) {
-                            return unwrappedStyleModel.tbodyTd(index, colIndex);
-                        } }, colName));
-                }
-            }
-        });
-    };
-    var onSubmit = function (event) {
+    });
+    const onSubmit = (event) => {
         event.preventDefault();
-        var editableTableFilterState = convertFilterFormStateToEditableState(formState);
+        const editableTableFilterState = convertFilterFormStateToEditableState(formState);
         setFilterState(editableTableFilterState);
     };
-    return (_jsxs("form", { onSubmit: onSubmit, className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.form), children: [_jsxs("table", { className: classNames.apply(void 0, __spreadArray(["table"], unwrappedStyleModel.table, false)), children: [caption && (_jsx("caption", { className: classNames(unwrappedStyleModel.caption), children: caption })), _jsx("thead", { className: classNames.apply(void 0, unwrappedStyleModel.thead), children: _jsx("tr", { className: classNames.apply(void 0, unwrappedStyleModel.theadTr), children: ["Enabled", "Column", "Type", "Operator", "Value"].map(function (colName, index) { return (_jsx("th", { className: classNames.apply(void 0, unwrappedStyleModel.theadTh(index)), children: colName }, index)); }) }) }), _jsx("tbody", { className: classNames.apply(void 0, unwrappedStyleModel.tbody), children: getRows() })] }), _jsx("button", { className: classNames("btn", { "btn-secondary": unwrappedStyleModel.submitButton.length === 0 }, unwrappedStyleModel.submitButton), type: "submit", children: "Submit" })] }));
+    return (_jsxs("form", { onSubmit: onSubmit, className: classNames(styleModel === null || styleModel === void 0 ? void 0 : styleModel.form), children: [_jsxs("table", { className: classNames("table", ...unwrappedStyleModel.table), children: [caption && (_jsx("caption", { className: classNames(unwrappedStyleModel.caption), children: caption })), _jsx("thead", { className: classNames(...unwrappedStyleModel.thead), children: _jsx("tr", { className: classNames(...unwrappedStyleModel.theadTr), children: ["Enabled", "Column", "Type", "Operator", "Value"].map((colName, index) => (_jsx("th", { className: classNames(...unwrappedStyleModel.theadTh(index)), children: colName }, index))) }) }), _jsx("tbody", { className: classNames(...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/grid/filtering/FilterRow.js

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

package/grid/filtering/NumberFilterRow.js

@@ -1,35 +1,20 @@
-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 { numberFilterSchemeNames, } from "./types";
 import FilterRow from "./FilterRow";
 import classNames from "classnames";
-var NumberFilterRow = function (_a) {
-    var ariaRowIndex = _a.ariaRowIndex, columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState, schemeSelectClasses = _a.schemeSelectClasses, enableInputClasses = _a.enableInputClasses, numberInputClasses = _a.numberInputClasses, tdClasses = _a.tdClasses, trClasses = _a.trClasses;
-    var handleOpChange = function (_a) {
-        var target = _a.target;
-        setFilterState(__assign(__assign({}, filterState), { scheme: target.value }));
+const NumberFilterRow = ({ ariaRowIndex, columnLabel, filterState, setFilterState, schemeSelectClasses, enableInputClasses, numberInputClasses, 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 handleNumInputValueChange = function (_a) {
-        var target = _a.target;
-        setFilterState(__assign(__assign({}, filterState), { inputValue: target.value }));
+    const handleNumInputValueChange = ({ target, }) => {
+        setFilterState(Object.assign(Object.assign({}, filterState), { inputValue: target.value }));
     };
-    var enabled = filterState.enabled, scheme = filterState.scheme, inputValue = filterState.inputValue;
-    var valueInputLabel = "".concat(columnLabel, " Column Filter Value");
-    var searchStringInputCellContents = (_jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: classNames("form-control", numberInputClasses), type: "number", required: enabled, disabled: !enabled, value: inputValue, onChange: handleNumInputValueChange }));
+    const { enabled, scheme, inputValue } = filterState;
+    const valueInputLabel = `${columnLabel} Column Filter Value`;
+    const searchStringInputCellContents = (_jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: classNames("form-control", numberInputClasses), type: "number", required: enabled, disabled: !enabled, value: inputValue, onChange: handleNumInputValueChange }));
     return (_jsx(FilterRow, { ariaRowIndex: ariaRowIndex, columnLabel: columnLabel, typeLabel: "Number", enabled: enabled, enabledChangeHandler: handleEnabledChange, currentScheme: scheme, handleSchemeChange: handleOpChange, schemesToLabels: numberFilterSchemeNames, searchStringInputCellContents: searchStringInputCellContents, trClasses: trClasses, tdClasses: tdClasses, inputClasses: enableInputClasses, selectClasses: schemeSelectClasses }));
 };
 export default NumberFilterRow;

package/grid/filtering/StringFilterRow.js

@@ -1,35 +1,20 @@
-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 FilterRow from "./FilterRow";
 import classNames from "classnames";
 import { stringFilterSchemeNames, } from "./types";
-var StringFilterRow = function (_a) {
-    var ariaRowIndex = _a.ariaRowIndex, columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState, schemeSelectClasses = _a.schemeSelectClasses, enableInputClasses = _a.enableInputClasses, searchStringInputClasses = _a.searchStringInputClasses, tdClasses = _a.tdClasses, trClasses = _a.trClasses;
-    var handleOpChange = function (_a) {
-        var target = _a.target;
-        setFilterState(__assign(__assign({}, filterState), { scheme: target.value }));
+const StringFilterRow = ({ ariaRowIndex, columnLabel, filterState, setFilterState, schemeSelectClasses, enableInputClasses, searchStringInputClasses, 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 handleSearchStringChange = function (_a) {
-        var target = _a.target;
-        setFilterState(__assign(__assign({}, filterState), { searchString: target.value }));
+    const handleSearchStringChange = ({ target, }) => {
+        setFilterState(Object.assign(Object.assign({}, filterState), { searchString: target.value }));
     };
-    var enabled = filterState.enabled, scheme = filterState.scheme, searchString = filterState.searchString;
-    var valueInputLabel = "".concat(columnLabel, " Column Filter Value");
-    var searchStringInputCellContents = (_jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: classNames("form-control", searchStringInputClasses), required: enabled, disabled: !enabled, value: searchString, onChange: handleSearchStringChange }));
+    const { enabled, scheme, searchString } = filterState;
+    const valueInputLabel = `${columnLabel} Column Filter Value`;
+    const searchStringInputCellContents = (_jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: classNames("form-control", searchStringInputClasses), required: enabled, disabled: !enabled, value: searchString, onChange: handleSearchStringChange }));
     return (_jsx(FilterRow, { ariaRowIndex: ariaRowIndex, columnLabel: columnLabel, typeLabel: "String", enabled: enabled, enabledChangeHandler: handleEnabledChange, currentScheme: scheme, handleSchemeChange: handleOpChange, schemesToLabels: stringFilterSchemeNames, searchStringInputCellContents: searchStringInputCellContents, trClasses: trClasses, tdClasses: tdClasses, inputClasses: enableInputClasses, selectClasses: schemeSelectClasses }));
 };
 export default StringFilterRow;

package/grid/filtering/types.js

@@ -1,29 +1,29 @@
-export var stringFilterSchemes = [
+export const stringFilterSchemes = [
     "contains",
     "startsWith",
     "endsWith",
 ];
-export var stringFilterSchemeNames = {
+export const stringFilterSchemeNames = {
     contains: "Contains",
     startsWith: "Starts With",
     endsWith: "Ends With",
 };
-export var numberFilterSchemes = [
+export const numberFilterSchemes = [
     "equals",
     "greaterThan",
     "lessThan",
     "greaterOrEqual",
     "lessOrEqual",
 ];
-export var numberFilterSchemeNames = {
+export const numberFilterSchemeNames = {
     equals: "=",
     greaterThan: ">",
     lessThan: "<",
     greaterOrEqual: ">=",
     lessOrEqual: "<=",
 };
-export var dateFilterSchemes = ["startFrom", "endAt", "between"];
-export var dateFilterSchemeNames = {
+export const dateFilterSchemes = ["startFrom", "endAt", "between"];
+export const dateFilterSchemeNames = {
     startFrom: "Start Form",
     endAt: "End At",
     between: "Between",

package/grid/filtering/useFilterFormState.js

@@ -1,72 +1,59 @@
-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 { useMemo } from "react";
 import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
-var useFilterFormState = function (tableFilterState) {
-    return useMemo(function () {
-        return Object.keys(tableFilterState).reduce(function (filterFormState, colName) {
-            var editableState = tableFilterState[colName].editableState;
-            switch (editableState.type) {
-                case "string": {
-                    filterFormState[colName] = __assign({}, editableState);
-                    break;
-                }
-                case "number": {
-                    filterFormState[colName] = {
-                        type: "number",
-                        scheme: editableState.scheme,
-                        enabled: editableState.enabled,
-                        inputValue: editableState.numValue === null
-                            ? ""
-                            : String(editableState.numValue),
-                    };
-                    break;
-                }
-                default: {
-                    // date or datetime
-                    var partialFormState = {
-                        type: editableState.type,
-                        enabled: editableState.enabled,
-                    };
-                    var dateToStrConverter = editableState.type === "date"
-                        ? dateToInputStr
-                        : dateToDatetimeInputStr;
-                    switch (editableState.scheme) {
-                        case "startFrom": {
-                            filterFormState[colName] = __assign(__assign({}, partialFormState), { scheme: "startFrom", startDate: editableState.startDate === null
-                                    ? ""
-                                    : dateToStrConverter(editableState.startDate), endDate: "" });
-                            break;
-                        }
-                        case "endAt": {
-                            filterFormState[colName] = __assign(__assign({}, partialFormState), { scheme: "endAt", startDate: "", endDate: editableState.endDate === null
-                                    ? ""
-                                    : dateToStrConverter(editableState.endDate) });
-                            break;
-                        }
-                        default: {
-                            // between
-                            filterFormState[colName] = __assign(__assign({}, partialFormState), { scheme: "between", startDate: editableState.startDate === null
-                                    ? ""
-                                    : dateToStrConverter(editableState.startDate), endDate: editableState.endDate === null
-                                    ? ""
-                                    : dateToStrConverter(editableState.endDate) });
-                            break;
-                        }
+const useFilterFormState = (tableFilterState) => {
+    return useMemo(() => Object.keys(tableFilterState).reduce((filterFormState, colName) => {
+        const editableState = tableFilterState[colName].editableState;
+        switch (editableState.type) {
+            case "string": {
+                filterFormState[colName] = Object.assign({}, editableState);
+                break;
+            }
+            case "number": {
+                filterFormState[colName] = {
+                    type: "number",
+                    scheme: editableState.scheme,
+                    enabled: editableState.enabled,
+                    inputValue: editableState.numValue === null
+                        ? ""
+                        : String(editableState.numValue),
+                };
+                break;
+            }
+            default: {
+                // date or datetime
+                const partialFormState = {
+                    type: editableState.type,
+                    enabled: editableState.enabled,
+                };
+                const dateToStrConverter = editableState.type === "date"
+                    ? dateToInputStr
+                    : dateToDatetimeInputStr;
+                switch (editableState.scheme) {
+                    case "startFrom": {
+                        filterFormState[colName] = Object.assign(Object.assign({}, partialFormState), { scheme: "startFrom", startDate: editableState.startDate === null
+                                ? ""
+                                : dateToStrConverter(editableState.startDate), endDate: "" });
+                        break;
+                    }
+                    case "endAt": {
+                        filterFormState[colName] = Object.assign(Object.assign({}, partialFormState), { scheme: "endAt", startDate: "", endDate: editableState.endDate === null
+                                ? ""
+                                : dateToStrConverter(editableState.endDate) });
+                        break;
+                    }
+                    default: {
+                        // between
+                        filterFormState[colName] = Object.assign(Object.assign({}, partialFormState), { scheme: "between", startDate: editableState.startDate === null
+                                ? ""
+                                : dateToStrConverter(editableState.startDate), endDate: editableState.endDate === null
+                                ? ""
+                                : dateToStrConverter(editableState.endDate) });
+                        break;
                     }
                 }
             }
-            return filterFormState;
-        }, {});
-    }, [tableFilterState]);
+        }
+        return filterFormState;
+    }, {}), [tableFilterState]);
 };
 export default useFilterFormState;

package/grid/main/BodyRows.d.ts

@@ -1,5 +1,5 @@
 import { AugFormattedRow } from "../types";
-import { FC } from "react";
+import { FC, ReactNode } from "react";
 import { UseGridSelectionFnsHook } from "../pipeline/useGridSelectionFns";
 import { UseUnwrappedGridStylesHook } from "../pipeline/useUnwrappedGridStyles";
 import { UseCombinedPipelineHook } from "../pipeline/useCombinedPipeline";
@@ -14,6 +14,8 @@ interface BodyRowsProps {
     selectModel: SelectModel | undefined;
     editModel: EditModel | undefined;
     getInputStrSubmitCallback: UseGetInputStrSubmitCallbackHook;
+    additionalColIndexOffset?: number;
+    renderPrefixCells?: (augFormattedRows: AugFormattedRow) => ReactNode;
 }
 declare const BodyRows: FC<BodyRowsProps>;
 export default BodyRows;

package/grid/main/BodyRows.js

@@ -1,18 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import EditableRow from "../editing/EditableRow";
 import classNames from "classnames";
 import getWidthStyle from "../util/getWidthStyle";
 import SelectionInput from "../selection/SelectionInput";
-var BodyRows = function (_a) {
-    var augFormattedRows = _a.augFormattedRows, _b = _a.gridSelectionFns, selectedSet = _b.selectedSet, getSelectInputModel = _b.getSelectInputModel, getSelectHandler = _b.getSelectHandler, getRowClickHandler = _b.getRowClickHandler, getAriaSelectedValue = _b.getAriaSelectedValue, unwrappedTableModel = _a.unwrappedStyles.unwrappedTableModel, _c = _a.combinedPipelineOutput, showSelectCol = _c.showSelectCol, ariaColIndexOffset = _c.ariaColIndexOffset, selectModel = _a.selectModel, editModel = _a.editModel, getInputStrSubmitCallback = _a.getInputStrSubmitCallback;
-    return augFormattedRows.map(function (row, index) {
-        return (_jsx(EditableRow, { onClick: getRowClickHandler(row.id), className: classNames({
-                "table-active": selectedSet.has(row.id),
-            }, unwrappedTableModel.tbodyTr(row.id, index)), "aria-rowindex": index + 2, dataRowId: row.id, "aria-selected": getAriaSelectedValue(row.id), ariaColIndexOffset: ariaColIndexOffset, cellData: row.contents, updateCallback: getInputStrSubmitCallback && getInputStrSubmitCallback(row.id), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) && editModel.getDeleteCallback(row.id), dataCellClasses: function (colIndex) {
-                return unwrappedTableModel.tbodyTd(row.id, index, colIndex);
-            }, 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, style: getWidthStyle(selectModel.selectColWidth), 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));
-    });
-};
+const BodyRows = ({ augFormattedRows, gridSelectionFns: { selectedSet, getSelectInputModel, getSelectHandler, getRowClickHandler, getAriaSelectedValue, }, unwrappedStyles: { unwrappedTableModel }, combinedPipelineOutput: { showSelectCol, ariaColIndexOffset }, selectModel, editModel, getInputStrSubmitCallback, additionalColIndexOffset, renderPrefixCells, }) => augFormattedRows.map((row, index) => {
+    return (_jsxs(EditableRow, { onClick: getRowClickHandler(row.id), className: classNames({
+            "table-active": selectedSet.has(row.id),
+        }, unwrappedTableModel.tbodyTr(row.id, index)), "aria-rowindex": row.prePaginationIndex + 2, dataRowId: row.id, "aria-selected": getAriaSelectedValue(row.id), ariaColIndexOffset: ariaColIndexOffset + (additionalColIndexOffset || 0), cellData: row.contents, updateCallback: getInputStrSubmitCallback && getInputStrSubmitCallback(row.id), deleteCallback: (editModel === null || editModel === void 0 ? void 0 : editModel.getDeleteCallback) && editModel.getDeleteCallback(row.id), dataCellClasses: (colIndex) => unwrappedTableModel.tbodyTd(row.id, index, colIndex), dataCellInputClasses: (colIndex) => 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: [renderPrefixCells && renderPrefixCells(row), showSelectCol && (_jsx("td", { className: classNames(unwrappedTableModel.rowSelectColTd(row.id, index)), "aria-colindex": 1 + (additionalColIndexOffset || 0), style: getWidthStyle(selectModel.selectColWidth), 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));
+});
 export default BodyRows;

package/grid/main/ColHeaderCell/index.js

@@ -3,14 +3,14 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
 import getWidthStyle from "../../util/getWidthStyle";
 import useSortHeaderStates from "./useSortHeaderStates";
-var ColHeaderCell = function (_a) {
-    var label = _a.label, sortModel = _a.sortModel, ariaColIndex = _a.ariaColIndex, additionalClasses = _a.additionalClasses, width = _a.width;
-    var _b = useSortHeaderStates(sortModel), handleClick = _b.handleClick, handleMouseOver = _b.handleMouseOver, handleMouseOut = _b.handleMouseOut, sortSymbol = _b.sortSymbol;
+import sortOrderToAriaSort from "../../sorting/sortOrderToAriaSort";
+const ColHeaderCell = ({ label, sortModel, ariaColIndex, additionalClasses, width, }) => {
+    const { handleClick, handleMouseOver, handleMouseOut, sortSymbol } = useSortHeaderStates(sortModel);
     return (_jsxs("th", { className: classNames({
             "rbdg-sort-toggler": sortModel,
             "table-active": sortModel === null || sortModel === void 0 ? void 0 : sortModel.sortOrder,
         }, additionalClasses || []), onClick: sortModel && handleClick, onMouseOver: handleMouseOver, onMouseOut: handleMouseOut, "aria-description": sortModel
             ? "Column header"
-            : "Column header that can be clicked to change the sorting mode", "aria-colindex": ariaColIndex, style: getWidthStyle(width), children: [label, sortSymbol] }));
+            : "Column header that can be clicked to change the sorting mode", "aria-colindex": ariaColIndex, "aria-sort": sortModel ? sortOrderToAriaSort(sortModel.sortOrder) : undefined, style: getWidthStyle(width), children: [label, sortSymbol] }));
 };
 export default ColHeaderCell;

package/grid/main/ColHeaderCell/useSortHeaderStates.js

@@ -3,9 +3,9 @@ import { useMemo } from "react";
 import upArrow from "../../sorting/upArrow";
 import arrowPlaceholder from "../../sorting/arrowPlaceholder";
 import downArrow from "../../sorting/downArrow";
-var useSortHeaderStates = function (sortModel) {
-    var _a = useControlledHover(), isHovering = _a.isHovering, setIsHovering = _a.setIsHovering, handleMouseOver = _a.handleMouseOver, handleMouseOut = _a.handleMouseOut;
-    var handleClick = function () {
+const useSortHeaderStates = (sortModel) => {
+    const { isHovering, setIsHovering, handleMouseOver, handleMouseOut } = useControlledHover();
+    const handleClick = () => {
         if (!sortModel) {
             return;
         }
@@ -23,7 +23,7 @@ var useSortHeaderStates = function (sortModel) {
             }
         }
     };
-    var sortSymbol = useMemo(function () {
+    const sortSymbol = useMemo(() => {
         if (!sortModel) {
             return null;
         }
@@ -43,12 +43,12 @@ var useSortHeaderStates = function (sortModel) {
         }
     }, [isHovering, sortModel]);
     return {
-        isHovering: isHovering,
-        setIsHovering: setIsHovering,
-        handleMouseOver: handleMouseOver,
-        handleMouseOut: handleMouseOut,
-        handleClick: handleClick,
-        sortSymbol: sortSymbol,
+        isHovering,
+        setIsHovering,
+        handleMouseOver,
+        handleMouseOut,
+        handleClick,
+        sortSymbol,
     };
 };
 export default useSortHeaderStates;

package/grid/main/ToggleButton.js

@@ -1,10 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import classNames from "classnames";
-var ToggleButton = function (_a) {
-    var isActive = _a.isActive, label = _a.label, onClick = _a.onClick, classes = _a.classes;
-    var baseClasses = ["btn"];
-    var variableClasses = {
+const ToggleButton = ({ isActive, label, onClick, classes, }) => {
+    const baseClasses = ["btn"];
+    const variableClasses = {
         active: isActive,
     };
     return (_jsx("button", { type: "button", className: classNames(baseClasses, variableClasses, classes, {