@absreim/react-bootstrap-data-grid-pro 3.0.0 → 4.0.0

package/common/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_COL_WIDTH = 100;
+export declare const CSS_PREFIX = "rbdg-grid";

package/common/constants.js

@@ -0,0 +1,2 @@
+export const DEFAULT_COL_WIDTH = 100;
+export const CSS_PREFIX = "rbdg-grid";

package/common/editing/types.d.ts

@@ -0,0 +1,7 @@
+import { RowData, RowId } from "../types";
+export type UpdateCallbackGenerator = (id: RowId) => (rowData: RowData) => void;
+export interface EditModel {
+    getUpdateCallback: UpdateCallbackGenerator;
+    getDeleteCallback?: (id: RowId) => () => void;
+    editColWidth?: number;
+}

package/{grid → common}/filtering/FilterOptionsTable.d.ts

@@ -1,9 +1,9 @@
 import { FC } from "react";
-import { EditableTableFilterState, TableFilterState } from "./types";
-import { FilterInputTableStyleModel } from "../styling/types";
+import { EditableFilterState, FilterState } from "./types";
+import { FilterInputTableStyleModel } from "../../table/styling/types";
 export interface FilterOptionsTableProps {
-    filterState: TableFilterState;
-    setFilterState: (filterState: EditableTableFilterState) => void;
+    filterState: FilterState;
+    setFilterState: (filterState: EditableFilterState) => void;
     closeFormCallback: () => void;
     caption?: string;
     styleModel?: FilterInputTableStyleModel;

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

@@ -1,7 +1,7 @@
-export type TableFilterState = Record<string, ColFilterState>;
-export type EditableTableFilterState = Record<string, FilterState>;
+export type FilterState = Record<string, ColFilterState>;
+export type EditableFilterState = Record<string, EditableColFilterState>;
 export interface ColFilterState {
-    editableState: FilterState;
+    editableState: EditableColFilterState;
     label: string;
 }
 export interface AbstractFilterState {
@@ -44,11 +44,11 @@ export interface BetweenDatesFilterState extends AbstractDateFilterState {
     endDate: Date | null;
 }
 export type DateFilterState = StartDateFilterState | EndDateFilterState | BetweenDatesFilterState;
-export type FilterState = StringFilterState | NumberFilterState | DateFilterState;
+export type EditableColFilterState = StringFilterState | NumberFilterState | DateFilterState;
 export interface ControlledFilterModel {
     type?: "controlled";
-    tableFilterState: EditableTableFilterState;
-    setTableFilterState: (state: EditableTableFilterState) => void;
+    tableFilterState: EditableFilterState;
+    setTableFilterState: (state: EditableFilterState) => void;
     filterTableCaption?: string;
 }
 export type UncontrolledFilterModel = Partial<Pick<ControlledFilterModel, "tableFilterState" | "filterTableCaption">> & {

package/common/filtering/useFilterFormState.d.ts

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

package/common/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./editing/types";
+export * from "./export/types";
+export * from "./filtering/types";
+export * from "./pagination/types";
+export * from "./pipeline/types";
+export * from "./sorting/types";
+export * from "./styling/types";
+export * from "./toolbar/types";
+export * from "./selection/types";
+export * from "./types";
+export * from "./util";

package/common/index.js

@@ -0,0 +1,11 @@
+export * from "./editing/types";
+export * from "./export/types";
+export * from "./filtering/types";
+export * from "./pagination/types";
+export * from "./pipeline/types";
+export * from "./sorting/types";
+export * from "./styling/types";
+export * from "./toolbar/types";
+export * from "./selection/types";
+export * from "./types";
+export * from "./util";

package/{grid → common}/pagination/PageSelector.d.ts

@@ -1,5 +1,5 @@
-import { JustifyContentSetting, Size } from "../types";
 import { FC } from "react";
+import { JustifyContentSetting, Size } from "../";
 export interface PageSelectorProps {
     numPages: number;
     pageNum: number;

package/{grid → common}/pagination/PageSizeSelector.d.ts

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Size } from "../types";
+import { Size } from "../";
 export interface PageSizeSelectorProps {
     componentSize: Size;
     pageSizeOptions: number[];

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

@@ -1,4 +1,5 @@
-import { JustifyContentSetting, Size } from "../types";
+export type JustifyContentSetting = "start" | "end" | "center" | "between" | "around" | "evenly";
+export type Size = "small" | "medium" | "large";
 export interface PaginationOptions {
     pageSizeOptions?: number[];
     maxPageButtons?: number;

package/{grid → common}/pipeline/useAugFormattedRows.d.ts

@@ -1,4 +1,4 @@
-import { AugFormattedRow, FormattedRow } from "../types";
 import { ColNameToWidth } from "./types";
+import { AugFormattedRow, FormattedRow } from "../";
 declare const useAugFormattedRows: (colNameToWidth: ColNameToWidth, rows: FormattedRow[]) => AugFormattedRow[];
 export default useAugFormattedRows;

package/common/pipeline/useColNameToWidth.d.ts

@@ -0,0 +1,3 @@
+import { ColDef, ColNameToWidth } from "../";
+declare const useColNameToWidth: (cols: ColDef[]) => ColNameToWidth;
+export default useColNameToWidth;

package/common/pipeline/useColNameToWidth.js

@@ -0,0 +1,7 @@
+import { useMemo } from "react";
+const useColNameToWidth = (cols) => useMemo(() => {
+    const map = {};
+    cols.forEach(({ name, width }) => (map[name] = width));
+    return map;
+}, [cols]);
+export default useColNameToWidth;

package/{grid → common}/pipeline/useCombinedPipeline/index.d.ts

@@ -1,14 +1,14 @@
 import { SortedRowsOutput } from "./useSortedRows";
 import { CurrentPageRowsOutput } from "./useCurrentPageRows";
-import { ColDefBase, FormattedRow, GridProps, RowDef } from "../../types";
-import { NormalizedTableFilterModel, TableFilterState } from "../../filtering/types";
-export type CombinedPipelineParams = Pick<GridProps, "rows" | "filterModel" | "sortModel" | "pagination" | "selectModel"> & {
+import { NormalizedTableFilterModel, FilterState } from "../../";
+import { ColDefBase, FormattedRow, MainComponentSharedProps, RowDef } from "../../types";
+export type CombinedPipelineParams = Pick<MainComponentSharedProps, "rows" | "filterModel" | "sortModel" | "pagination" | "selectModel"> & {
     cols: ColDefBase[];
 };
 export interface UseCombinedPipelineHook {
     normalizedTableFilterModel: NormalizedTableFilterModel | null;
     filteredRows: RowDef[];
-    filterState: TableFilterState | null;
+    filterState: FilterState | null;
     sortedRowsOutput: SortedRowsOutput;
     currentPageRowsOutput: CurrentPageRowsOutput;
     showSelectCol: boolean;

package/{grid → common}/pipeline/useCombinedPipeline/useCurrentPageRows.d.ts

@@ -1,5 +1,5 @@
-import { AugRowDef, PostPaginationRowDef } from "../../types";
 import { NormalizedPaginationModel, PaginationModel } from "../../pagination/types";
+import { AugRowDef, PostPaginationRowDef } from "../../";
 export interface CurrentPageRowsOutput {
     paginatedRows: PostPaginationRowDef[];
     normalizedModel: NormalizedPaginationModel | null;

package/{grid → common}/pipeline/useCombinedPipeline/useDisplayRows.d.ts

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

package/{grid → common}/pipeline/useCombinedPipeline/useDisplayRows.js

@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { dateToDatetimeInputStr, dateToInputStr } from "../../util/datetime";
+import { dateToDatetimeInputStr, dateToInputStr } from "../../util";
 const getFormattedValue = (value, formatter, typeString) => {
     if (formatter) {
         return formatter(value);
@@ -31,7 +31,6 @@ const useDisplayRows = (currentPageRows, cols, ariaColIndexOffset) => useMemo(()
         const displayRow = [];
         Object.keys(row.data).forEach((name) => {
             if (!nameToIndex.has(name)) {
-                console.error(`Warning: row data contains a property named "${name}", but it was not found among the column definitions.`);
                 return;
             }
             const index = nameToIndex.get(name);

package/common/pipeline/useCombinedPipeline/useFilter.d.ts

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

package/common/pipeline/useCombinedPipeline/useFilterStateFromEditable.d.ts

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

package/{grid → common}/pipeline/useCombinedPipeline/useSortedRows.d.ts

@@ -1,10 +1,10 @@
+import { SortColDef, SortModel } from "../../sorting/types";
 import { AugRowDef, ColDefBase } from "../../types";
-import { SortColDef, TableSortModel } from "../../sorting/types";
 export interface SortedRowsOutput {
     sortedRows: AugRowDef[];
     sortingEnabled: boolean;
     sortColDef: SortColDef | null | undefined;
     setSortColDef: ((sortColDef: SortColDef | null) => void) | undefined;
 }
-declare const useSortedRows: (rows: AugRowDef[], cols: ColDefBase[], sortModel: TableSortModel | undefined) => SortedRowsOutput;
+declare const useSortedRows: (rows: AugRowDef[], cols: ColDefBase[], sortModel: SortModel | undefined) => SortedRowsOutput;
 export default useSortedRows;

package/{grid → common}/pipeline/useGridSelectionFns.d.ts

@@ -1,7 +1,7 @@
-import { RowDef, RowId } from "../types";
 import { MouseEventHandler } from "react";
 import { SelectionInfo, SelectModel } from "../selection/types";
-import { SelectionInputModel } from "../selection/SelectionInput";
+import { SelectionInputModel } from "../../table/selection/SelectionInput";
+import { RowDef, RowId } from "../types";
 export interface UseGridSelectionFnsHook {
     selectedSet: Set<RowId>;
     rowsAreSelectable: boolean | undefined;

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

@@ -7,13 +7,13 @@ export interface ColSortModel {
     sortOrder: SortOrder | null;
     setSortOrder: (order: SortOrder | null) => void;
 }
-export interface ControlledTableSortModel {
+export interface ControlledSortModel {
     type?: "controlled";
     sortColDef: SortColDef | null;
     setSortColDef: (sortColDef: SortColDef | null) => void;
 }
-export interface UncontrolledTableSortModel {
+export interface UncontrolledSortModel {
     type: "uncontrolled";
     initialSortColDef: SortColDef | null;
 }
-export type TableSortModel = ControlledTableSortModel | UncontrolledTableSortModel;
+export type SortModel = ControlledSortModel | UncontrolledSortModel;

package/{grid/main/ColHeaderCell → common/sorting}/useSortHeaderStates.d.ts

@@ -1,6 +1,6 @@
-import { UseControlledHoverHook } from "../../util/useControlledHover";
+import { UseControlledHoverHook } from "../util/useControlledHover";
 import { ReactNode } from "react";
-import { ColSortModel } from "../../sorting/types";
+import { ColSortModel } from "./types";
 export type UseSortHeaderStatesHook = UseControlledHoverHook<HTMLTableCellElement> & {
     handleClick: () => void;
     sortSymbol: ReactNode;

package/{grid/main/ColHeaderCell → common/sorting}/useSortHeaderStates.js

@@ -1,8 +1,8 @@
-import useControlledHover from "../../util/useControlledHover";
+import useControlledHover from "../util/useControlledHover";
 import { useMemo } from "react";
-import upArrow from "../../sorting/upArrow";
-import arrowPlaceholder from "../../sorting/arrowPlaceholder";
-import downArrow from "../../sorting/downArrow";
+import upArrow from "./upArrow";
+import arrowPlaceholder from "./arrowPlaceholder";
+import downArrow from "./downArrow";
 const useSortHeaderStates = (sortModel) => {
     const { isHovering, setIsHovering, handleMouseOver, handleMouseOut } = useControlledHover();
     const handleClick = () => {

package/common/styling/types.d.ts

@@ -0,0 +1,21 @@
+import { AdditionalComponentsStyleModel, FilterInputTableStyleModel, TableStyleModel } from "../../table";
+export interface ToolbarStyleModel {
+    activeButton?: string[];
+    inactiveButton?: string[];
+    toolbar?: string[];
+    interfaceContainer?: string[];
+}
+export interface ExportFormStyleModel {
+    legend?: string[];
+    radioContainer?: string[];
+    radioInput?: string[];
+    radioLabel?: string[];
+    submitButton?: string[];
+}
+export interface StyleModel {
+    mainTableStyleModel?: TableStyleModel;
+    filterInputTableStyleModel?: FilterInputTableStyleModel;
+    additionalComponentsStyleModel?: AdditionalComponentsStyleModel;
+    toolbarStyleModel?: ToolbarStyleModel;
+    exportFormStyleModel?: ExportFormStyleModel;
+}

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

@@ -1,6 +1,6 @@
-import { CellData, EditModel } from "./editing/types";
+import { EditModel } from "./editing/types";
 import { PaginationModel } from "./pagination/types";
-import { ColSortModel, TableSortModel } from "./sorting/types";
+import { SortModel } from "./sorting/types";
 import { FilterModel } from "./filtering/types";
 import { SelectModel } from "./selection/types";
 import { StyleModel } from "./styling/types";
@@ -23,44 +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<Data> & {
-    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?: PaginationModel;
-    sortModel?: TableSortModel;
+    sortModel?: SortModel;
     filterModel?: FilterModel;
     selectModel?: SelectModel;
     editModel?: EditModel;
-    caption?: string;
     styleModel?: StyleModel;
-    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[] | null;
+    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/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 const GRID_BODY_DATA_TEST_ID = "rbdg-body-rowgroup";
+export const GRID_HEADER_DATA_TEST_ID = "rbdg-header-rowgroup";

package/grid/index.d.ts

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

package/grid/index.js

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

package/grid/{Grid.d.ts → 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,59 @@
+"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";
+const Grid = ({ rows, cols, filterModel, sortModel, pagination, selectModel, width, height, variant, stripes, hover, borders, small, divider, borderVariant, headerCellVariant, headerRowVariant, bodyCellVariant, bodyRowVariant, }) => {
+    const { displayRows, filteredRows } = useCombinedPipeline({
+        rows,
+        cols,
+        filterModel,
+        sortModel,
+        pagination,
+        selectModel,
+    });
+    const colNameToWidth = useColNameToWidth(cols);
+    const augFormattedRows = useAugFormattedRows(colNameToWidth, displayRows);
+    const gridStyle = useMemo(() => {
+        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]);
+    const 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 && `${CSS_PREFIX}-${variant}`, borderVariant && `border-${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,13 @@
+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";
+const GridBody = ({ augFormattedRows, cols, rowVariant, cellVariant, }) => {
+    return (_jsx("div", { role: "rowgroup", "data-testid": GRID_BODY_DATA_TEST_ID, children: augFormattedRows.map((row, rowDisplayIndex) => (_jsx("div", { role: "row", "aria-rowindex": row.prePaginationIndex + 2, className: classNames("d-flex", "flex-row", rowVariant &&
+                rowVariant(row, rowDisplayIndex) &&
+                `${CSS_PREFIX}-${rowVariant(row, rowDisplayIndex)}`), children: row.contents.map(({ formattedValue, width }, index) => (_jsx("div", { style: getWidthStyles(width || DEFAULT_COL_WIDTH), role: "gridcell", className: classNames("rbdg-grid-cell", cellVariant &&
+                    cellVariant(row.contents[index], row, index, rowDisplayIndex) &&
+                    `${CSS_PREFIX}-${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,11 @@
+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";
+const GridHeader = ({ cols, vertScrollable, rowVariant, 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 && `${CSS_PREFIX}-${rowVariant}`), "aria-rowindex": 1, children: cols.map((col, index) => (_jsx("div", { className: classNames("rbdg-grid-cell", "fw-bold", cellVariant &&
+                    cellVariant(col, index) &&
+                    `${CSS_PREFIX}-${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 @@
+const getWidthStyles = (width) => ({
+    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.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)}