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

package/grid/filtering/DateFilterRow.js

@@ -0,0 +1,45 @@
+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 }));
+    };
+    var handleEnabledChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { enabled: target.checked }));
+    };
+    var handleStartValueChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { startDate: target.value }));
+    };
+    var handleEndValueChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__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 })] }))] }));
+    return (_jsx(FilterRow, { ariaRowIndex: ariaRowIndex, columnLabel: columnLabel, typeLabel: filterState.type === "date" ? "Date" : "Datetime", enabled: enabled, enabledChangeHandler: handleEnabledChange, currentScheme: scheme, handleSchemeChange: handleOpChange, schemesToLabels: dateFilterSchemeNames, searchStringInputCellContents: searchStringInputCellContents, trClasses: trClasses, tdClasses: tdClasses, inputClasses: enableInputClasses, selectClasses: schemeSelectClasses }));
+};
+export default DateFilterRow;

package/grid/filtering/FilterOptionsTable.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { EditableTableFilterState, TableFilterState } from "./types";
+import { FilterInputTableStyleModel } from "../styling/types";
+export interface FilterOptionsTableProps {
+    filterState: TableFilterState;
+    setFilterState: (filterState: EditableTableFilterState) => void;
+    caption?: string;
+    styleModel?: FilterInputTableStyleModel;
+}
+declare const FilterOptionsTable: FC<FilterOptionsTableProps>;
+export default FilterOptionsTable;

package/grid/filtering/FilterOptionsTable.js

@@ -0,0 +1,117 @@
+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";
+import NumberFilterRow from "./NumberFilterRow";
+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) {
+            case "string": {
+                editableState[colName] = __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
+                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 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) {
+        event.preventDefault();
+        var 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" })] }));
+};
+export default FilterOptionsTable;

package/grid/filtering/FilterRow.d.ts

@@ -0,0 +1,19 @@
+import { ChangeEventHandler, ReactNode } from "react";
+export interface FilterRowProps<FilterScheme extends string> {
+    ariaRowIndex: number;
+    columnLabel: string;
+    typeLabel: string;
+    enabled: boolean;
+    enabledChangeHandler: ChangeEventHandler<HTMLInputElement>;
+    currentScheme: string;
+    handleSchemeChange: ChangeEventHandler<HTMLSelectElement>;
+    schemesToLabels: Record<FilterScheme, string>;
+    searchStringInputCellContents: ReactNode;
+    trClasses: string[];
+    tdClasses: (colIndex: number) => string[];
+    inputClasses: string[];
+    selectClasses: string[];
+}
+export type CommonFilterRowStyleProps = Pick<FilterRowProps<string>, "trClasses" | "tdClasses">;
+export declare function FilterRow<FilterScheme extends string = string>(props: FilterRowProps<FilterScheme>): ReactNode;
+export default FilterRow;

package/grid/filtering/FilterRow.js

@@ -0,0 +1,18 @@
+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 })] }));
+}
+export default FilterRow;

package/grid/filtering/NumberFilterRow.d.ts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { NumberFormFilterState } from "./types";
+import { CommonFilterRowStyleProps } from "./FilterRow";
+export type NumberFilterRowProps = {
+    ariaRowIndex: number;
+    columnLabel: string;
+    filterState: NumberFormFilterState;
+    setFilterState: (filterState: NumberFormFilterState) => void;
+    schemeSelectClasses: string[];
+    enableInputClasses: string[];
+    numberInputClasses: string[];
+} & CommonFilterRowStyleProps;
+declare const NumberFilterRow: FC<NumberFilterRowProps>;
+export default NumberFilterRow;

package/grid/filtering/NumberFilterRow.js

