@absreim/react-bootstrap-data-grid 2.7.0 → 4.0.0

package/{toolbar → common/toolbar}/ToolbarContainer.d.ts

@@ -1,8 +1,8 @@
-import { ToolbarInterfaces } from "./types";
+import { InterfaceNodeGenerator } from "./types";
 import { FC } from "react";
 import { ToolbarStyleModel } from "../styling/types";
 interface ToolbarContainerProps {
-    interfaces: ToolbarInterfaces;
+    interfaceGen: InterfaceNodeGenerator;
     styleModel?: ToolbarStyleModel;
 }
 declare const ToolbarContainer: FC<ToolbarContainerProps>;

package/{toolbar → common/toolbar}/ToolbarContainer.js

@@ -1,15 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import Toolbar from "./Toolbar";
 import classNames from "classnames";
 var ToolbarContainer = function (_a) {
-    var interfaces = _a.interfaces, styleModel = _a.styleModel;
+    var interfaceGen = _a.interfaceGen, styleModel = _a.styleModel;
     var _b = useState(null), option = _b[0], setOption = _b[1];
-    var enabledFeatures = Object.keys(interfaces).reduce(function (prev, toolbarOption) {
-        prev[toolbarOption] =
-            !!interfaces[toolbarOption];
-        return prev;
-    }, {});
+    var closeUiCallback = useCallback(function () { return setOption(null); }, []);
+    var interfaces = useMemo(function () { return interfaceGen(closeUiCallback); }, [closeUiCallback, interfaceGen]);
+    var enabledFeatures = useMemo(function () {
+        return Object.keys(interfaces).reduce(function (prev, toolbarOption) {
+            prev[toolbarOption] =
+                !!interfaces[toolbarOption];
+            return prev;
+        }, {});
+    }, [interfaces]);
     return (_jsxs("div", { className: "vstack", "data-testid": "toolbar container", children: [_jsx(Toolbar, { enabledFeatures: enabledFeatures, option: option, setOption: setOption, toolbarClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbar, activeClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.activeButton, inactiveClasses: styleModel === null || styleModel === void 0 ? void 0 : styleModel.inactiveButton }), _jsx("div", { className: "position-relative", children: option !== null && (_jsx("div", { "data-testid": "toolbar feature interface content container", className: classNames((styleModel === null || styleModel === void 0 ? void 0 : styleModel.interfaceContainer) || [
                         "position-absolute",
                         "z-1",

package/common/toolbar/types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { FilterOptionsTableProps } from "../filtering/FilterOptionsTable";
+import { ExportFormProps } from "../export/ExportForm";
+export type ToolbarOption = "filtering" | "exporting";
+export type ToolbarInterfaces = Partial<Record<ToolbarOption, ReactNode>>;
+export interface InterfaceParams {
+    filtering?: FilterOptionsTableProps;
+    exporting?: ExportFormProps;
+}
+export type InterfacePropGenerator = (closeUiCallback: () => void) => InterfaceParams;
+export type InterfaceNodeGenerator = (closeUiCallback: () => void) => ToolbarInterfaces;

package/common/toolbar/useInterfaces.d.ts

@@ -0,0 +1,3 @@
+import { InterfacePropGenerator, ToolbarInterfaces } from "./types";
+declare const useInterfaces: (gen: InterfacePropGenerator) => (closeCallback: () => void) => ToolbarInterfaces;
+export default useInterfaces;

package/{toolbar → common/toolbar}/useInterfaces.js

@@ -13,11 +13,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import FilterOptionsTable from "../filtering/FilterOptionsTable";
 import { useMemo } from "react";
 import ExportForm from "../export/ExportForm";
-var useInterfaces = function (_a) {
-    var filtering = _a.filtering, exporting = _a.exporting;
-    return useMemo(function () { return ({
-        filtering: filtering ? _jsx(FilterOptionsTable, __assign({}, filtering)) : undefined,
-        exporting: exporting ? _jsx(ExportForm, __assign({}, exporting)) : undefined,
-    }); }, [exporting, filtering]);
+var useInterfaces = function (gen) {
+    return useMemo(function () { return function (closeCallback) {
+        var props = gen(closeCallback);
+        var exporting = props.exporting, filtering = props.filtering;
+        return {
+            filtering: filtering ? (_jsx(FilterOptionsTable, __assign({}, filtering))) : undefined,
+            exporting: exporting ? _jsx(ExportForm, __assign({}, exporting)) : undefined,
+        };
+    }; }, [gen]);
 };
 export default useInterfaces;

package/{types.d.ts → common/types.d.ts}

@@ -1,6 +1,6 @@
-import { CellData, EditModel } from "./editing/types";
-import { GridPaginationState } from "./pagination/types";
-import { ColSortModel, TableSortModel } from "./sorting/types";
+import { EditModel } from "./editing/types";
+import { PaginationModel } from "./pagination/types";
+import { SortModel } from "./sorting/types";
 import { FilterModel } from "./filtering/types";
 import { SelectModel } from "./selection/types";
 import { StyleModel } from "./styling/types";
@@ -23,45 +23,35 @@ export interface RowDef<Data extends ValidRowData = ValidRowData> {
     id: RowId;
     data: RowData<Data>;
 }
-export type AugRowDef<Data extends ValidRowData = ValidRowData> = RowDef<Data> & {
-    origIndex: number;
-};
-export type PostPaginationRowDef<Data extends ValidRowData = ValidRowData> = AugRowDef & {
-    prePaginationIndex: number;
-};
-export type FormattedRow = {
-    contents: CellData[];
-} & Omit<PostPaginationRowDef, "data">;
-export type AugCellData = CellData & {
-    width?: number;
-};
-export type AugFormattedRow = Omit<FormattedRow, "contents"> & {
-    contents: AugCellData[];
-};
-export type JustifyContentSetting = "start" | "end" | "center" | "between" | "around" | "evenly";
-export type Size = "small" | "medium" | "large";
-export type DisplayMode = "table" | "block";
-export interface GridProps {
+export interface MainComponentSharedProps {
     rows: RowDef[];
     cols: ColDef[];
-    pagination?: GridPaginationState;
-    sortModel?: TableSortModel;
+    pagination?: PaginationModel;
+    sortModel?: SortModel;
     filterModel?: FilterModel;
     selectModel?: SelectModel;
     editModel?: EditModel;
-    caption?: string;
     styleModel?: StyleModel;
-    useToolbar?: boolean;
-    responsive?: boolean;
-    displayMode?: DisplayMode;
+    allowExport?: boolean;
 }
-export type BaseGridProps = Omit<GridProps, "cols"> & {
-    cols: ColDefBase[];
+export type AugRowDef<Data extends ValidRowData = ValidRowData> = RowDef<Data> & {
+    origIndex: number;
 };
-export interface ColHeaderCellProps {
-    label: string;
-    sortModel?: ColSortModel;
+export type PostPaginationRowDef<Data extends ValidRowData = ValidRowData> = AugRowDef<Data> & {
+    prePaginationIndex: number;
+};
+export interface CellData {
+    fieldName: string;
+    value: ColDataType;
+    type: ColDataTypeStrings;
     ariaColIndex: number;
-    additionalClasses?: string[];
+    formattedValue: string;
+    label: string;
     width?: number;
 }
+export type FormattedRow = {
+    contents: Omit<CellData, "width">[];
+} & Omit<PostPaginationRowDef, "data">;
+export type AugFormattedRow = {
+    contents: CellData[];
+} & Omit<PostPaginationRowDef, "data">;

package/common/util/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./datetime";
+export { default as getWidthStyle } from "./getWidthStyle";
+export { default as isSubset } from "./isSubset";
+export { default as trueModulo } from "./trueModulo";
+export { default as useControlledHover } from "./useControlledHover";

package/common/util/index.js

@@ -0,0 +1,5 @@
+export * from "./datetime";
+export { default as getWidthStyle } from "./getWidthStyle";
+export { default as isSubset } from "./isSubset";
+export { default as trueModulo } from "./trueModulo";
+export { default as useControlledHover } from "./useControlledHover";

package/community/index.d.ts

@@ -0,0 +1,4 @@
+export * from "../grid";
+export * from "../table";
+export { default as Grid } from "../grid";
+export { default as Table } from "../table";

package/community/index.js

@@ -0,0 +1,4 @@
+export * from "../grid";
+export * from "../table";
+export { default as Grid } from "../grid";
+export { default as Table } from "../table";

package/grid/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const GRID_BODY_DATA_TEST_ID = "rbdg-body-rowgroup";
+export declare const GRID_HEADER_DATA_TEST_ID = "rbdg-header-rowgroup";

package/grid/constants.js

@@ -0,0 +1,2 @@
+export var GRID_BODY_DATA_TEST_ID = "rbdg-body-rowgroup";
+export var GRID_HEADER_DATA_TEST_ID = "rbdg-header-rowgroup";

package/grid/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./main/types";
+export * from "../common";
+export { default } from "./main/Grid";

package/grid/index.js

@@ -0,0 +1,3 @@
+export * from "./main/types";
+export * from "../common";
+export { default } from "./main/Grid";

package/{Grid.d.ts → grid/main/Grid.d.ts}

@@ -2,4 +2,3 @@ import { FC } from "react";
 import { GridProps } from "./types";
 declare const Grid: FC<GridProps>;
 export default Grid;
-export type { GridProps } from "./types";

package/grid/main/Grid.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import useCombinedPipeline from "../../common/pipeline/useCombinedPipeline";
+import useAugFormattedRows from "../../common/pipeline/useAugFormattedRows";
+import useColNameToWidth from "../../common/pipeline/useColNameToWidth";
+import GridHeader from "./GridHeader";
+import GridBody from "./GridBody";
+import classNames from "classnames";
+import { CSS_PREFIX } from "../../common/constants";
+var Grid = function (_a) {
+    var rows = _a.rows, cols = _a.cols, filterModel = _a.filterModel, sortModel = _a.sortModel, pagination = _a.pagination, selectModel = _a.selectModel, width = _a.width, height = _a.height, variant = _a.variant, stripes = _a.stripes, hover = _a.hover, borders = _a.borders, small = _a.small, divider = _a.divider, borderVariant = _a.borderVariant, headerCellVariant = _a.headerCellVariant, headerRowVariant = _a.headerRowVariant, bodyCellVariant = _a.bodyCellVariant, bodyRowVariant = _a.bodyRowVariant;
+    var _b = useCombinedPipeline({
+        rows: rows,
+        cols: cols,
+        filterModel: filterModel,
+        sortModel: sortModel,
+        pagination: pagination,
+        selectModel: selectModel,
+    }), displayRows = _b.displayRows, filteredRows = _b.filteredRows;
+    var colNameToWidth = useColNameToWidth(cols);
+    var augFormattedRows = useAugFormattedRows(colNameToWidth, displayRows);
+    var gridStyle = useMemo(function () {
+        function getWidthProperty(width) {
+            if (width === "parent") {
+                return "100%";
+            }
+            if (typeof width === "number") {
+                return width;
+            }
+            return "min-content";
+        }
+        function getHeightProperty(height) {
+            if (height === "parent") {
+                return "100%";
+            }
+            if (typeof height === "number") {
+                return height;
+            }
+            return undefined;
+        }
+        return {
+            width: getWidthProperty(width),
+            height: getHeightProperty(height),
+        };
+    }, [width, height]);
+    var vertScrollable = height !== undefined && height !== "auto";
+    return (_jsxs("div", { style: gridStyle, className: classNames({
+            "overflow-x-auto": width !== undefined && width !== "auto",
+            "overflow-y-auto": vertScrollable,
+            "rbdg-grid-striped": stripes === "rows",
+            "rbdg-grid-striped-columns": stripes === "columns",
+            "rbdg-grid-hover": !!hover,
+            "rbdg-grid-bordered": borders === "full",
+            "rbdg-grid-borderless": borders === "none",
+            "rbdg-grid-sm": !!small,
+            "rbdg-grid-group-divider": !!divider,
+        }, "rbdg-grid", variant && "".concat(CSS_PREFIX, "-").concat(variant), borderVariant && "border-".concat(borderVariant)), role: "grid", "aria-colcount": cols.length, "aria-rowcount": filteredRows.length + 1, children: [_jsx(GridHeader, { cols: cols, rowVariant: headerRowVariant, cellVariant: headerCellVariant, vertScrollable: vertScrollable }), _jsx(GridBody, { augFormattedRows: augFormattedRows, cols: cols, rowVariant: bodyRowVariant, cellVariant: bodyCellVariant })] }));
+};
+export default Grid;

package/grid/main/GridBody.d.ts

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

package/grid/main/GridBody.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import getWidthStyles from "./getWidthStyles";
+import classNames from "classnames";
+import { CSS_PREFIX, DEFAULT_COL_WIDTH } from "../../common/constants";
+import { GRID_BODY_DATA_TEST_ID } from "../constants";
+var GridBody = function (_a) {
+    var augFormattedRows = _a.augFormattedRows, cols = _a.cols, rowVariant = _a.rowVariant, cellVariant = _a.cellVariant;
+    return (_jsx("div", { role: "rowgroup", "data-testid": GRID_BODY_DATA_TEST_ID, children: augFormattedRows.map(function (row, rowDisplayIndex) { return (_jsx("div", { role: "row", "aria-rowindex": row.prePaginationIndex + 2, className: classNames("d-flex", "flex-row", rowVariant &&
+                rowVariant(row, rowDisplayIndex) &&
+                "".concat(CSS_PREFIX, "-").concat(rowVariant(row, rowDisplayIndex))), children: row.contents.map(function (_a, index) {
+                var formattedValue = _a.formattedValue, width = _a.width;
+                return (_jsx("div", { style: getWidthStyles(width || DEFAULT_COL_WIDTH), role: "gridcell", className: classNames("rbdg-grid-cell", cellVariant &&
+                        cellVariant(row.contents[index], row, index, rowDisplayIndex) &&
+                        "".concat(CSS_PREFIX, "-").concat(cellVariant(row.contents[index], row, index, rowDisplayIndex))), "aria-colindex": index + 1, children: formattedValue }, cols[index].name));
+            }) }, row.id)); }) }));
+};
+export default GridBody;

package/grid/main/GridHeader.d.ts

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

package/grid/main/GridHeader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import getWidthStyles from "./getWidthStyles";
+import classNames from "classnames";
+import { CSS_PREFIX, DEFAULT_COL_WIDTH } from "../../common/constants";
+import { GRID_HEADER_DATA_TEST_ID } from "../constants";
+var GridHeader = function (_a) {
+    var cols = _a.cols, vertScrollable = _a.vertScrollable, rowVariant = _a.rowVariant, cellVariant = _a.cellVariant;
+    return (_jsx("div", { "data-testid": GRID_HEADER_DATA_TEST_ID, role: "rowgroup", className: classNames(vertScrollable ? ["position-sticky", "z-1", "top-0"] : []), children: _jsx("div", { role: "row", className: classNames("d-flex", "flex-row", rowVariant && "".concat(CSS_PREFIX, "-").concat(rowVariant)), "aria-rowindex": 1, children: cols.map(function (col, index) { return (_jsx("div", { className: classNames("rbdg-grid-cell", "fw-bold", cellVariant &&
+                    cellVariant(col, index) &&
+                    "".concat(CSS_PREFIX, "-").concat(cellVariant(col, index))), role: "columnheader", "aria-colindex": index + 1, style: getWidthStyles(col.width || DEFAULT_COL_WIDTH), children: col.label }, col.name)); }) }) }));
+};
+export default GridHeader;

package/grid/main/getWidthStyles.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from "react";
+declare const getWidthStyles: (width: number) => CSSProperties;
+export default getWidthStyles;

package/grid/main/getWidthStyles.js

@@ -0,0 +1,6 @@
+var getWidthStyles = function (width) { return ({
+    width: width,
+    maxWidth: width,
+    minWidth: width,
+}); };
+export default getWidthStyles;

package/grid/main/types.d.ts

@@ -0,0 +1,32 @@
+import { AugFormattedRow, CellData, ColDef, FormattedRow, MainComponentSharedProps } from "../../common";
+export type GridProps = MainComponentSharedProps & {
+    height?: GridHeightSetting;
+    width?: GridWidthSetting;
+    variant?: string;
+    stripes?: GridStripeSetting;
+    hover?: boolean;
+    borders?: GridBorderSetting;
+    borderVariant?: string;
+    small?: boolean;
+    divider?: boolean;
+    headerRowVariant?: string;
+    headerCellVariant?: (col: ColDef, colIndex: number) => string | null;
+    bodyRowVariant?: (row: FormattedRow, displayIndex: number) => string | null;
+    bodyCellVariant?: (cell: CellData, row: FormattedRow, colIndex: number, displayIndex: number) => string | null;
+};
+export interface GridHeaderProps {
+    cols: GridProps["cols"];
+    vertScrollable: boolean;
+    rowVariant?: GridProps["headerRowVariant"];
+    cellVariant?: GridProps["headerCellVariant"];
+}
+export type GridBodyProps = {
+    augFormattedRows: AugFormattedRow[];
+    cols: GridProps["cols"];
+    rowVariant?: GridProps["bodyRowVariant"];
+    cellVariant?: GridProps["bodyCellVariant"];
+};
+export type GridHeightSetting = number | "auto" | "parent";
+export type GridWidthSetting = number | "auto" | "parent";
+export type GridStripeSetting = "rows" | "columns" | "none";
+export type GridBorderSetting = "horizontal" | "full" | "none";

package/grid/main/types.js

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

package/grid.css

@@ -0,0 +1 @@
+.rbdg-grid>div,.rbdg-grid>div>div,.rbdg-grid>div>div>div{border-color:inherit;border-style:solid;border-width:0}.rbdg-grid{--rbdg-grid-color: var(--bs-emphasis-color);--rbdg-grid-bg: var(--bs-body-bg);--rbdg-grid-border-color: var(--bs-border-color);--rbdg-grid-accent-bg: transparent;--rbdg-grid-striped-color: var(--bs-emphasis-color);--rbdg-grid-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);--rbdg-grid-active-color: var(--bs-emphasis-color);--rbdg-grid-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);--rbdg-grid-hover-color: var(--bs-emphasis-color);--rbdg-grid-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);border-color:var(--rbdg-grid-border-color)}.rbdg-grid>div{width:min-content}.rbdg-grid>div>div>div{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:.5rem .5rem;color:var(--rbdg-grid-color-state, var(--rbdg-grid-color-type, var(--rbdg-grid-color)));background-color:var(--rbdg-grid-bg);border-bottom-width:var(--bs-border-width);box-shadow:inset 0 0 0 9999px var(--rbdg-grid-bg-state, var(--rbdg-grid-bg-type, var(--rbdg-grid-accent-bg)))}.rbdg-grid>div:first-child>div>div{border-bottom-width:var(--rbdg-grid-divider-border-width, var(--rbdg-grid-divider-borderless-width, var(--bs-border-width)));border-bottom-style:var(--rbdg-grid-divider-border-style, inherit);border-bottom-color:var(--rbdg-grid-divider-border-color, inherit)}.rbdg-grid-group-divider{--rbdg-grid-divider-border-width: calc(var(--bs-border-width) * 2);--rbdg-grid-divider-border-style: solid;--rbdg-grid-divider-border-color: currentcolor}.rbdg-grid-sm>div>div>div{padding:.25rem .25rem}.rbdg-grid-bordered{border-width:var(--bs-border-width);border-style:solid}.rbdg-grid-bordered>div>div>div:not(:last-child){border-width:0 var(--bs-border-width) 0 0}.rbdg-grid-bordered>div>div>div:last-child{border-width:0}.rbdg-grid-bordered>div:first-child>div{border-top-width:0;border-right-width:0;border-left-width:0;border-bottom-width:var(--rbdg-grid-divider-border-width, var(--rbdg-grid-divider-borderless-width, var(--bs-border-width)));border-bottom-style:var(--rbdg-grid-divider-border-style, inherit);border-bottom-color:var(--rbdg-grid-divider-border-color, inherit)}.rbdg-grid-bordered>div:last-child>div:not(:last-child){border-width:0 0 var(--bs-border-width) 0}.rbdg-grid-borderless{--rbdg-grid-divider-borderless-width: 0}.rbdg-grid-borderless>div>div>div{border-bottom-width:0}.rbdg-grid-borderless>:not(:first-child){border-top-width:0}.rbdg-grid-striped>div:nth-of-type(2)>div:nth-of-type(odd)>div{--rbdg-grid-color-type: var(--rbdg-grid-striped-color);--rbdg-grid-bg-type: var(--rbdg-grid-striped-bg)}.rbdg-grid-striped-columns>div>div>:nth-child(even){--rbdg-grid-color-type: var(--rbdg-grid-striped-color);--rbdg-grid-bg-type: var(--rbdg-grid-striped-bg)}.rbdg-grid-active{--rbdg-grid-color-state: var(--bs-grid-active-color);--rbdg-grid-bg-state: var(--rbdg-grid-active-bg)}.rbdg-grid-hover>div:nth-of-type(2)>div:hover>div{--rbdg-grid-color-state: var(--rbdg-grid-hover-color);--rbdg-grid-bg-state: var(--rbdg-grid-hover-bg)}.rbdg-grid-primary{--rbdg-grid-color: #000;--rbdg-grid-bg: rgb(206.6, 226, 254.6);--rbdg-grid-border-color: rgb(165.28, 180.8, 203.68);--rbdg-grid-striped-bg: rgb(196.27, 214.7, 241.87);--rbdg-grid-striped-color: #000;--rbdg-grid-active-bg: rgb(185.94, 203.4, 229.14);--rbdg-grid-active-color: #000;--rbdg-grid-hover-bg: rgb(191.105, 209.05, 235.505);--rbdg-grid-hover-color: #000;color:var(--rbdg-grid-color);border-color:var(--rbdg-grid-border-color)}.rbdg-grid-secondary{--rbdg-grid-color: #000;--rbdg-grid-bg: rgb(225.6, 227.4, 229);--rbdg-grid-border-color: rgb(180.48, 181.92, 183.2);--rbdg-grid-striped-bg: rgb(214.32, 216.03, 217.55);--rbdg-grid-striped-color: #000;--rbdg-grid-active-bg: rgb(203.04, 204.66, 206.1);--rbdg-grid-active-color: #000;--rbdg-grid-hover-bg: rgb(208.68, 210.345, 211.825);--rbdg-grid-hover-color: #000;color:var(--rbdg-grid-color);border-color:var(--rbdg-grid-border-color)}.rbdg-grid-success{--rbdg-grid-color: #000;--rbdg-grid-bg: rgb(209, 231, 220.8);--rbdg-grid-border-color: rgb(167.2, 184.8, 176.64);--rbdg-grid-striped-bg: rgb(198.55, 219.45, 209.76);--rbdg-grid-striped-color: #000;--rbdg-grid-active-bg: rgb(188.1, 207.9, 198.72);--rbdg-grid-active-color: #000;--rbdg-grid-hover-bg: rgb(193.325, 213.675, 204.24);--rbdg-grid-hover-color: #000;color:var(--rbdg-grid-color);border-color:var(--rbdg-grid-border-color)}.rbdg-grid-info{--rbdg-grid-color: #000;--rbdg-grid-bg: rgb(206.6, 244.4, 252);--rbdg-grid-border-color: rgb(165.28, 195.52, 201.6);--rbdg-grid-striped-bg: rgb(196.27, 232.18, 239.4);--rbdg-grid-striped-color: #000;--rbdg-grid-active-bg: rgb(185.94, 219.96, 226.8);--rbdg-grid-active-color: #000;--rbdg-grid-hover-bg: rgb(191.105, 226.07, 233.1);--rbdg-grid-hover-color: #000;color:var(--rbdg-grid-color);border-color:var(--rbdg-grid-border-color)}.rbdg-grid-warning{--rbdg-grid-color: #000;--rbdg-grid-bg: rgb(255, 242.6, 205.4);--rbdg-grid-border-color: rgb(204, 194.08, 164.32);--rbdg-grid-striped-bg: rgb(242.25, 230.47, 195.13);--rbdg-grid-striped-color: #000;--rbdg-grid-active-bg: rgb(229.5, 218.34, 184.86);--rbdg-grid-active-color: #000;--rbdg-grid-hover-bg: rgb(235.875, 224.405, 189.995);--rbdg-grid-hover-color: #000;color:var(--rbdg-grid-color);border-color:var(--rbdg-grid-border-color)}.rbdg-grid-danger{--rbdg-grid-color: #000;--rbdg-grid-bg: rgb(248, 214.6, 217.8);--rbdg-grid-border-color: rgb(198.4, 171.68, 174.24);--rbdg-grid-striped-bg: rgb(235.6, 203.87, 206.91);--rbdg-grid-striped-color: #000;--rbdg-grid-active-bg: rgb(223.2, 193.14, 196.02);--rbdg-grid-active-color: #000;--rbdg-grid-hover-bg: rgb(229.4, 198.505, 201.465);--rbdg-grid-hover-color: #000;color:var(--rbdg-grid-color);border-color:var(--rbdg-grid-border-color)}.rbdg-grid-light{--rbdg-grid-color: #000;--rbdg-grid-bg: #f8f9fa;--rbdg-grid-border-color: rgb(198.4, 199.2, 200);--rbdg-grid-striped-bg: rgb(235.6, 236.55, 237.5);--rbdg-grid-striped-color: #000;--rbdg-grid-active-bg: rgb(223.2, 224.1, 225);--rbdg-grid-active-color: #000;--rbdg-grid-hover-bg: rgb(229.4, 230.325, 231.25);--rbdg-grid-hover-color: #000;color:var(--rbdg-grid-color);border-color:var(--rbdg-grid-border-color)}.rbdg-grid-dark{--rbdg-grid-color: #fff;--rbdg-grid-bg: #212529;--rbdg-grid-border-color: rgb(77.4, 80.6, 83.8);--rbdg-grid-striped-bg: rgb(44.1, 47.9, 51.7);--rbdg-grid-striped-color: #fff;--rbdg-grid-active-bg: rgb(55.2, 58.8, 62.4);--rbdg-grid-active-color: #fff;--rbdg-grid-hover-bg: rgb(49.65, 53.35, 57.05);--rbdg-grid-hover-color: #fff;color:var(--rbdg-grid-color);border-color:var(--rbdg-grid-border-color)}

package/grid.scss

@@ -0,0 +1,231 @@
+@use "sass:color";
+@use "sass:math";
+
+$rbdg-prefix: "rbdg-";
+
+.rbdg-grid > div,
+.rbdg-grid > div > div,
+.rbdg-grid > div > div > div {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
+// While these rules seem to work, the way that the three border modes, default; bordered; and borderless override each
+// other is quite hard to understand.
+// Consider refactoring so that each type mode, including default, has a separate class that contains rules for just
+// that mode.
+// The way that each border mode that interacts with dividers with quite complicated. Each combination should be tested
+// separately.
+
+.rbdg-grid {
+  // In Bootstrap's _tables.scss file, there are variable declarations here to reset some variables to the initial
+  // value to facilitate nesting of tables styled with Bootstrap's "table" CSS class. Unlike _tables.scss, there is no
+  // reset in this file because the RBDG flex grid is not meant to be nested.
+
+  --#{$rbdg-prefix}grid-color: #{$table-color};
+  --#{$rbdg-prefix}grid-bg: #{$table-bg};
+  --#{$rbdg-prefix}grid-border-color: #{$table-border-color};
+  --#{$rbdg-prefix}grid-accent-bg: #{$table-accent-bg};
+  --#{$rbdg-prefix}grid-striped-color: #{$table-striped-color};
+  --#{$rbdg-prefix}grid-striped-bg: #{$table-striped-bg};
+  --#{$rbdg-prefix}grid-active-color: #{$table-active-color};
+  --#{$rbdg-prefix}grid-active-bg: #{$table-active-bg};
+  --#{$rbdg-prefix}grid-hover-color: #{$table-hover-color};
+  --#{$rbdg-prefix}grid-hover-bg: #{$table-hover-bg};
+
+  border-color: var(--#{$rbdg-prefix}grid-border-color);
+
+  > div {
+    width: min-content;
+
+    > div > div {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      padding: $table-cell-padding-y $table-cell-padding-x;
+      color: var(
+        --#{$rbdg-prefix}grid-color-state,
+        var(--#{$rbdg-prefix}grid-color-type, var(--#{$rbdg-prefix}grid-color))
+      );
+      background-color: var(--#{$rbdg-prefix}grid-bg);
+      border-bottom-width: $table-border-width;
+      box-shadow: inset 0 0 0 9999px
+        var(
+          --#{$rbdg-prefix}grid-bg-state,
+          var(
+            --#{$rbdg-prefix}grid-bg-type,
+            var(--#{$rbdg-prefix}grid-accent-bg)
+          )
+        );
+    }
+  }
+
+  // These properties are overridden by the "> div > div > div:not(:last-child)" properties when rbdg-grid-bordered is
+  // applied.
+  > div:first-child > div > div {
+    border-bottom-width: var(
+      --#{$rbdg-prefix}grid-divider-border-width,
+      var(--#{$rbdg-prefix}grid-divider-borderless-width, $table-border-width)
+    );
+    border-bottom-style: var(
+      --#{$rbdg-prefix}grid-divider-border-style,
+      inherit
+    );
+    border-bottom-color: var(
+      --#{$rbdg-prefix}grid-divider-border-color,
+      inherit
+    );
+  }
+}
+
+.rbdg-grid-group-divider {
+  --#{$rbdg-prefix}grid-divider-border-width: calc(#{$table-border-width} * 2);
+  --#{$rbdg-prefix}grid-divider-border-style: solid;
+  --#{$rbdg-prefix}grid-divider-border-color: #{$table-group-separator-color};
+}
+
+.rbdg-grid-sm {
+  > div > div > div {
+    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;
+  }
+}
+
+.rbdg-grid-bordered {
+  border-width: $table-border-width;
+  border-style: solid;
+
+  > div > div {
+    > div:not(:last-child) {
+      border-width: 0 $table-border-width 0 0;
+    }
+
+    > div:last-child {
+      border-width: 0;
+    }
+  }
+
+  > div:first-child > div {
+    border-top-width: 0;
+    border-right-width: 0;
+    border-left-width: 0;
+    border-bottom-width: var(
+      --#{$rbdg-prefix}grid-divider-border-width,
+      var(--#{$rbdg-prefix}grid-divider-borderless-width, $table-border-width)
+    );
+    border-bottom-style: var(
+      --#{$rbdg-prefix}grid-divider-border-style,
+      inherit
+    );
+    border-bottom-color: var(
+      --#{$rbdg-prefix}grid-divider-border-color,
+      inherit
+    );
+  }
+
+  > div:last-child {
+    > div:not(:last-child) {
+      border-width: 0 0 $table-border-width 0;
+    }
+  }
+}
+
+.rbdg-grid-borderless {
+  --#{$rbdg-prefix}grid-divider-borderless-width: 0;
+
+  > div > div > div {
+    border-bottom-width: 0;
+  }
+
+  > :not(:first-child) {
+    border-top-width: 0;
+  }
+}
+
+.rbdg-grid-striped {
+  > div:nth-of-type(2) > div:nth-of-type(#{$table-striped-order}) > div {
+    --#{$rbdg-prefix}grid-color-type: var(--#{$rbdg-prefix}grid-striped-color);
+    --#{$rbdg-prefix}grid-bg-type: var(--#{$rbdg-prefix}grid-striped-bg);
+  }
+}
+
+.rbdg-grid-striped-columns {
+  > div > div > :nth-child(#{$table-striped-columns-order}) {
+    --#{$rbdg-prefix}grid-color-type: var(--#{$rbdg-prefix}grid-striped-color);
+    --#{$rbdg-prefix}grid-bg-type: var(--#{$rbdg-prefix}grid-striped-bg);
+  }
+}
+
+.rbdg-grid-active {
+  --#{$rbdg-prefix}grid-color-state: var(--#{$prefix}grid-active-color);
+  --#{$rbdg-prefix}grid-bg-state: var(--#{$rbdg-prefix}grid-active-bg);
+}
+
+.rbdg-grid-hover {
+  > div:nth-of-type(2) > div:hover > div {
+    --#{$rbdg-prefix}grid-color-state: var(--#{$rbdg-prefix}grid-hover-color);
+    --#{$rbdg-prefix}grid-bg-state: var(--#{$rbdg-prefix}grid-hover-bg);
+  }
+}
+
+@mixin rbdg-grid-variant($state, $background) {
+  .rbdg-grid-#{$state} {
+    $color: color-contrast(opaque($body-bg, $background));
+    $hover-bg: color.mix(
+      $color,
+      $background,
+      math.percentage($table-hover-bg-factor)
+    );
+    $striped-bg: color.mix(
+      $color,
+      $background,
+      math.percentage($table-striped-bg-factor)
+    );
+    $active-bg: color.mix(
+      $color,
+      $background,
+      math.percentage($table-active-bg-factor)
+    );
+    $table-border-color: color.mix(
+      $color,
+      $background,
+      math.percentage($table-border-factor)
+    );
+
+    --#{$rbdg-prefix}grid-color: #{$color};
+    --#{$rbdg-prefix}grid-bg: #{$background};
+    --#{$rbdg-prefix}grid-border-color: #{$table-border-color};
+    --#{$rbdg-prefix}grid-striped-bg: #{$striped-bg};
+    --#{$rbdg-prefix}grid-striped-color: #{color-contrast($striped-bg)};
+    --#{$rbdg-prefix}grid-active-bg: #{$active-bg};
+    --#{$rbdg-prefix}grid-active-color: #{color-contrast($active-bg)};
+    --#{$rbdg-prefix}grid-hover-bg: #{$hover-bg};
+    --#{$rbdg-prefix}grid-hover-color: #{color-contrast($hover-bg)};
+
+    color: var(--#{$rbdg-prefix}grid-color);
+    border-color: var(--#{$rbdg-prefix}grid-border-color);
+  }
+}
+
+@each $color, $value in $table-variants {
+  @include rbdg-grid-variant($color, $value);
+}
+
+// Note about Responsive Tables
+//
+// The Bootstrap _tables.scss file contains a series of classes to apply responsive tables at various breakpoints.
+// There is no such equivalent for RBDG flex grid for the following reason.
+//
+// The RBDG flex grid is a div of type "block," so the concept of "responsive" scrollable breakpoints doesn't apply.
+// It appears that for a table, even if the width is to 100%, the browser sometimes disobeys this setting causing
+// the width to be more than the parent, hence the need for responsive tables. Divs do not appear to have this problem.
+//
+// The RBDG flex grid provides other options to achieving a horizontally scrollable grid. They are as follows.
+//
+// When using the default or "auto" setting for the RBDG grid's "width," the intrinsic width of the grid columns is
+// used. In such circumstances, if one wants to make the grid scrollable horizontally, they can enclose the grid in a
+// horizontally-scrollable div.
+//
+// When the grid's width is to set to "parent", the grid takes on the width of the parent (width 100% CSS value) just
+// like the Bootstrap table does. In this case, the grid div itself is horizontally scrollable. In contrast, for
+// responsive Bootstrap tables, it is a div that encloses the table element that is scrollable.

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": "2.7.0",
+  "version": "4.0.0",
   "license": "MIT",
   "author": "Brook Li",
   "homepage": "https://react-bootstrap-data-grid.vercel.app/",

package/table/InternalTable.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from "react";
+import { BaseTableProps } from "./types";
+import { UseCombinedPipelineHook } from "../common/pipeline/useCombinedPipeline";
+import { UseGridSelectionFnsHook } from "../common/pipeline/useGridSelectionFns";
+export interface InternalGridProps {
+    gridProps: BaseTableProps;
+    hooks: {
+        selectFns: UseGridSelectionFnsHook;
+        pipelineOutput: UseCombinedPipelineHook;
+    };
+    slots: {
+        colHeaderCells: ReactNode;
+        bodyRows: ReactNode;
+        prefixHeader?: ReactNode;
+    };
+    classes?: {
+        headerRow?: string[];
+    };
+}
+declare const InternalTable: FC<InternalGridProps>;
+export default InternalTable;