@absreim/react-bootstrap-data-grid 1.3.0 → 1.4.1

package/filtering/StringFilterRow.js

@@ -9,10 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { stringFilterSchemeNames, stringFilterSchemes, } from "../types";
+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 columnLabel = _a.columnLabel, filterState = _a.filterState, setFilterState = _a.setFilterState;
+    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 }));
@@ -26,9 +28,8 @@ var StringFilterRow = function (_a) {
         setFilterState(__assign(__assign({}, filterState), { searchString: target.value }));
     };
     var enabled = filterState.enabled, scheme = filterState.scheme, searchString = filterState.searchString;
-    var checkboxLabel = "".concat(columnLabel, " Column Filter Toggle");
-    var opSelectLabel = "".concat(columnLabel, " Column Filter Operator Selection");
     var valueInputLabel = "".concat(columnLabel, " Column Filter Value");
-    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("input", { name: checkboxLabel, "aria-label": checkboxLabel, type: "checkbox", checked: enabled, onChange: handleEnabledChange }) }), _jsx("td", { children: columnLabel }), _jsx("td", { children: "String" }), _jsx("td", { children: _jsx("select", { name: opSelectLabel, "aria-label": opSelectLabel, disabled: !enabled, className: "form-select", value: scheme, onChange: handleOpChange, children: stringFilterSchemes.map(function (scheme) { return (_jsx("option", { value: scheme, children: stringFilterSchemeNames[scheme] }, scheme)); }) }) }), _jsx("td", { children: _jsx("input", { name: valueInputLabel, "aria-label": valueInputLabel, className: "form-control", required: enabled, disabled: !enabled, value: searchString, onChange: handleSearchStringChange }) })] }));
+    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

@@ -1,4 +1,55 @@
-import { AbstractDateFilterState, AbstractFilterState, DateFilterScheme, NumberFilterScheme, StringFilterState } from "../types";
+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;

package/filtering/types.js

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

package/index.js

@@ -1,4 +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 "./pagination/PageSelector";
+export * from "./util/datetime";
 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.3.0",
+  "version": "1.4.1",
   "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",
@@ -27,6 +28,6 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/absreim/react-bootstrap-data-grid.git",
-    "directory": "src/grid"
+    "directory": "grid"
   }
 }

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}/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-label": "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/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>;

package/styling/styleModelUnwrappers.js

@@ -0,0 +1,57 @@
+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 unwrapSharedStyleModel = function (sharedStyleModel) { return ({
+    table: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.table) || [],
+    tbody: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.tbody) || [],
+    thead: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.thead) || [],
+    theadTr: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.theadTr) || [],
+    theadTh: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.theadTh) ? sharedStyleModel.theadTh : function () { return []; },
+    caption: (sharedStyleModel === null || sharedStyleModel === void 0 ? void 0 : sharedStyleModel.caption) || [],
+}); };
+export var unwrapTableStyleModel = function (tableStyleModel) { return (__assign(__assign({}, unwrapSharedStyleModel(tableStyleModel)), { tbodyTr: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTr) ? tableStyleModel.tbodyTr : function () { return []; }, tbodyTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTd) ? tableStyleModel.tbodyTd : function () { return []; }, tbodyTdInput: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.tbodyTdInput)
+        ? tableStyleModel.tbodyTdInput
+        : function () { return []; }, editColTh: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTh) || [], editColTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editColTd) ? tableStyleModel.editColTd : function () { return []; }, editCancelButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editCancelButton)
+        ? tableStyleModel.editCancelButton
+        : function () { return []; }, editDeleteButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editDeleteButton)
+        ? tableStyleModel.editDeleteButton
+        : function () { return []; }, editSaveButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editSaveButton)
+        ? tableStyleModel.editSaveButton
+        : function () { return []; }, editStartButton: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.editStartButton)
+        ? tableStyleModel.editStartButton
+        : function () { return []; }, rowSelectColTh: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTh) || [], rowSelectColTd: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectColTd)
+        ? tableStyleModel.rowSelectColTd
+        : function () { return []; }, rowSelectInput: (tableStyleModel === null || tableStyleModel === void 0 ? void 0 : tableStyleModel.rowSelectInput)
+        ? tableStyleModel.rowSelectInput
+        : function () { return []; } })); };
+export var unwrapFilterInputTableStyleModel = function (filterTableStyleModel) { return (__assign(__assign({}, unwrapSharedStyleModel(filterTableStyleModel)), { tbodyTr: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTr)
+        ? filterTableStyleModel.tbodyTr
+        : function () { return []; }, tbodyTd: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.tbodyTd)
+        ? filterTableStyleModel.tbodyTd
+        : function () { return []; }, enablementInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.enablementInput)
+        ? filterTableStyleModel.enablementInput
+        : function () { return []; }, schemeSelectionInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.schemeSelectionInput)
+        ? filterTableStyleModel.schemeSelectionInput
+        : function () { return []; }, searchStringInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.searchStringInput)
+        ? filterTableStyleModel.searchStringInput
+        : function () { return []; }, numberInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.numberInput)
+        ? filterTableStyleModel.numberInput
+        : function () { return []; }, startDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.startDateInput)
+        ? filterTableStyleModel.startDateInput
+        : function () { return []; }, endDateInput: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.endDateInput)
+        ? filterTableStyleModel.endDateInput
+        : function () { return []; }, submitButton: (filterTableStyleModel === null || filterTableStyleModel === void 0 ? void 0 : filterTableStyleModel.submitButton) || [] })); };
+export var unwrapAdditionalComponentsStyleModel = function (styleModel) { return ({
+    topLevelDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.topLevelDiv) || [],
+    filterInputsDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterInputsDiv) || [],
+    tableAndPaginationDiv: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.tableAndPaginationDiv) || [],
+    filterUiToggleButton: (styleModel === null || styleModel === void 0 ? void 0 : styleModel.filterUiToggleButton) || [],
+}); };

