@homebound/beam 2.187.0 → 2.187.1

package/dist/components/Table/{useSortState.js → hooks/useSortState.js}

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deriveSortState = exports.useSortState = void 0;
 const react_1 = require("react");
-const GridTable_1 = require("./GridTable");
+const utils_1 = require("../utils/utils");
 /** Small custom hook that wraps the "setSortColumn inverts the current sort" logic. */
 function useSortState(columns, sorting) {
     // If we're server-side sorting, use the caller's `sorting.value` prop to initialize our internal
@@ -23,7 +23,7 @@ function useSortState(columns, sorting) {
             else {
                 // If no explicit sorting, assume 1st column ascending
                 const firstSortableColumn = columns.findIndex((c) => c.clientSideSort !== false);
-                return [firstSortableColumn, GridTable_1.ASC, primaryKey, primary === null || primary === void 0 ? void 0 : primary[1]];
+                return [firstSortableColumn, utils_1.ASC, primaryKey, primary === null || primary === void 0 ? void 0 : primary[1]];
             }
         }
         else {
@@ -58,17 +58,17 @@ function deriveSortState(currentSortState, clickedKey, initialSortState) {
     const [currentKey, currentDirection] = currentSortState || [];
     // If the current sort state is not defined, or clicking a new column, then sort ASC on the clicked key
     if (!currentSortState || clickedKey !== currentKey) {
-        return [clickedKey, GridTable_1.ASC, initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[2], initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[3]];
+        return [clickedKey, utils_1.ASC, initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[2], initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[3]];
     }
     // If there is an `initialSortState` and we're clicking on that same key, then flip the sort.
     // Handles cases where the initial sort is DESC so that we can allow for DESC to ASC sorting.
     if (initialSortState && initialSortState[0] === clickedKey) {
-        return [clickedKey, currentDirection === GridTable_1.ASC ? GridTable_1.DESC : GridTable_1.ASC, initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[2], initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[3]];
+        return [clickedKey, currentDirection === utils_1.ASC ? utils_1.DESC : utils_1.ASC, initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[2], initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[3]];
     }
     // Otherwise when clicking the current column, toggle through sort states
-    if (currentDirection === GridTable_1.ASC) {
+    if (currentDirection === utils_1.ASC) {
         // if ASC -> go to desc
-        return [clickedKey, GridTable_1.DESC, initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[2], initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[3]];
+        return [clickedKey, utils_1.DESC, initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[2], initialSortState === null || initialSortState === void 0 ? void 0 : initialSortState[3]];
     }
     // Else, direction is already DESC, so revert to original sort value.
     return initialSortState;

package/dist/components/Table/index.d.ts

@@ -1,16 +1,32 @@
-export * from "./CollapseToggle";
-export * from "./columns";
-export { EditColumnsButton } from "./EditColumnsButton";
-export type { GridRowLookup } from "./GridRowLookup";
-export { GridSortContext } from "./GridSortContext";
-export { ASC, DESC, GridTable, setDefaultStyle, setGridTableDefaults } from "./GridTable";
-export type { Direction, GridCellAlignment, GridCellContent, GridColumn, GridDataRow, GridRowStyles, GridSortConfig, GridStyle, GridTableDefaults, GridTableProps, GridTableXss, Kinded, RowStyle, setRunningInJest, } from "./GridTable";
+export { defaultRenderFn, headerRenderFn, rowClickRenderFn, rowLinkRenderFn, } from "./components/cell";
+export type { GridCellContent, RenderCellFn } from "./components/cell";
+export * from "./components/CollapseToggle";
+export { EditColumnsButton } from "./components/EditColumnsButton";
+export { Row } from "./components/Row";
+export type { GridDataRow, GridRowKind } from "./components/Row";
+export * from "./components/SelectToggle";
+export * from "./components/SortHeader";
+export { SortHeader } from "./components/SortHeader";
 export { useGridTableApi } from "./GridTableApi";
 export type { GridTableApi } from "./GridTableApi";
-export { RowState, RowStateContext } from "./RowState";
-export * from "./SelectToggle";
-export { simpleDataRows, simpleHeader } from "./simpleHelpers";
-export type { SimpleHeaderAndData } from "./simpleHelpers";
-export { SortHeader } from "./SortHeader";
-export { cardStyle, condensedStyle, defaultStyle, getTableStyles } from "./styles";
-export { useColumns } from "./useColumns";
+export * from "./hooks/useColumns";
+export * from "./hooks/useSetupColumnSizes";
+export * from "./hooks/useSortState";
+export { cardStyle, condensedStyle, defaultStyle, getTableStyles } from "./TableStyles";
+export type { GridStyle, RowStyle, RowStyles } from "./TableStyles";
+export * from "./types";
+export * from "./utils/columns";
+export { createRowLookup } from "./utils/GridRowLookup";
+export type { GridRowLookup } from "./utils/GridRowLookup";
+export * from "./utils/GridSortContext";
+export { GridSortContext } from "./utils/GridSortContext";
+export type { GridSortContextProps } from "./utils/GridSortContext";
+export { RowState, RowStateContext } from "./utils/RowState";
+export type { SelectedState } from "./utils/RowState";
+export { simpleDataRows, simpleHeader } from "./utils/simpleHelpers";
+export type { SimpleHeaderAndData } from "./utils/simpleHelpers";
+export * from "./utils/sortRows";
+export * from "./utils/utils";
+export * from "./utils/visitor";
+export { GridTable, setDefaultStyle, setGridTableDefaults } from "./GridTable";
+export type { GridSortConfig, GridTableDefaults, GridTableProps, setRunningInJest } from "./GridTable";

package/dist/components/Table/index.js

@@ -10,34 +10,48 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useColumns = exports.getTableStyles = exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.SortHeader = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.useGridTableApi = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = exports.EditColumnsButton = void 0;
-__exportStar(require("./CollapseToggle"), exports);
-__exportStar(require("./columns"), exports);
-var EditColumnsButton_1 = require("./EditColumnsButton");
+exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.GridSortContext = exports.createRowLookup = exports.getTableStyles = exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.useGridTableApi = exports.SortHeader = exports.Row = exports.EditColumnsButton = exports.rowLinkRenderFn = exports.rowClickRenderFn = exports.headerRenderFn = exports.defaultRenderFn = void 0;
+var cell_1 = require("./components/cell");
+Object.defineProperty(exports, "defaultRenderFn", { enumerable: true, get: function () { return cell_1.defaultRenderFn; } });
+Object.defineProperty(exports, "headerRenderFn", { enumerable: true, get: function () { return cell_1.headerRenderFn; } });
+Object.defineProperty(exports, "rowClickRenderFn", { enumerable: true, get: function () { return cell_1.rowClickRenderFn; } });
+Object.defineProperty(exports, "rowLinkRenderFn", { enumerable: true, get: function () { return cell_1.rowLinkRenderFn; } });
+__exportStar(require("./components/CollapseToggle"), exports);
+var EditColumnsButton_1 = require("./components/EditColumnsButton");
 Object.defineProperty(exports, "EditColumnsButton", { enumerable: true, get: function () { return EditColumnsButton_1.EditColumnsButton; } });
-var GridSortContext_1 = require("./GridSortContext");
-Object.defineProperty(exports, "GridSortContext", { enumerable: true, get: function () { return GridSortContext_1.GridSortContext; } });
-var GridTable_1 = require("./GridTable");
-Object.defineProperty(exports, "ASC", { enumerable: true, get: function () { return GridTable_1.ASC; } });
-Object.defineProperty(exports, "DESC", { enumerable: true, get: function () { return GridTable_1.DESC; } });
-Object.defineProperty(exports, "GridTable", { enumerable: true, get: function () { return GridTable_1.GridTable; } });
-Object.defineProperty(exports, "setDefaultStyle", { enumerable: true, get: function () { return GridTable_1.setDefaultStyle; } });
-Object.defineProperty(exports, "setGridTableDefaults", { enumerable: true, get: function () { return GridTable_1.setGridTableDefaults; } });
+var Row_1 = require("./components/Row");
+Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return Row_1.Row; } });
+__exportStar(require("./components/SelectToggle"), exports);
+__exportStar(require("./components/SortHeader"), exports);
+var SortHeader_1 = require("./components/SortHeader");
+Object.defineProperty(exports, "SortHeader", { enumerable: true, get: function () { return SortHeader_1.SortHeader; } });
 var GridTableApi_1 = require("./GridTableApi");
 Object.defineProperty(exports, "useGridTableApi", { enumerable: true, get: function () { return GridTableApi_1.useGridTableApi; } });
-var RowState_1 = require("./RowState");
+__exportStar(require("./hooks/useColumns"), exports);
+__exportStar(require("./hooks/useSetupColumnSizes"), exports);
+__exportStar(require("./hooks/useSortState"), exports);
+var TableStyles_1 = require("./TableStyles");
+Object.defineProperty(exports, "cardStyle", { enumerable: true, get: function () { return TableStyles_1.cardStyle; } });
+Object.defineProperty(exports, "condensedStyle", { enumerable: true, get: function () { return TableStyles_1.condensedStyle; } });
+Object.defineProperty(exports, "defaultStyle", { enumerable: true, get: function () { return TableStyles_1.defaultStyle; } });
+Object.defineProperty(exports, "getTableStyles", { enumerable: true, get: function () { return TableStyles_1.getTableStyles; } });
+__exportStar(require("./types"), exports);
+__exportStar(require("./utils/columns"), exports);
+var GridRowLookup_1 = require("./utils/GridRowLookup");
+Object.defineProperty(exports, "createRowLookup", { enumerable: true, get: function () { return GridRowLookup_1.createRowLookup; } });
+__exportStar(require("./utils/GridSortContext"), exports);
+var GridSortContext_1 = require("./utils/GridSortContext");
+Object.defineProperty(exports, "GridSortContext", { enumerable: true, get: function () { return GridSortContext_1.GridSortContext; } });
+var RowState_1 = require("./utils/RowState");
 Object.defineProperty(exports, "RowState", { enumerable: true, get: function () { return RowState_1.RowState; } });
 Object.defineProperty(exports, "RowStateContext", { enumerable: true, get: function () { return RowState_1.RowStateContext; } });
-__exportStar(require("./SelectToggle"), exports);
-var simpleHelpers_1 = require("./simpleHelpers");
+var simpleHelpers_1 = require("./utils/simpleHelpers");
 Object.defineProperty(exports, "simpleDataRows", { enumerable: true, get: function () { return simpleHelpers_1.simpleDataRows; } });
 Object.defineProperty(exports, "simpleHeader", { enumerable: true, get: function () { return simpleHelpers_1.simpleHeader; } });
-var SortHeader_1 = require("./SortHeader");
-Object.defineProperty(exports, "SortHeader", { enumerable: true, get: function () { return SortHeader_1.SortHeader; } });
-var styles_1 = require("./styles");
-Object.defineProperty(exports, "cardStyle", { enumerable: true, get: function () { return styles_1.cardStyle; } });
-Object.defineProperty(exports, "condensedStyle", { enumerable: true, get: function () { return styles_1.condensedStyle; } });
-Object.defineProperty(exports, "defaultStyle", { enumerable: true, get: function () { return styles_1.defaultStyle; } });
-Object.defineProperty(exports, "getTableStyles", { enumerable: true, get: function () { return styles_1.getTableStyles; } });
-var useColumns_1 = require("./useColumns");
-Object.defineProperty(exports, "useColumns", { enumerable: true, get: function () { return useColumns_1.useColumns; } });
+__exportStar(require("./utils/sortRows"), exports);
+__exportStar(require("./utils/utils"), exports);
+__exportStar(require("./utils/visitor"), exports);
+var GridTable_1 = require("./GridTable");
+Object.defineProperty(exports, "GridTable", { enumerable: true, get: function () { return GridTable_1.GridTable; } });
+Object.defineProperty(exports, "setDefaultStyle", { enumerable: true, get: function () { return GridTable_1.setDefaultStyle; } });
+Object.defineProperty(exports, "setGridTableDefaults", { enumerable: true, get: function () { return GridTable_1.setGridTableDefaults; } });

package/dist/components/Table/types.d.ts

@@ -0,0 +1,83 @@
+import { ReactElement, ReactNode } from "react";
+import { GridCellContent } from "./components/cell";
+import { GridDataRow, GridRowKind } from "./components/Row";
+import { GridTableApi } from "./GridTableApi";
+import { Margin, Xss } from "../../Css";
+export declare type Kinded = {
+    kind: string;
+};
+export declare type GridTableXss = Xss<Margin>;
+export declare type RenderAs = "div" | "table" | "virtual";
+export declare type RowTuple<R extends Kinded> = [GridDataRow<R>, ReactElement];
+export declare type ParentChildrenTuple<R extends Kinded> = [GridDataRow<R>, ParentChildrenTuple<R>[]];
+export declare type Direction = "ASC" | "DESC";
+export declare type MaybeFn<T> = T | (() => T);
+export declare type GridCellAlignment = "left" | "right" | "center";
+/**
+ * Given an ADT of type T, performs a look up and returns the type of kind K.
+ *
+ * See https://stackoverflow.com/a/50125960/355031
+ */
+export declare type DiscriminateUnion<T, K extends keyof T, V extends T[K]> = T extends Record<K, V> ? T : never;
+/**
+ * Defines how a single column will render each given row `kind` in `R`.
+ *
+ * The `S` generic is either:
+ *
+ * - For server-side sorting, it's the sortKey to pass back to the server to
+ * request "sort by this column".
+ *
+ * - For client-side sorting, it's type `number`, to represent the current
+ * column being sorted, in which case we use the GridCellContent.value.
+ */
+export declare type GridColumn<R extends Kinded, S = {}> = {
+    [K in R["kind"]]: string | GridCellContent | (DiscriminateUnion<R, "kind", K> extends {
+        data: infer D;
+    } ? (data: D, opts: {
+        row: GridRowKind<R, K>;
+        api: GridTableApi<R>;
+        level: number;
+    }) => ReactNode | GridCellContent : (data: undefined, opts: {
+        row: GridRowKind<R, K>;
+        api: GridTableApi<R>;
+        level: number;
+    }) => ReactNode | GridCellContent);
+} & {
+    /**
+     * The column's width.
+     * - Only px, percentage, or fr units are supported, due to each GridRow acting as an independent table. This ensures consistent alignment between rows.
+     * - Numbers are treated as `fr` units
+     * - The default value is `1fr`
+     */
+    w?: number | string;
+    /** The minimum width the column can shrink to */
+    mw?: string;
+    /** The column's default alignment for each cell. */
+    align?: GridCellAlignment;
+    /** Whether the column can be sorted (if client-side sorting). Defaults to true if sorting client-side. */
+    clientSideSort?: boolean;
+    /** This column's sort by value (if server-side sorting). */
+    serverSideSortKey?: S;
+    /** Allows the column to stay in place when the user scrolls horizontally */
+    sticky?: "left" | "right";
+    /** Prevent column from supporting RowStyle.onClick/rowLink in order to avoid nested interactivity. Defaults to true */
+    wrapAction?: false;
+    /** Used as a signal to defer adding the 'indent' styling */
+    isAction?: true;
+    /** Column name that will be used to generate an unique identifier for every row cell */
+    name?: string;
+    /** Flag that will allow to know which columns are hide-able */
+    canHide?: boolean;
+    /** Flag that will allow to know which hide-able columns are visible on initial load */
+    initVisible?: boolean;
+};
+export declare const nonKindGridColumnKeys: string[];
+/**
+ * Used to indicate where to pin the DataRow and if whether it should be filtered or always visible, setting `filter` to `true` will hide this row
+ * if it doesn't match the provided filtering search term
+ */
+export declare type Pin = {
+    at: "first" | "last";
+    filter?: boolean;
+};
+export declare type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;

package/dist/components/Table/types.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nonKindGridColumnKeys = void 0;
+exports.nonKindGridColumnKeys = [
+    "w",
+    "mw",
+    "align",
+    "serverSideSortKey",
+    "clientSideSort",
+    "sticky",
+    "wrapAction",
+    "isAction",
+    "name",
+    "canHide",
+    "initVisible",
+];

package/dist/components/Table/{GridRowLookup.d.ts → utils/GridRowLookup.d.ts}

@@ -1,6 +1,7 @@
 import { MutableRefObject } from "react";
 import { VirtuosoHandle } from "react-virtuoso";
-import { DiscriminateUnion, GridColumn, GridDataRow, Kinded, RowTuple } from "./GridTable";
+import { GridDataRow } from "../components/Row";
+import { DiscriminateUnion, GridColumn, Kinded, RowTuple } from "../types";
 /**
  * Allows a caller to ask for the currently shown rows, given the current sorting/filtering.
  *

package/dist/components/Table/{GridRowLookup.js → utils/GridRowLookup.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getKinds = exports.createRowLookup = void 0;
-const GridTable_1 = require("./GridTable");
+const types_1 = require("../types");
 function createRowLookup(columns, filteredRows, virtuosoRef) {
     return {
         scrollTo(kind, id) {
@@ -50,6 +50,6 @@ function createRowLookup(columns, filteredRows, virtuosoRef) {
 }
 exports.createRowLookup = createRowLookup;
 function getKinds(columns) {
-    return Object.keys(columns.find((c) => !c.isAction) || {}).filter((key) => !GridTable_1.nonKindGridColumnKeys.includes(key));
+    return Object.keys(columns.find((c) => !c.isAction) || {}).filter((key) => !types_1.nonKindGridColumnKeys.includes(key));
 }
 exports.getKinds = getKinds;

package/dist/components/Table/{RowState.d.ts → utils/RowState.d.ts}

@@ -1,5 +1,5 @@
 import React from "react";
-import { GridDataRow } from "./GridTable";
+import { GridDataRow } from "../components/Row";
 export declare type SelectedState = "checked" | "unchecked" | "partial";
 /**
  * Stores the collapsed & selected state of rows.

package/dist/components/Table/{columns.d.ts → utils/columns.d.ts}

@@ -1,4 +1,4 @@
-import { GridColumn, Kinded } from "./GridTable";
+import { GridColumn, Kinded } from "../types";
 /** Provides default styling for a GridColumn representing a Date. */
 export declare function column<T extends Kinded, S = {}>(columnDef: GridColumn<T, S>): GridColumn<T, S>;
 /** Provides default styling for a GridColumn representing a Date. */
@@ -24,3 +24,8 @@ export declare function selectColumn<T extends Kinded, S = {}>(columnDef?: Parti
  * all rows.
  */
 export declare function collapseColumn<T extends Kinded, S = {}>(columnDef?: Partial<GridColumn<T, S>>): GridColumn<T, S>;
+/**
+ * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
+ * Enforces only fixed-sized units (% and px)
+ */
+export declare function calcColumnSizes(columns: GridColumn<any>[], tableWidth: number | undefined, tableMinWidthPx?: number): string[];

package/dist/components/Table/utils/columns.js

@@ -0,0 +1,149 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calcColumnSizes = exports.collapseColumn = exports.selectColumn = exports.actionColumn = exports.numericColumn = exports.dateColumn = exports.column = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const CollapseToggle_1 = require("../components/CollapseToggle");
+const SelectToggle_1 = require("../components/SelectToggle");
+const types_1 = require("../types");
+const utils_1 = require("../../../utils");
+/** Provides default styling for a GridColumn representing a Date. */
+function column(columnDef) {
+    return { ...columnDef };
+}
+exports.column = column;
+/** Provides default styling for a GridColumn representing a Date. */
+function dateColumn(columnDef) {
+    return { ...columnDef, align: "left" };
+}
+exports.dateColumn = dateColumn;
+/**
+ * Provides default styling for a GridColumn representing a Numeric value (Price, percentage, PO #, etc.). */
+function numericColumn(columnDef) {
+    return { ...columnDef, align: "right" };
+}
+exports.numericColumn = numericColumn;
+/** Provides default styling for a GridColumn representing an Action. */
+function actionColumn(columnDef) {
+    return { clientSideSort: false, ...columnDef, align: "center", isAction: true, wrapAction: false };
+}
+exports.actionColumn = actionColumn;
+/**
+ * Provides default styling for a GridColumn containing a checkbox.
+ *
+ * We allow either no `columnDef` at all, or a partial column def (i.e. to say a Totals row should
+ * not have a `SelectToggle`, b/c we can provide the default behavior a `SelectToggle` for basically
+ * all rows.
+ */
+function selectColumn(columnDef) {
+    const base = {
+        ...nonKindDefaults(),
+        clientSideSort: false,
+        align: "center",
+        // Defining `w: 48px` to accommodate for the `16px` wide checkbox and `16px` of padding on either side.
+        w: "48px",
+        wrapAction: false,
+        isAction: true,
+        // Use any of the user's per-row kind methods if they have them.
+        ...columnDef,
+    };
+    return (0, utils_1.newMethodMissingProxy)(base, (key) => {
+        return (data, { row }) => ({
+            content: (0, jsx_runtime_1.jsx)(SelectToggle_1.SelectToggle, { id: row.id, disabled: row.selectable === false }, void 0),
+        });
+    });
+}
+exports.selectColumn = selectColumn;
+/**
+ * Provides default styling for a GridColumn containing a collapse icon.
+ *
+ * We allow either no `columnDef` at all, or a partial column def (i.e. to say a Totals row should
+ * not have a `CollapseToggle`, b/c we can provide the default behavior a `CollapseToggle` for basically
+ * all rows.
+ */
+function collapseColumn(columnDef) {
+    const base = {
+        ...nonKindDefaults(),
+        clientSideSort: false,
+        align: "center",
+        // Defining `w: 38px` based on the designs
+        w: "38px",
+        wrapAction: false,
+        isAction: true,
+        ...columnDef,
+    };
+    return (0, utils_1.newMethodMissingProxy)(base, (key) => {
+        return (data, { row, level }) => ({
+            content: (0, jsx_runtime_1.jsx)(CollapseToggle_1.CollapseToggle, { row: row, compact: level > 0 }, void 0),
+        });
+    });
+}
+exports.collapseColumn = collapseColumn;
+// Keep keys like `w` and `mw` from hitting the method missing proxy
+function nonKindDefaults() {
+    return Object.fromEntries(types_1.nonKindGridColumnKeys.map((key) => [key, undefined]));
+}
+/**
+ * Calculates column widths using a flexible `calc()` definition that allows for consistent column alignment without the use of `<table />`, CSS Grid, etc layouts.
+ * Enforces only fixed-sized units (% and px)
+ */
+function calcColumnSizes(columns, tableWidth, tableMinWidthPx = 0) {
+    // For both default columns (1fr) as well as `w: 4fr` columns, we translate the width into an expression that looks like:
+    // calc((100% - allOtherPercent - allOtherPx) * ((myFr / totalFr))`
+    //
+    // Which looks _a lot_ like how `fr` units just work out-of-the-box.
+    //
+    // Unfortunately, something about having our header & body rows in separate divs (which is controlled
+    // by react-virtuoso), even if they have the same width, for some reason `fr` units between the two
+    // will resolve every slightly differently, where as this approach they will match exactly.
+    const { claimedPercentages, claimedPixels, totalFr } = columns.reduce((acc, { w }) => {
+        if (typeof w === "undefined") {
+            return { ...acc, totalFr: acc.totalFr + 1 };
+        }
+        else if (typeof w === "number") {
+            return { ...acc, totalFr: acc.totalFr + w };
+        }
+        else if (w.endsWith("fr")) {
+            return { ...acc, totalFr: acc.totalFr + Number(w.replace("fr", "")) };
+        }
+        else if (w.endsWith("px")) {
+            return { ...acc, claimedPixels: acc.claimedPixels + Number(w.replace("px", "")) };
+        }
+        else if (w.endsWith("%")) {
+            return { ...acc, claimedPercentages: acc.claimedPercentages + Number(w.replace("%", "")) };
+        }
+        else {
+            throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
+        }
+    }, { claimedPercentages: 0, claimedPixels: 0, totalFr: 0 });
+    // This is our "fake but for some reason it lines up better" fr calc
+    function fr(myFr) {
+        // If the tableWidth, then return a pixel value
+        if (tableWidth) {
+            const widthBasis = Math.max(tableWidth, tableMinWidthPx);
+            return `(${(widthBasis - (claimedPercentages / 100) * widthBasis - claimedPixels) * (myFr / totalFr)}px)`;
+        }
+        // Otherwise return the `calc()` value
+        return `((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`;
+    }
+    let sizes = columns.map(({ w }) => {
+        if (typeof w === "undefined") {
+            return fr(1);
+        }
+        else if (typeof w === "string") {
+            if (w.endsWith("%") || w.endsWith("px")) {
+                return w;
+            }
+            else if (w.endsWith("fr")) {
+                return fr(Number(w.replace("fr", "")));
+            }
+            else {
+                throw new Error("Beam Table column width definition only supports px, percentage, or fr units");
+            }
+        }
+        else {
+            return fr(w);
+        }
+    });
+    return sizes;
+}
+exports.calcColumnSizes = calcColumnSizes;

package/dist/components/Table/{simpleHelpers.d.ts → utils/simpleHelpers.d.ts}

@@ -1,4 +1,4 @@
-import { GridDataRow } from "./GridTable";
+import { GridDataRow } from "../components/Row";
 /**
  * A helper for making `Row` type aliases of simple/flat tables that are just header + data.
  *

package/dist/components/Table/{sortRows.d.ts → utils/sortRows.d.ts}

@@ -1,5 +1,7 @@
 import { ReactNode } from "react";
-import { GridCellContent, GridColumn, GridDataRow, Kinded } from "./GridTable";
-import { SortOn, SortState } from "./useSortState";
+import { GridCellContent } from "../components/cell";
+import { GridDataRow } from "../components/Row";
+import { SortOn, SortState } from "../hooks/useSortState";
+import { GridColumn, Kinded } from "../types";
 export declare function sortRows<R extends Kinded>(columns: GridColumn<R>[], rows: GridDataRow<R>[], sortState: SortState<number>, caseSensitive: boolean): GridDataRow<R>[];
 export declare function ensureClientSideSortValueIsSortable(sortOn: SortOn, isHeader: boolean, column: GridColumn<any>, idx: number, maybeContent: ReactNode | GridCellContent): void;

package/dist/components/Table/{sortRows.js → utils/sortRows.js}

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ensureClientSideSortValueIsSortable = exports.sortRows = void 0;
-const GridTable_1 = require("./GridTable");
+const utils_1 = require("./utils");
 // Returns a shallow copy of the `rows` parameter sorted based on `sortState`
 function sortRows(columns, rows, sortState, caseSensitive) {
     const sorted = sortBatch(columns, rows, sortState, caseSensitive);
@@ -48,8 +48,8 @@ function getPin(pin) {
     return typeof pin === "string" ? pin : pin === null || pin === void 0 ? void 0 : pin.at;
 }
 function compare(column, a, b, invert, caseSensitive) {
-    const v1 = sortValue((0, GridTable_1.applyRowFn)(column, a, {}, 0), caseSensitive);
-    const v2 = sortValue((0, GridTable_1.applyRowFn)(column, b, {}, 0), caseSensitive);
+    const v1 = sortValue((0, utils_1.applyRowFn)(column, a, {}, 0), caseSensitive);
+    const v2 = sortValue((0, utils_1.applyRowFn)(column, b, {}, 0), caseSensitive);
     const v1e = v1 === null || v1 === undefined;
     const v2e = v2 === null || v2 === undefined;
     if ((v1e && v2e) || v1 === v2) {

package/dist/components/Table/utils/utils.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { GridCellContent } from "../components/cell";
+import { GridDataRow } from "../components/Row";
+import { GridTableApi } from "../GridTableApi";
+import { GridStyle, RowStyle } from "../TableStyles";
+import { GridCellAlignment, GridColumn, Kinded, RenderAs } from "../types";
+import { Properties } from "../../../Css";
+/** If a column def return just string text for a given row, apply some default styling. */
+export declare function toContent(maybeContent: ReactNode | GridCellContent, isHeader: boolean, canSortColumn: boolean, isClientSideSorting: boolean, style: GridStyle, as: RenderAs, alignment: GridCellAlignment): ReactNode;
+export declare function isGridCellContent(content: ReactNode | GridCellContent): content is GridCellContent;
+/** Return the content for a given column def applied to a given row. */
+export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>, api: GridTableApi<R>, level: number): ReactNode | GridCellContent;
+export declare const ASC: "ASC";
+export declare const DESC: "DESC";
+export declare const emptyCell: GridCellContent;
+export declare function getIndentationCss<R extends Kinded>(style: GridStyle, rowStyle: RowStyle<R> | undefined, columnIndex: number, maybeContent: ReactNode | GridCellContent): Properties;
+export declare function getFirstOrLastCellCss<R extends Kinded>(style: GridStyle, columnIndex: number, columns: GridColumn<R>[]): Properties;
+export declare function getAlignment(column: GridColumn<any>, maybeContent: ReactNode | GridCellContent): GridCellAlignment;
+export declare function getJustification(column: GridColumn<any>, maybeContent: ReactNode | GridCellContent, as: RenderAs, alignment: GridCellAlignment): {
+    textAlign: import("csstype").Property.TextAlign | undefined;
+};
+export declare function maybeApplyFunction<T>(row: T, maybeFn: Properties | ((row: T) => Properties) | undefined): Properties | undefined;
+export declare function matchesFilter(maybeContent: ReactNode | GridCellContent, filter: string): boolean;