@@ -0,0 +1,35 @@
+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 }));
+    };
+    var handleEnabledChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { enabled: target.checked }));
+    };
+    var handleNumInputValueChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__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 }));
+    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.d.ts

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { CommonFilterRowStyleProps } from "./FilterRow";
+import { StringFilterState } from "./types";
+type StringFilterRowProps = {
+    ariaRowIndex: number;
+    columnLabel: string;
+    filterState: StringFilterState;
+    setFilterState: (filterState: StringFilterState) => void;
+    schemeSelectClasses: string[];
+    enableInputClasses: string[];
+    searchStringInputClasses: string[];
+} & CommonFilterRowStyleProps;
+declare const StringFilterRow: FC<StringFilterRowProps>;
+export default StringFilterRow;

package/grid/filtering/StringFilterRow.js

@@ -0,0 +1,35 @@
+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 }));
+    };
+    var handleEnabledChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__assign({}, filterState), { enabled: target.checked }));
+    };
+    var handleSearchStringChange = function (_a) {
+        var target = _a.target;
+        setFilterState(__assign(__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 }));
+    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.d.ts

@@ -0,0 +1,70 @@
+export type TableFilterState = Record<string, ColFilterState>;
+export type EditableTableFilterState = Record<string, FilterState>;
+export interface ColFilterState {
+    editableState: FilterState;
+    label: string;
+}
+export interface AbstractFilterState {
+    enabled: boolean;
+}
+export declare const stringFilterSchemes: readonly ["contains", "startsWith", "endsWith"];
+export type StringFilterScheme = (typeof stringFilterSchemes)[number];
+export declare const stringFilterSchemeNames: Record<StringFilterScheme, string>;
+export interface StringFilterState extends AbstractFilterState {
+    type: "string";
+    scheme: StringFilterScheme;
+    searchString: string;
+}
+export declare const numberFilterSchemes: readonly ["equals", "greaterThan", "lessThan", "greaterOrEqual", "lessOrEqual"];
+export type NumberFilterScheme = (typeof numberFilterSchemes)[number];
+export declare const numberFilterSchemeNames: Record<NumberFilterScheme, string>;
+export interface NumberFilterState extends AbstractFilterState {
+    type: "number";
+    scheme: NumberFilterScheme;
+    numValue: number | null;
+}
+export declare const dateFilterSchemes: readonly ["startFrom", "endAt", "between"];
+export type DateFilterScheme = (typeof dateFilterSchemes)[number];
+export declare const dateFilterSchemeNames: Record<DateFilterScheme, string>;
+export interface AbstractDateFilterState extends AbstractFilterState {
+    type: "date" | "datetime";
+    scheme: DateFilterScheme;
+}
+export interface StartDateFilterState extends AbstractDateFilterState {
+    scheme: "startFrom";
+    startDate: Date | null;
+}
+export interface EndDateFilterState extends AbstractDateFilterState {
+    scheme: "endAt";
+    endDate: Date | null;
+}
+export interface BetweenDatesFilterState extends AbstractDateFilterState {
+    scheme: "between";
+    startDate: Date | null;
+    endDate: Date | null;
+}
+export type DateFilterState = StartDateFilterState | EndDateFilterState | BetweenDatesFilterState;
+export type FilterState = StringFilterState | NumberFilterState | DateFilterState;
+export interface ControlledFilterModel {
+    type?: "controlled";
+    tableFilterState: EditableTableFilterState;
+    setTableFilterState: (state: EditableTableFilterState) => void;
+    filterTableCaption?: string;
+}
+export type UncontrolledFilterModel = Partial<Pick<ControlledFilterModel, "tableFilterState" | "filterTableCaption">> & {
+    type: "uncontrolled";
+};
+export type NormalizedTableFilterModel = Pick<ControlledFilterModel, "tableFilterState" | "setTableFilterState">;
+export interface NumberFormFilterState extends AbstractFilterState {
+    type: "number";
+    scheme: NumberFilterScheme;
+    inputValue: string;
+}
+export type FilterModel = ControlledFilterModel | UncontrolledFilterModel;
+export interface DateFormFilterState extends AbstractDateFilterState {
+    scheme: DateFilterScheme;
+    startDate: string;
+    endDate: string;
+}
+export type FilterFormRowState = StringFilterState | NumberFormFilterState | DateFormFilterState;
+export type FilterFormState = Record<string, FilterFormRowState>;

