@absreim/react-bootstrap-data-grid 1.2.2 → 1.4.0

package/{FilterOptionsTable → filtering}/NumberFilterRow.d.ts

@@ -1,9 +1,14 @@
 import { FC } from "react";
 import { NumberFormFilterState } from "./types";
-interface NumberFilterRowProps {
+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/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/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/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/filtering/types.d.ts

@@ -0,0 +1,64 @@
+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 FilterModel {
+    tableFilterState: EditableTableFilterState;
+    setTableFilterState: (state: EditableTableFilterState) => void;
+    filterTableCaption?: string;
+}
+export interface NumberFormFilterState extends AbstractFilterState {
+    type: "number";
+    scheme: NumberFilterScheme;
+    inputValue: string;
+}
+export interface DateFormFilterState extends AbstractDateFilterState {
+    scheme: DateFilterScheme;
+    startDate: string;
+    endDate: string;
+}
+export type FilterFormRowState = StringFilterState | NumberFormFilterState | DateFormFilterState;
+export type FilterFormState = Record<string, FilterFormRowState>;

package/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/{FilterOptionsTable → filtering}/useFormStateFromTableFilterState.d.ts

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

package/index.d.ts

@@ -1,4 +1,9 @@
 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 "./pagination/PageSelector";
 export { default } from "./Grid";

package/index.js

@@ -1,4 +1,9 @@
 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 "./pagination/PageSelector";
 export { default } from "./Grid";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@absreim/react-bootstrap-data-grid",
   "description": "Data grid UI component for use with web apps using React and Bootstrap",
-  "version": "1.2.2",
+  "version": "1.4.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",
@@ -11,7 +11,8 @@
     "bootstrap",
     "data",
     "table",
-    "grid"
+    "grid",
+    "datagrid"
   ],
   "dependencies": {
     "classnames": "^2.5.1",

package/pagination/PageSelector.d.ts

@@ -1,6 +1,6 @@
 import { JustifyContentSetting, Size } from "../types";
 import { FC } from "react";
-export interface PaginationProps {
+export interface PageSelectorProps {
     numPages: number;
     pageNum: number;
     numButtons: number;
@@ -20,5 +20,5 @@ export interface PaginationProps {
  * @param alignment - Flexbox justify-content setting on the <ul> element
  * @param size - Size variant of the <ul> element
  */
-declare const PageSelector: FC<PaginationProps>;
+declare const PageSelector: FC<PageSelectorProps>;
 export default PageSelector;

package/pagination/Pagination.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Size } from "../types";
+import { JustifyContentSetting, Size } from "../types";
 export interface PaginationProps {
     componentSize: Size;
     pageSizeOptions: number[];
@@ -9,6 +9,8 @@ export interface PaginationProps {
     prePagingNumRows: number;
     maxPageButtons: number;
     currentPage: number;
+    pageSelectorAriaLabel?: string;
+    pageSelectorJustifyContent?: JustifyContentSetting;
 }
 declare const Pagination: FC<PaginationProps>;
 export default Pagination;

package/pagination/Pagination.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PageSizeSelector from "./PageSizeSelector";
 import PageSelector from "./PageSelector";
 var Pagination = function (_a) {
-    var componentSize = _a.componentSize, pageSizeOptions = _a.pageSizeOptions, pageSizeIndex = _a.pageSizeIndex, handleSetPageSizeIndex = _a.handleSetPageSizeIndex, handleSetPageNum = _a.handleSetPageNum, prePagingNumRows = _a.prePagingNumRows, maxPageButtons = _a.maxPageButtons, currentPage = _a.currentPage;
+    var componentSize = _a.componentSize, pageSizeOptions = _a.pageSizeOptions, pageSizeIndex = _a.pageSizeIndex, handleSetPageSizeIndex = _a.handleSetPageSizeIndex, handleSetPageNum = _a.handleSetPageNum, prePagingNumRows = _a.prePagingNumRows, maxPageButtons = _a.maxPageButtons, currentPage = _a.currentPage, pageSelectorAriaLabel = _a.pageSelectorAriaLabel, pageSelectorJustifyContent = _a.pageSelectorJustifyContent;
     var numPages = Math.ceil(prePagingNumRows / pageSizeOptions[pageSizeIndex]);
     var pageIndexAwarePageSizeSetter = function (newPageSizeIndex) {
         var newPageSize = pageSizeOptions[newPageSizeIndex];
@@ -15,6 +15,6 @@ var Pagination = function (_a) {
             handleSetPageNum(maxPages);
         }
     };
-    return (_jsxs("div", { className: "d-flex justify-content-end gap-2", children: [_jsx(PageSizeSelector, { componentSize: componentSize, pageSizeOptions: pageSizeOptions, pageSizeIndex: pageSizeIndex, handleSetPageSize: pageIndexAwarePageSizeSetter }), _jsx(PageSelector, { numPages: numPages, pageNum: currentPage, numButtons: maxPageButtons, setPageNum: handleSetPageNum, size: componentSize })] }));
+    return (_jsxs("div", { className: "d-flex justify-content-end gap-2", children: [_jsx(PageSizeSelector, { componentSize: componentSize, pageSizeOptions: pageSizeOptions, pageSizeIndex: pageSizeIndex, handleSetPageSize: pageIndexAwarePageSizeSetter }), _jsx(PageSelector, { numPages: numPages, pageNum: currentPage, numButtons: maxPageButtons, setPageNum: handleSetPageNum, size: componentSize, ariaLabel: pageSelectorAriaLabel, alignment: pageSelectorJustifyContent })] }));
 };
 export default Pagination;

package/pagination/types.d.ts

@@ -0,0 +1,12 @@
+import { JustifyContentSetting, Size } from "../types";
+export interface GridPaginationState {
+    pageSizeOptions: number[];
+    pageSizeIndex: number;
+    setPageSizeIndex: (pageSizeIndex: number) => void;
+    currentPage: number;
+    setCurrentPage: (pageNum: number) => void;
+    maxPageButtons: number;
+    componentSize?: Size;
+    pageSelectorAriaLabel?: string;
+    pageSelectorJustifyContent?: JustifyContentSetting;
+}

package/pagination/types.js

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

package/pipeline/useCurrentPageRows.d.ts

@@ -0,0 +1,4 @@
+import { AugRowDef } from "../types";
+import { GridPaginationState } from "../pagination/types";
+declare const useCurrentPageRows: (sortedRows: AugRowDef[], pagination: GridPaginationState | undefined) => AugRowDef[];
+export default useCurrentPageRows;

package/pipeline/useCurrentPageRows.js

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+var useCurrentPageRows = function (sortedRows, pagination) {
+    return useMemo(function () {
+        if (pagination === undefined) {
+            return sortedRows;
+        }
+        var pageSizeOptions = pagination.pageSizeOptions, pageSizeIndex = pagination.pageSizeIndex, currentPage = pagination.currentPage;
+        var pageSize = pageSizeOptions[pageSizeIndex];
+        var lowerIndex = pageSize * (currentPage - 1);
+        var upperIndex = lowerIndex + pageSize;
+        return sortedRows.slice(lowerIndex, upperIndex);
+    }, [sortedRows, pagination]);
+};
+export default useCurrentPageRows;

package/{hooks → pipeline}/useDisplayRows.d.ts

@@ -1,3 +1,3 @@
 import { AugRowDef, FormattedRow, ColDef } from "../types";
-declare const useDisplayRows: (currentPageRows: AugRowDef[], cols: ColDef[]) => FormattedRow[];
+declare const useDisplayRows: (currentPageRows: AugRowDef[], cols: ColDef[], ariaColIndexOffset: number) => FormattedRow[];
 export default useDisplayRows;

package/{hooks → pipeline}/useDisplayRows.js

@@ -1,5 +1,20 @@
 import { useMemo } from "react";
-var useDisplayRows = function (currentPageRows, cols) {
+var getFormattedValue = function (value, formatter, typeString) {
+    if (formatter) {
+        return formatter(value);
+    }
+    if (typeString === "date") {
+        return value.toDateString();
+    }
+    if (typeString === "datetime") {
+        return value.toLocaleString();
+    }
+    if (typeString === "number") {
+        return value.toLocaleString();
+    }
+    return value;
+};
+var useDisplayRows = function (currentPageRows, cols, ariaColIndexOffset) {
     return useMemo(function () {
         var nameToIndex = new Map();
         cols.forEach(function (_a, index) {
@@ -24,29 +39,21 @@ var useDisplayRows = function (currentPageRows, cols) {
                     return;
                 }
                 var index = nameToIndex.get(name);
-                var formatter = cols[index].formatter;
-                var typeString = cols[index].type;
+                var col = cols[index];
+                var formatter = col.formatter;
+                var typeString = col.type;
                 var value = row.data[name];
-                if (formatter) {
-                    displayRow[index] = formatter(value);
-                    return;
-                }
-                if (typeString === "date") {
-                    displayRow[index] = value.toDateString();
-                    return;
-                }
-                if (typeString === "datetime") {
-                    displayRow[index] = value.toLocaleString();
-                    return;
-                }
-                if (typeString === "number") {
-                    displayRow[index] = value.toLocaleString();
-                    return;
-                }
-                displayRow[index] = value;
+                displayRow[index] = {
+                    fieldName: cols[index].name,
+                    value: value,
+                    type: typeString,
+                    ariaColIndex: index + 1 + ariaColIndexOffset,
+                    formattedValue: getFormattedValue(value, formatter, typeString),
+                    label: cols[index].label,
+                };
             });
             return { contents: displayRow, origIndex: row.meta.origIndex };
         });
-    }, [currentPageRows, cols]);
+    }, [currentPageRows, cols, ariaColIndexOffset]);
 };
 export default useDisplayRows;

package/{hooks → pipeline}/useEditableFromFilterState.d.ts

@@ -1,3 +1,3 @@
-import { EditableTableFilterState, TableFilterState } from "../types";
+import { EditableTableFilterState, TableFilterState } from "../filtering/types";
 declare const useEditableFromFilterState: (filterState: TableFilterState | null) => EditableTableFilterState | null;
 export default useEditableFromFilterState;

package/{hooks → pipeline}/useFilter.d.ts

@@ -1,3 +1,4 @@
-import { AugRowDef, EditableTableFilterState } from "../types";
+import { AugRowDef } from "../types";
+import { EditableTableFilterState } from "../filtering/types";
 declare const useFilter: (rows: AugRowDef[], filterState: EditableTableFilterState | null) => AugRowDef[];
 export default useFilter;

package/{hooks → pipeline}/useFilterStateFromEditable.d.ts

@@ -1,3 +1,4 @@
-import { ColDef, EditableTableFilterState, TableFilterState } from "../types";
+import { ColDef } from "../types";
+import { EditableTableFilterState, TableFilterState } from "../filtering/types";
 declare const useFilterStateFromEditable: (colDefs: ColDef[], editableFilterState: EditableTableFilterState | null) => TableFilterState | null;
 export default useFilterStateFromEditable;

package/{hooks → pipeline}/useSortedRows.d.ts

@@ -1,3 +1,4 @@
-import { AugRowDef, ColDef, TableSortModel } from "../types";
+import { AugRowDef, ColDef } from "../types";
+import { TableSortModel } from "../sorting/types";
 declare const useSortedRows: (rows: AugRowDef[], cols: ColDef[], sortModel: TableSortModel | undefined) => AugRowDef[];
 export default useSortedRows;

package/selection/SelectAllHeaderCell.d.ts

@@ -1,9 +1,10 @@
-import { SelectType } from "../types";
 import { FC } from "react";
+import { SelectType } from "./types";
 interface SelectAllHeaderCellProps {
     onClick: () => void;
     selectType: SelectType;
     selectionExists: boolean;
+    additionalClasses?: string[];
 }
 declare const SelectAllHeaderCell: FC<SelectAllHeaderCellProps>;
 export default SelectAllHeaderCell;

package/selection/SelectAllHeaderCell.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import deselectAll from "../icons/deselectAll";
-import selectAll from "../icons/selectAll";
-import arrowPlaceholder from "../icons/arrowPlaceholder";
+import deselectAll from "./deselectAll";
+import selectAll from "./selectAll";
+import arrowPlaceholder from "../sorting/arrowPlaceholder";
 import classNames from "classnames";
 // It seems like React does not support setting indeterminate states on
 // checkboxes in a controlled manner, which caused me to not want to refactor
@@ -31,11 +31,12 @@ var getCellAriaDescription = function (selectMode, existingSelection) {
     return "Selection input header cell";
 };
 var SelectAllHeaderCell = function (_a) {
-    var onClick = _a.onClick, selectType = _a.selectType, selectionExists = _a.selectionExists;
+    var onClick = _a.onClick, selectType = _a.selectType, selectionExists = _a.selectionExists, additionalClasses = _a.additionalClasses;
     var disabled = selectType === "single" && !selectionExists;
     var description = getCellAriaDescription(selectType, selectionExists);
-    return (_jsx("th", { "aria-colindex": 1, title: description, "aria-description": description, className: classNames("rbdg-select-header-cell", "btn-primary", {
+    return (_jsx("th", { "aria-colindex": 1, title: description, "aria-description": description, className: classNames("rbdg-select-header-cell", {
+            "btn-primary": !additionalClasses || additionalClasses.length === 0,
             "rbdg-clickable-grid-header-cell": !disabled,
-        }), onClick: onClick, children: getSelectIcon(selectType, selectionExists) }));
+        }, additionalClasses || []), onClick: onClick, children: getSelectIcon(selectType, selectionExists) }));
 };
 export default SelectAllHeaderCell;

package/selection/SelectionInput.d.ts

@@ -13,6 +13,7 @@ export interface SelectionInputProps {
     selected: boolean;
     selectionInputModel: SelectionInputModel;
     selectCallback: () => void;
+    additionalClasses?: string[];
 }
 declare const SelectionInput: FC<SelectionInputProps>;
 export default SelectionInput;

package/selection/SelectionInput.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
 var SelectionInput = function (_a) {
-    var selectionInputModel = _a.selectionInputModel, selected = _a.selected, selectCallback = _a.selectCallback;
+    var selectionInputModel = _a.selectionInputModel, selected = _a.selected, selectCallback = _a.selectCallback, additionalClasses = _a.additionalClasses;
     var type = selectionInputModel.type;
     var onChange = function (_a) {
         var checked = _a.target.checked;
@@ -15,7 +16,7 @@ var SelectionInput = function (_a) {
             selectCallback();
         }
     };
-    return (_jsx("input", { "aria-description": "input to select the current row", onClick: function (event) {
+    return (_jsx("input", { className: classNames(additionalClasses || []), "aria-label": "Input to select the current row", onClick: function (event) {
             event.stopPropagation();
         }, type: type, checked: selected, onChange: onChange, name: selectionInputModel.name }));
 };

package/selection/types.d.ts

@@ -0,0 +1,16 @@
+export type SelectMode = "column" | "row" | "both";
+export type SelectType = "single" | "multi";
+export interface MultiSelectModel {
+    mode: SelectMode;
+    type: "multi";
+    selected: number[];
+    setSelected: (selected: number[]) => void;
+}
+export interface SingleSelectModel {
+    mode: SelectMode;
+    type: "single";
+    selected: number | null;
+    setSelected: (selected: number | null) => void;
+    groupName: string;
+}
+export type SelectModel = SingleSelectModel | MultiSelectModel;

package/selection/types.js

@@ -0,0 +1,4 @@
+// Selected indices are based on the original index of the input rows. If
+// filtered-out items are included in the 'selected' property, there will be a
+// visual indication to the user of that fact.
+export {};

package/sorting/types.d.ts

@@ -0,0 +1,13 @@
+export type SortOrder = "asc" | "desc";
+export interface SortColDef {
+    name: string;
+    order: SortOrder;
+}
+export interface ColSortModel {
+    sortOrder: SortOrder | null;
+    setSortOrder: (order: SortOrder | null) => void;
+}
+export interface TableSortModel {
+    sortColDef: SortColDef | null;
+    setSortColDef: (sortColDef: SortColDef | null) => void;
+}

package/sorting/types.js

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

package/style.scss

@@ -4,18 +4,18 @@
 
 .rbdg-select-header-cell {
   .rdbg-svg-icon {
-    background-color: var(--bs-btn-bg)
+    background-color: var(--bs-btn-bg);
   }
   .rdbg-svg-icon-foreground {
-    color: var(--bs-btn-color)
+    color: var(--bs-btn-color);
   }
 
   &:hover {
     .rdbg-svg-icon {
-      background-color: var(--bs-btn-hover-bg)
+      background-color: var(--bs-btn-hover-bg);
     }
     .rdbg-svg-icon-foreground {
-      color: var(--bs-btn-hover-color)
+      color: var(--bs-btn-hover-color);
     }
   }
 }

package/styling/styleModelUnwrappers.d.ts

@@ -0,0 +1,4 @@
+import { AdditionalComponentsStyleModel, FilterInputTableStyleModel, TableStyleModel } from "./types";
+export declare const unwrapTableStyleModel: (tableStyleModel: TableStyleModel | undefined) => Required<TableStyleModel>;
+export declare const unwrapFilterInputTableStyleModel: (filterTableStyleModel: FilterInputTableStyleModel | undefined) => Required<FilterInputTableStyleModel>;
+export declare const unwrapAdditionalComponentsStyleModel: (styleModel: AdditionalComponentsStyleModel | undefined) => Required<AdditionalComponentsStyleModel>;