package/styling/types.d.ts

@@ -0,0 +1,44 @@
+export interface SharedTableStyleModel {
+    table?: string[];
+    tbody?: string[];
+    thead?: string[];
+    theadTr?: string[];
+    theadTh?: (colIndex: number) => string[];
+    caption?: string[];
+}
+export type TableStyleModel = SharedTableStyleModel & {
+    tbodyTr?: (origIndex: number, displayIndex: number) => string[];
+    tbodyTd?: (origRowIndex: number, displayRowIndex: number, colIndex: number) => string[];
+    tbodyTdInput?: (origRowIndex: number, displayRowIndex: number, colIndex: number) => string[];
+    editColTh?: string[];
+    editColTd?: (origIndex: number, displayIndex: number) => string[];
+    editStartButton?: (origIndex: number, displayIndex: number) => string[];
+    editDeleteButton?: (origIndex: number, displayIndex: number) => string[];
+    editSaveButton?: (origIndex: number, displayIndex: number) => string[];
+    editCancelButton?: (origIndex: number, displayIndex: number) => string[];
+    rowSelectColTh?: string[];
+    rowSelectColTd?: (origIndex: number, displayIndex: number) => string[];
+    rowSelectInput?: (origIndex: number, displayIndex: number) => string[];
+};
+export type FilterInputTableStyleModel = SharedTableStyleModel & {
+    tbodyTr?: (rowIndex: number) => string[];
+    tbodyTd?: (rowIndex: number, colIndex: number) => string[];
+    enablementInput?: (rowIndex: number) => string[];
+    schemeSelectionInput?: (rowIndex: number) => string[];
+    searchStringInput?: (rowIndex: number) => string[];
+    numberInput?: (rowIndex: number) => string[];
+    startDateInput?: (rowIndex: number) => string[];
+    endDateInput?: (rowIndex: number) => string[];
+    submitButton?: string[];
+};
+export interface AdditionalComponentsStyleModel {
+    topLevelDiv?: string[];
+    filterInputsDiv?: string[];
+    tableAndPaginationDiv?: string[];
+    filterUiToggleButton?: string[];
+}
+export interface StyleModel {
+    mainTableStyleModel?: TableStyleModel;
+    filterInputTableStyleModel?: FilterInputTableStyleModel;
+    additionalComponentsStyleModel?: AdditionalComponentsStyleModel;
+}

package/styling/types.js

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

package/types.d.ts

@@ -1,3 +1,4 @@
+import { CellData } from "./editing/types";
 export type ColDataType = string | number | Date;
 export type ColDataTypeStrings = "string" | "number" | "date" | "datetime";
 export interface ColDef {
@@ -21,98 +22,3 @@ export interface FormattedRow {
 }
 export type JustifyContentSetting = "start" | "end" | "center" | "between" | "around" | "evenly";
 export type Size = "small" | "medium" | "large";
-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;
-}
-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;
-}
-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;
-export type MultiSelectModelInitialState = Omit<MultiSelectModel, "setSelected">;
-export type SingleSelectModelInitialState = Omit<SingleSelectModel, "setSelected">;
-export interface CellData {
-    fieldName: string;
-    value: ColDataType;
-    type: ColDataTypeStrings;
-    ariaColIndex: number;
-    formattedValue: string;
-    label: string;
-}
-export type UpdateCallbackGenerator = (origIndex: number) => (rowDef: RowDef) => void;
-export interface EditModel {
-    getUpdateCallback: UpdateCallbackGenerator;
-    getDeleteCallback?: (origIndex: number) => () => void;
-}