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

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

package/{InternalGrid.d.ts → table/InternalTable.d.ts}

@@ -1,9 +1,9 @@
 import { FC, ReactNode } from "react";
-import { BaseGridProps } from "./types";
-import { UseCombinedPipelineHook } from "./pipeline/useCombinedPipeline";
-import { UseGridSelectionFnsHook } from "./pipeline/useGridSelectionFns";
+import { BaseTableProps } from "./types";
+import { UseCombinedPipelineHook } from "../common/pipeline/useCombinedPipeline";
+import { UseGridSelectionFnsHook } from "../common/pipeline/useGridSelectionFns";
 export interface InternalGridProps {
-    gridProps: BaseGridProps;
+    gridProps: BaseTableProps;
     hooks: {
         selectFns: UseGridSelectionFnsHook;
         pipelineOutput: UseCombinedPipelineHook;
@@ -17,5 +17,5 @@ export interface InternalGridProps {
         headerRow?: string[];
     };
 }
-declare const InternalGrid: FC<InternalGridProps>;
-export default InternalGrid;
+declare const InternalTable: FC<InternalGridProps>;
+export default InternalTable;

package/{InternalGrid.js → table/InternalTable.js}

@@ -2,13 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import SelectAllHeaderCell from "./selection/SelectAllHeaderCell";
-import Pagination from "./pagination/Pagination";
+import Pagination from "../common/pagination/Pagination";
 import classNames from "classnames";
-import useInterfaces from "./toolbar/useInterfaces";
-import ToolbarContainer from "./toolbar/ToolbarContainer";
-import useExportFn from "./export/useExportFn";
-import getWidthStyle from "./util/getWidthStyle";
-var InternalGrid = function (_a) {
+import useInterfaces from "../common/toolbar/useInterfaces";
+import ToolbarContainer from "../common/toolbar/ToolbarContainer";
+import useExportFn from "../common/export/useExportFn";
+import getWidthStyle from "../common/util/getWidthStyle";
+var InternalTable = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var _o = _a.gridProps, rows = _o.rows, cols = _o.cols, pagination = _o.pagination, filterModel = _o.filterModel, selectModel = _o.selectModel, editModel = _o.editModel, caption = _o.caption, styleModel = _o.styleModel, displayMode = _o.displayMode, allowExport = _o.allowExport, _p = _a.hooks, pipelineOutput = _p.pipelineOutput, selectFns = _p.selectFns, _q = _a.slots, colHeaderCells = _q.colHeaderCells, bodyRows = _q.bodyRows, prefixHeader = _q.prefixHeader, classes = _a.classes;
     var normalizedTableFilterModel = pipelineOutput.normalizedTableFilterModel, filteredRows = pipelineOutput.filteredRows, filterState = pipelineOutput.filterState, sortedRows = pipelineOutput.sortedRowsOutput.sortedRows, _r = pipelineOutput.currentPageRowsOutput, paginatedRows = _r.paginatedRows, normalizedModel = _r.normalizedModel, showSelectCol = pipelineOutput.showSelectCol;
@@ -56,4 +56,4 @@ var InternalGrid = function (_a) {
     return (_jsxs("div", { "data-testid": "rbdg-top-level-div", className: classNames((_j = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _j === void 0 ? void 0 : _j.topLevelDiv), children: [showToolbar && (_jsx(ToolbarContainer, { interfaceGen: toolbarInterfaces, styleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.toolbarStyleModel })), _jsxs("div", { "data-testid": "rbdg-table-and-pagination-div", className: classNames((_k = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _k === void 0 ? void 0 : _k.tableAndPaginationDiv), children: [_jsx("div", { "data-testid": "rbdg-table-div", className: classNames(((_l = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _l === void 0 ? void 0 : _l.tableDiv) ||
                             "table-responsive"), children: mainTable }), normalizedModel && (_jsx(Pagination, { normalizedModel: normalizedModel, prePagingNumRows: sortedRows.length, containerDivClasses: (_m = styleModel === null || styleModel === void 0 ? void 0 : styleModel.additionalComponentsStyleModel) === null || _m === void 0 ? void 0 : _m.paginationUiDiv }))] })] }));
 };
-export default InternalGrid;
+export default InternalTable;

package/table/Table.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { TableProps } from "./types";
+declare const Table: FC<TableProps>;
+export default Table;
+export type { TableProps } from "./types";

package/{Grid.js → table/Table.js}

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import InternalGrid from "./InternalGrid";
+import InternalTable from "./InternalTable";
 import ColHeaderCell from "./main/ColHeaderCell";
-import useCombinedPipeline from "./pipeline/useCombinedPipeline";
-import useGridSelectionFns from "./pipeline/useGridSelectionFns";
-import useGetInputStrSubmitCallback from "./pipeline/useGetInputStrSubmitCallback";
-import useAugFormattedRows from "./pipeline/useAugFormattedRows";
+import useCombinedPipeline from "../common/pipeline/useCombinedPipeline";
+import useGridSelectionFns from "../common/pipeline/useGridSelectionFns";
+import useGetInputStrSubmitCallback from "../common/pipeline/useGetInputStrSubmitCallback";
+import useAugFormattedRows from "../common/pipeline/useAugFormattedRows";
 import BodyRows from "./main/BodyRows";
-var Grid = function (props) {
+import useColNameToWidth from "../common/pipeline/useColNameToWidth";
+var Table = function (props) {
     var rows = props.rows, cols = props.cols, filterModel = props.filterModel, sortModel = props.sortModel, pagination = props.pagination, selectModel = props.selectModel, styleModel = props.styleModel, editModel = props.editModel;
     var combinedPipelineOutput = useCombinedPipeline({
         rows: rows,
@@ -21,14 +21,7 @@ var Grid = function (props) {
     var _a = combinedPipelineOutput.sortedRowsOutput, sortColDef = _a.sortColDef, setSortColDef = _a.setSortColDef, sortingEnabled = _a.sortingEnabled, showSelectCol = combinedPipelineOutput.showSelectCol, displayRows = combinedPipelineOutput.displayRows;
     var gridSelectionFns = useGridSelectionFns(selectModel, rows);
     var getInputStrSubmitCallback = useGetInputStrSubmitCallback(editModel, cols);
-    var colNameToWidth = useMemo(function () {
-        var map = {};
-        cols.forEach(function (_a) {
-            var name = _a.name, width = _a.width;
-            return (map[name] = width);
-        });
-        return map;
-    }, [cols]);
+    var colNameToWidth = useColNameToWidth(cols);
     var augFormattedRows = useAugFormattedRows(colNameToWidth, displayRows);
     var colHeaderCells = cols.map(function (_a, index) {
         var _b;
@@ -45,9 +38,9 @@ var Grid = function (props) {
                 styleModel.mainTableStyleModel.theadTh(index), width: width }, name));
     });
     var bodyRows = (_jsx(BodyRows, { augFormattedRows: augFormattedRows, gridSelectionFns: gridSelectionFns, selectModel: selectModel, combinedPipelineOutput: combinedPipelineOutput, editModel: editModel, getInputStrSubmitCallback: getInputStrSubmitCallback, tableStyleModel: styleModel === null || styleModel === void 0 ? void 0 : styleModel.mainTableStyleModel }));
-    return (_jsx(InternalGrid, { gridProps: props, hooks: {
+    return (_jsx(InternalTable, { gridProps: props, hooks: {
             pipelineOutput: combinedPipelineOutput,
             selectFns: gridSelectionFns,
         }, slots: { colHeaderCells: colHeaderCells, bodyRows: bodyRows } }));
 };
-export default Grid;
+export default Table;

package/{editing → table/editing}/EditableRow.d.ts

@@ -1,7 +1,6 @@
 import { CSSProperties, FC, ReactNode } from "react";
-import { RowId } from "../types";
 import React from "react";
-import { CellData } from "./types";
+import { CellData, RowId } from "../../common/types";
 export type EditableRowProps = Pick<React.ComponentProps<"tr">, "onClick" | "className" | "aria-rowindex" | "aria-selected"> & {
     ariaColIndexOffset: number;
     dataRowId: RowId;

package/{editing → table/editing}/EditableRow.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { dateToDatetimeInputStr, dateToInputStr } from "../util/datetime";
+import { dateToDatetimeInputStr, dateToInputStr, } from "../../common/util/datetime";
 import EditControlsCell from "./EditControlsCell";
 import classNames from "classnames";
-import getWidthStyle from "../util/getWidthStyle";
+import getWidthStyle from "../../common/util/getWidthStyle";
 var initValueToFormValue = function (value, type) {
     switch (type) {
         case "date":

package/table/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./styling/types";
+export * from "../common/selection/types";
+export * from "../common";
+export { default } from "./Table";

package/table/index.js

@@ -0,0 +1,5 @@
+export * from "./types";
+export * from "./styling/types";
+export * from "../common/selection/types";
+export * from "../common";
+export { default } from "./Table";

package/{main → table/main}/BodyRows.d.ts

@@ -1,11 +1,11 @@
-import { AugFormattedRow, RowId } from "../types";
 import { FC, ReactNode } from "react";
-import { UseGridSelectionFnsHook } from "../pipeline/useGridSelectionFns";
-import { UseCombinedPipelineHook } from "../pipeline/useCombinedPipeline";
-import { SelectModel } from "../selection/types";
-import { EditModel } from "../editing/types";
-import { UseGetInputStrSubmitCallbackHook } from "../pipeline/useGetInputStrSubmitCallback";
+import { UseGridSelectionFnsHook } from "../../common/pipeline/useGridSelectionFns";
+import { UseCombinedPipelineHook } from "../../common/pipeline/useCombinedPipeline";
+import { SelectModel } from "../../common/selection/types";
+import { UseGetInputStrSubmitCallbackHook } from "../../common/pipeline/useGetInputStrSubmitCallback";
 import { TableStyleModel } from "../styling/types";
+import { AugFormattedRow, FormattedRow, RowId } from "../../common/types";
+import { EditModel } from "../../common/editing/types";
 interface BodyRowsProps {
     augFormattedRows: AugFormattedRow[];
     gridSelectionFns: UseGridSelectionFnsHook;
@@ -15,7 +15,7 @@ interface BodyRowsProps {
     editModel: EditModel | undefined;
     getInputStrSubmitCallback: UseGetInputStrSubmitCallbackHook;
     additionalColIndexOffset?: number;
-    renderPrefixCells?: (augFormattedRows: AugFormattedRow) => ReactNode;
+    renderPrefixCells?: (augFormattedRows: FormattedRow) => ReactNode;
     additionalRowStyles?: (rowId: RowId, displayIndex: number) => string[];
 }
 declare const BodyRows: FC<BodyRowsProps>;

package/{main → table/main}/BodyRows.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import EditableRow from "../editing/EditableRow";
 import classNames from "classnames";
-import getWidthStyle from "../util/getWidthStyle";
+import getWidthStyle from "../../common/util/getWidthStyle";
 import SelectionInput from "../selection/SelectionInput";
 var BodyRows = function (_a) {
     var augFormattedRows = _a.augFormattedRows, _b = _a.gridSelectionFns, selectedSet = _b.selectedSet, getSelectInputModel = _b.getSelectInputModel, getSelectHandler = _b.getSelectHandler, getRowClickHandler = _b.getRowClickHandler, getAriaSelectedValue = _b.getAriaSelectedValue, tableStyleModel = _a.tableStyleModel, _c = _a.combinedPipelineOutput, showSelectCol = _c.showSelectCol, ariaColIndexOffset = _c.ariaColIndexOffset, selectModel = _a.selectModel, editModel = _a.editModel, getInputStrSubmitCallback = _a.getInputStrSubmitCallback, additionalColIndexOffset = _a.additionalColIndexOffset, renderPrefixCells = _a.renderPrefixCells, additionalRowStyles = _a.additionalRowStyles;

package/{main → table/main}/ColHeaderCell/index.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
-import getWidthStyle from "../../util/getWidthStyle";
-import useSortHeaderStates from "./useSortHeaderStates";
-import sortOrderToAriaSort from "../../sorting/sortOrderToAriaSort";
+import getWidthStyle from "../../../common/util/getWidthStyle";
+import useSortHeaderStates from "../../../common/sorting/useSortHeaderStates";
+import sortOrderToAriaSort from "../../../common/sorting/sortOrderToAriaSort";
 var ColHeaderCell = function (_a) {
     var label = _a.label, sortModel = _a.sortModel, ariaColIndex = _a.ariaColIndex, additionalClasses = _a.additionalClasses, width = _a.width;
     var _b = useSortHeaderStates(sortModel), handleClick = _b.handleClick, handleMouseOver = _b.handleMouseOver, handleMouseOut = _b.handleMouseOut, sortSymbol = _b.sortSymbol;

package/{selection → table/selection}/SelectAllHeaderCell.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, FC } from "react";
-import { SelectionInfo } from "./types";
+import { SelectionInfo } from "../../common/selection/types";
 interface SelectAllHeaderCellProps {
     onClick: () => void;
     selectionInfo: SelectionInfo;

package/{styling → table/styling}/types.d.ts

@@ -1,4 +1,4 @@
-import { RowId } from "../types";
+import { RowId } from "../../common/types";
 export interface SharedTableStyleModel {
     table?: string[];
     tbody?: string[];
@@ -39,23 +39,3 @@ export interface AdditionalComponentsStyleModel {
     tableDiv?: string[];
     paginationUiDiv?: string[];
 }
-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/table/styling/types.js

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

package/table/types.d.ts

@@ -0,0 +1,19 @@
+import { ColSortModel } from "../common/sorting/types";
+import { ColDefBase, MainComponentSharedProps } from "../common/types";
+import { StyleModel } from "../common/styling/types";
+export type DisplayMode = "table" | "block";
+export type TableProps = MainComponentSharedProps & {
+    caption?: string;
+    styleModel?: StyleModel;
+    displayMode?: DisplayMode;
+};
+export type BaseTableProps = Omit<TableProps, "cols"> & {
+    cols: ColDefBase[];
+};
+export interface ColHeaderCellProps {
+    label: string;
+    sortModel?: ColSortModel;
+    ariaColIndex: number;
+    additionalClasses?: string[] | null;
+    width?: number;
+}

package/table/types.js

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

package/editing/types.d.ts

@@ -1,16 +0,0 @@
-import { ColDataType, ColDataTypeStrings, RowData, RowId } from "../types";
-export interface CellData {
-    fieldName: string;
-    value: ColDataType;
-    type: ColDataTypeStrings;
-    ariaColIndex: number;
-    formattedValue: string;
-    label: string;
-    width?: number;
-}
-export type UpdateCallbackGenerator = (id: RowId) => (rowData: RowData) => void;
-export interface EditModel {
-    getUpdateCallback: UpdateCallbackGenerator;
-    getDeleteCallback?: (id: RowId) => () => void;
-    editColWidth?: number;
-}

package/filtering/useFilterFormState.d.ts

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

package/main/ToggleButton.d.ts

@@ -1,9 +0,0 @@
-import { FC } from "react";
-export interface ToggleButtonProps {
-    isActive: boolean;
-    label: string;
-    onClick: () => void;
-    classes?: string[];
-}
-declare const ToggleButton: FC<ToggleButtonProps>;
-export default ToggleButton;

package/main/ToggleButton.js

@@ -1,14 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from "classnames";
-var ToggleButton = function (_a) {
-    var isActive = _a.isActive, label = _a.label, onClick = _a.onClick, classes = _a.classes;
-    var baseClasses = ["btn"];
-    var variableClasses = {
-        active: isActive,
-    };
-    return (_jsx("button", { type: "button", className: classNames(baseClasses, variableClasses, classes, {
-            "btn-primary": !(classes && classes.length > 0),
-        }), "aria-pressed": isActive, onClick: onClick, children: label }));
-};
-export default ToggleButton;

package/pipeline/useCombinedPipeline/useEditableFromFilterState.d.ts

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

package/pipeline/useCombinedPipeline/useEditableFromFilterState.js

@@ -1,14 +0,0 @@
-import { useMemo } from "react";
-var useEditableFromFilterState = function (filterState) {
-    return useMemo(function () {
-        if (filterState === null) {
-            return null;
-        }
-        var editableState = {};
-        Object.keys(filterState).forEach(function (columnName) {
-            editableState[columnName] = filterState[columnName].editableState;
-        });
-        return editableState;
-    }, [filterState]);
-};
-export default useEditableFromFilterState;

package/pipeline/useCombinedPipeline/useFilter.d.ts

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

package/pipeline/useCombinedPipeline/useFilterStateFromEditable.d.ts

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