package/grid/filtering/types.js

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

package/grid/filtering/useFilterFormState.d.ts

@@ -0,0 +1,3 @@
+import { FilterFormState, TableFilterState } from "./types";
+declare const useFilterFormState: (tableFilterState: TableFilterState) => FilterFormState;
+export default useFilterFormState;

package/grid/filtering/useFilterFormState.js

@@ -0,0 +1,72 @@
+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;
+                        }
+                    }
+                }
+            }
+            return filterFormState;
+        }, {});
+    }, [tableFilterState]);
+};
+export default useFilterFormState;

package/grid/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./types";
+export * from "./styling/types";
+export * from "./editing/types";
+export * from "./selection/types";
+export * from "./filtering/types";
+export * from "./sorting/types";
+export * from "./pagination/types";
+export * from "./Grid";
+export * from "./util/datetime";
+export { default } from "./Grid";

package/grid/index.js

@@ -0,0 +1,10 @@
+export * from "./types";
+export * from "./styling/types";
+export * from "./editing/types";
+export * from "./selection/types";
+export * from "./filtering/types";
+export * from "./sorting/types";
+export * from "./pagination/types";
+export * from "./Grid";
+export * from "./util/datetime";
+export { default } from "./Grid";

package/grid/main/BodyRows.d.ts

@@ -0,0 +1,19 @@
+import { AugFormattedRow } from "../types";
+import { FC } from "react";
+import { UseGridSelectionFnsHook } from "../pipeline/useGridSelectionFns";
+import { UseUnwrappedGridStylesHook } from "../pipeline/useUnwrappedGridStyles";
+import { UseCombinedPipelineHook } from "../pipeline/useCombinedPipeline";
+import { SelectModel } from "../selection/types";
+import { EditModel } from "../editing/types";
+import { UseGetInputStrSubmitCallbackHook } from "../pipeline/useGetInputStrSubmitCallback";
+interface BodyRowsProps {
+    augFormattedRows: AugFormattedRow[];
+    gridSelectionFns: UseGridSelectionFnsHook;
+    unwrappedStyles: UseUnwrappedGridStylesHook;
+    combinedPipelineOutput: UseCombinedPipelineHook;
+    selectModel: SelectModel | undefined;
+    editModel: EditModel | undefined;
+    getInputStrSubmitCallback: UseGetInputStrSubmitCallbackHook;
+}
+declare const BodyRows: FC<BodyRowsProps>;
+export default BodyRows;

package/grid/main/BodyRows.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } 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));
+    });
+};
+export default BodyRows;

package/grid/main/ColHeaderCell/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ColHeaderCellProps } from "../../types";
+declare const ColHeaderCell: FC<ColHeaderCellProps>;
+export default ColHeaderCell;

package/grid/main/ColHeaderCell/index.js

@@ -0,0 +1,16 @@
+"use client";
+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;
+    return (_jsxs("th", { className: classNames({
+            "rbdg-clickable-grid-header-cell": 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] }));
+};
+export default ColHeaderCell;

package/grid/main/ColHeaderCell/useSortHeaderStates.d.ts

@@ -0,0 +1,9 @@
+import { UseControlledHoverHook } from "../../util/useControlledHover";
+import { ReactNode } from "react";
+import { ColSortModel } from "../../sorting/types";
+export type UseSortHeaderStatesHook = UseControlledHoverHook<HTMLTableCellElement> & {
+    handleClick: () => void;
+    sortSymbol: ReactNode;
+};
+declare const useSortHeaderStates: (sortModel: ColSortModel | undefined) => UseSortHeaderStatesHook;
+export default useSortHeaderStates;