@homebound/beam 2.187.0 → 2.187.1

package/dist/components/Table/GridTable.js

@@ -22,34 +22,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.matchesFilter = exports.applyRowFn = exports.nonKindGridColumnKeys = exports.calcColumnSizes = exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = exports.emptyCell = exports.DESC = exports.ASC = void 0;
+exports.filterRows = exports.GridTable = exports.setGridTableDefaults = exports.setDefaultStyle = exports.setRunningInJest = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const memoize_one_1 = __importDefault(require("memoize-one"));
-const mobx_react_1 = require("mobx-react");
 const react_1 = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
 const react_virtuoso_1 = require("react-virtuoso");
-const CssReset_1 = require("../CssReset");
 const PresentationContext_1 = require("../PresentationContext");
-const columnSizes_1 = require("./columnSizes");
-const GridRowLookup_1 = require("./GridRowLookup");
-const GridSortContext_1 = require("./GridSortContext");
 const GridTableApi_1 = require("./GridTableApi");
-const RowState_1 = require("./RowState");
-const SortHeader_1 = require("./SortHeader");
-const sortRows_1 = require("./sortRows");
-const styles_1 = require("./styles");
-const useSortState_1 = require("./useSortState");
+const useSetupColumnSizes_1 = require("./hooks/useSetupColumnSizes");
+const useSortState_1 = require("./hooks/useSortState");
+const TableStyles_1 = require("./TableStyles");
+const GridRowLookup_1 = require("./utils/GridRowLookup");
+const RowState_1 = require("./utils/RowState");
+const sortRows_1 = require("./utils/sortRows");
+const utils_1 = require("./utils/utils");
 const Css_1 = require("../../Css");
 const hooks_1 = require("../../hooks");
 const useRenderCount_1 = require("../../hooks/useRenderCount");
-const utils_1 = require("../../utils");
-const getInteractiveElement_1 = require("../../utils/getInteractiveElement");
-const shallowEqual_1 = require("../../utils/shallowEqual");
-const _1 = require(".");
-exports.ASC = "ASC";
-exports.DESC = "DESC";
-exports.emptyCell = { content: () => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0), value: "" };
+const Row_1 = require("./components/Row");
 let runningInJest = false;
 /** Tells GridTable we're running in Jest, which forces as=virtual to be as=div, to work in jsdom. */
 function setRunningInJest() {
@@ -57,7 +47,7 @@ function setRunningInJest() {
 }
 exports.setRunningInJest = setRunningInJest;
 let defaults = {
-    style: _1.defaultStyle,
+    style: TableStyles_1.defaultStyle,
     stickyHeader: false,
 };
 /** Configures the default/app-wide GridStyle. */
@@ -101,7 +91,7 @@ function GridTable(props) {
         api.setActiveCellId(activeCellId);
         return api;
     }, [props.api]);
-    const style = resolveStyles(maybeStyle);
+    const style = (0, TableStyles_1.resolveStyles)(maybeStyle);
     const { rowState } = api;
     rowState.setRows(rows);
     (0, react_1.useEffect)(() => {
@@ -115,7 +105,7 @@ function GridTable(props) {
     // (or us) is resetting component state more than necessary, so we track render counts from
     // here instead.
     const { getCount } = (0, useRenderCount_1.useRenderCount)();
-    const columnSizes = (0, columnSizes_1.useSetupColumnSizes)(style, columns, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : resizeRef);
+    const columnSizes = (0, useSetupColumnSizes_1.useSetupColumnSizes)(style, columns, resizeTarget !== null && resizeTarget !== void 0 ? resizeTarget : resizeRef);
     // Make a single copy of our current collapsed state, so we'll have a single observer.
     const collapsedIds = (0, hooks_1.useComputed)(() => rowState.collapsedIds, [rowState]);
     const [sortState, setSortKey, sortOn, caseSensitive] = (0, useSortState_1.useSortState)(columns, props.sorting);
@@ -133,7 +123,7 @@ function GridTable(props) {
             // We only pass sortState to header rows, b/c non-headers rows shouldn't have to re-render on sorting
             // changes, and so by not passing the sortProps, it means the data rows' React.memo will still cache them.
             const sortProps = row.kind === "header" ? { sortOn, sortState, setSortKey } : { sortOn };
-            return ((0, jsx_runtime_1.jsx)(MemoizedGridRow, Object.assign({}, {
+            return ((0, jsx_runtime_1.jsx)(Row_1.Row, Object.assign({}, {
                 as,
                 columns,
                 row,
@@ -376,408 +366,6 @@ const VirtualRoot = (0, memoize_one_1.default)((gs, _columns, id, xss) => {
             }, "data-testid": id }, { children: children }), void 0));
     });
 });
-/**
- * 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;
-exports.nonKindGridColumnKeys = [
-    "w",
-    "mw",
-    "align",
-    "serverSideSortKey",
-    "clientSideSort",
-    "sticky",
-    "wrapAction",
-    "isAction",
-];
-function getIndentationCss(style, rowStyle, columnIndex, maybeContent) {
-    // Look for cell-specific indent or row-specific indent (row-specific is only one the first column)
-    const indent = (isGridCellContent(maybeContent) && maybeContent.indent) || (columnIndex === 0 && (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.indent));
-    if (typeof indent === "number" && style.levels !== undefined) {
-        throw new Error("The indent param is deprecated for new beam fixed & flexible styles, use beamNestedFixedStyle or beamNestedFlexibleStyle");
-    }
-    return indent === 1 ? style.indentOneCss || {} : indent === 2 ? style.indentTwoCss || {} : {};
-}
-function getFirstOrLastCellCss(style, columnIndex, columns) {
-    return {
-        ...(columnIndex === 0 ? style.firstCellCss : {}),
-        ...(columnIndex === columns.length - 1 ? style.lastCellCss : {}),
-    };
-}
-// We extract GridRow to its own mini-component primarily so we can React.memo'ize it.
-function GridRow(props) {
-    var _a;
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sortOn, sortState, setSortKey, columnSizes, level, getCount, api, cellHighlight, ...others } = props;
-    const { rowState } = (0, react_1.useContext)(RowState_1.RowStateContext);
-    const rowId = `${row.kind}_${row.id}`;
-    const isActive = (0, hooks_1.useComputed)(() => rowState.activeRowId === rowId, [rowId, rowState]);
-    // We treat the "header" and "totals" kind as special for "good defaults" styling
-    const isHeader = row.kind === "header";
-    const isTotals = row.kind === "totals";
-    const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
-    const Row = as === "table" ? "tr" : "div";
-    const revealOnRowHoverClass = "revealOnRowHover";
-    const rowStyleCellCss = maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.cellCss);
-    const rowCss = {
-        // For virtual tables use `display: flex` to keep all cells on the same row. For each cell in the row use `flexNone` to ensure they stay their defined widths
-        ...(as === "table" ? {} : Css_1.Css.relative.df.fg1.fs1.addIn("&>*", Css_1.Css.flexNone.$).$),
-        ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) && {
-            // Even though backgroundColor is set on the cellCss, the hover target is the row.
-            "&:hover > *": Css_1.Css.cursorPointer.bgColor((_a = style.rowHoverColor) !== null && _a !== void 0 ? _a : Css_1.Palette.LightBlue100).$,
-        }),
-        ...maybeApplyFunction(row, rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowCss),
-        // Maybe add the sticky header styles
-        ...((isHeader || isTotals) && stickyHeader ? Css_1.Css.sticky.topPx(stickyOffset).z2.$ : undefined),
-        ...{
-            [` > .${revealOnRowHoverClass} > *`]: Css_1.Css.invisible.$,
-            [`:hover > .${revealOnRowHoverClass} > *`]: Css_1.Css.visible.$,
-        },
-    };
-    let currentColspan = 1;
-    let firstContentColumnStylesApplied = false;
-    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({ css: rowCss }, others, { "data-gridrow": true }, getCount(row.id), { children: columns.map((column, columnIndex) => {
-            var _a, _b, _c, _d, _e;
-            const { wrapAction = true, isAction = false } = column;
-            const applyFirstContentColumnStyles = !isHeader && !isAction && !firstContentColumnStylesApplied;
-            firstContentColumnStylesApplied || (firstContentColumnStylesApplied = applyFirstContentColumnStyles);
-            if (column.mw) {
-                // Validate the column's minWidth definition if set.
-                if (!column.mw.endsWith("px") && !column.mw.endsWith("%")) {
-                    throw new Error("Beam Table column min-width definition only supports px or percentage values");
-                }
-            }
-            // Decrement colspan count and skip if greater than 1.
-            if (currentColspan > 1) {
-                currentColspan -= 1;
-                return null;
-            }
-            const maybeContent = applyRowFn(column, row, api, level);
-            currentColspan = isGridCellContent(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
-            const revealOnRowHover = isGridCellContent(maybeContent) ? maybeContent.revealOnRowHover : false;
-            const canSortColumn = (sortOn === "client" && column.clientSideSort !== false) ||
-                (sortOn === "server" && !!column.serverSideSortKey);
-            const alignment = getAlignment(column, maybeContent);
-            const justificationCss = getJustification(column, maybeContent, as, alignment);
-            const content = toContent(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment);
-            (0, sortRows_1.ensureClientSideSortValueIsSortable)(sortOn, isHeader, column, columnIndex, maybeContent);
-            const maybeSticky = (_b = ((isGridCellContent(maybeContent) && maybeContent.sticky) || column.sticky)) !== null && _b !== void 0 ? _b : undefined;
-            const maybeStickyColumnStyles = maybeSticky && columnSizes
-                ? {
-                    ...Css_1.Css.sticky.z1.bgWhite.$,
-                    ...(maybeSticky === "left"
-                        ? Css_1.Css.left(columnIndex === 0 ? 0 : `calc(${columnSizes.slice(0, columnIndex).join(" + ")})`).$
-                        : {}),
-                    ...(maybeSticky === "right"
-                        ? Css_1.Css.right(columnIndex + 1 === columnSizes.length
-                            ? 0
-                            : `calc(${columnSizes.slice(columnIndex + 1 - columnSizes.length).join(" + ")})`).$
-                        : {}),
-                }
-                : {};
-            const cellId = `${row.kind}_${row.id}_${column.name}`;
-            const applyCellHighlight = cellHighlight && !!column.name && !isHeader && !isTotals;
-            const isCellActive = rowState.activeCellId === cellId;
-            // Note that it seems expensive to calc a per-cell class name/CSS-in-JS output,
-            // vs. setting global/table-wide CSS like `style.cellCss` on the root grid div with
-            // a few descendent selectors. However, that approach means the root grid-applied
-            // CSS has a high-specificity and so its harder for per-page/per-cell business logic
-            // to override it. So, we just calc the combined table-wide+per-cell-overridden CSS here,
-            // in a very CSS-in-JS idiomatic manner.
-            //
-            // In practice we've not seen any performance issues with this from our "large but
-            // not Google spreadsheets" tables.
-            const cellCss = {
-                // Adding display flex so we can align content within the cells
-                ...Css_1.Css.df.$,
-                // Apply sticky column/cell styles
-                ...maybeStickyColumnStyles,
-                // Apply any static/all-cell styling
-                ...style.cellCss,
-                // Then override with first/last cell styling
-                ...getFirstOrLastCellCss(style, columnIndex, columns),
-                // Then override with per-cell/per-row justification/indentation
-                ...justificationCss,
-                ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
-                // Then apply any header-specific override
-                ...(isHeader && style.headerCellCss),
-                // Then apply any totals-specific override
-                ...(isTotals && style.totalsCellCss),
-                // Or level-specific styling
-                ...(!isHeader && !isTotals && !!style.levels && ((_c = style.levels[level]) === null || _c === void 0 ? void 0 : _c.cellCss)),
-                // Level specific styling for the first content column
-                ...(applyFirstContentColumnStyles && !!style.levels && ((_d = style.levels[level]) === null || _d === void 0 ? void 0 : _d.firstContentColumn)),
-                // The specific cell's css (if any from GridCellContent)
-                ...rowStyleCellCss,
-                // Apply active row styling for non-nested card styles.
-                ...(isActive ? Css_1.Css.bgColor((_e = style.activeBgColor) !== null && _e !== void 0 ? _e : Css_1.Palette.LightBlue50).$ : {}),
-                // Add any cell specific style overrides
-                ...(isGridCellContent(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
-                // And any cell specific css
-                ...(isGridCellContent(maybeContent) && maybeContent.css ? maybeContent.css : {}),
-                // Apply cell highlight styles to active cell and hover
-                ...Css_1.Css.if(applyCellHighlight && isCellActive).br4.boxShadow(`inset 0 0 0 1px ${Css_1.Palette.LightBlue700}`).$,
-                // Define the width of the column on each cell. Supports col spans.
-                width: `calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")})`,
-                ...(column.mw ? Css_1.Css.mw(column.mw).$ : {}),
-            };
-            const cellClassNames = revealOnRowHover ? revealOnRowHoverClass : undefined;
-            const cellOnClick = applyCellHighlight ? () => api.setActiveCellId(cellId) : undefined;
-            const renderFn = ((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)) && wrapAction
-                ? rowLinkRenderFn(as)
-                : isHeader
-                    ? headerRenderFn(columns, column, sortState, setSortKey, as)
-                    : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick) && wrapAction
-                        ? rowClickRenderFn(as, api)
-                        : defaultRenderFn(as);
-            return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames, cellOnClick);
-        }) }), void 0));
-}
-/**
- * Memoizes GridRows so that re-rendering the table doesn't re-render every single row.
- *
- * We use a custom `propsAreEqual` for the `GridRowProps.row` property, which we memoize
- * based on the `GridDataRow.data` prop, such that if a table re-renders (i.e. for a cache
- * updated) and technically creates new row instances, but a row's `row.data` points to the
- * same/unchanged Apollo cache fragment, then we won't re-render that row.
- *
- * Note that if you're using virtualization, it can be surprising how unnoticeable broken row
- * memoization is.
- */
-// Declared as a const + `as typeof GridRow` to work with generics, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
-const MemoizedGridRow = react_1.default.memo((0, mobx_react_1.observer)(GridRow), (one, two) => {
-    const { row: row1, ...others1 } = one;
-    const { row: row2, ...others2 } = two;
-    return (0, shallowEqual_1.shallowEqual)(row1, row2) && (0, shallowEqual_1.shallowEqual)(others1, others2);
-});
-/** A heuristic to detect the result of `React.createElement` / i.e. JSX. */
-function isJSX(content) {
-    return typeof content === "object" && content && "type" in content && "props" in content;
-}
-/** If a column def return just string text for a given row, apply some default styling. */
-function toContent(maybeContent, isHeader, canSortColumn, isClientSideSorting, style, as, alignment) {
-    var _a, _b;
-    let content = isGridCellContent(maybeContent) ? maybeContent.content : maybeContent;
-    if (typeof content === "function") {
-        // Actually create the JSX by calling `content()` here (which should be as late as
-        // possible, i.e. only for visible rows if we're in a virtual table).
-        content = content();
-    }
-    else if (as === "virtual" && canSortColumn && isClientSideSorting && isJSX(content)) {
-        // When using client-side sorting, we call `applyRowFn` not only during rendering, but
-        // up-front against all rows (for the currently sorted column) to determine their
-        // sort values.
-        //
-        // Pedantically this means that any table using client-side sorting should not
-        // build JSX directly in its GridColumn functions, but this overhead is especially
-        // noticeable for large/virtualized tables, so we only enforce using functions
-        // for those tables.
-        throw new Error("GridTables with as=virtual & sortable columns should use functions that return JSX, instead of JSX");
-    }
-    content =
-        isGridCellContent(maybeContent) && !!maybeContent.onClick
-            ? (0, getInteractiveElement_1.getButtonOrLink)(content, maybeContent.onClick, {
-                css: Css_1.Css.maxw100.lightBlue700.ta("inherit").if(((_a = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _a === void 0 ? void 0 : _a.wrap) === false).truncate.$,
-            })
-            : content;
-    if (content && typeof content === "string" && isHeader && canSortColumn) {
-        return (0, jsx_runtime_1.jsx)(SortHeader_1.SortHeader, { content: content, iconOnLeft: alignment === "right" }, void 0);
-    }
-    else if (content && ((_b = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _b === void 0 ? void 0 : _b.wrap) === false && typeof content === "string") {
-        // In order to truncate the text properly, then we need to wrap it in another element
-        // as our cell element is a flex container, which don't allow for applying truncation styles directly on it.
-        return ((0, jsx_runtime_1.jsx)("span", Object.assign({ css: Css_1.Css.truncate.mw0.$, title: content }, { children: content }), void 0));
-    }
-    else if (style.emptyCell && isContentEmpty(content)) {
-        // If the content is empty and the user specified an `emptyCell` node, return that.
-        return style.emptyCell;
-    }
-    return content;
-}
-function isGridCellContent(content) {
-    return typeof content === "object" && !!content && "content" in content;
-}
-const emptyValues = ["", null, undefined];
-function isContentEmpty(content) {
-    return emptyValues.includes(content);
-}
-/** Return the content for a given column def applied to a given row. */
-function applyRowFn(column, row, api, level) {
-    // Usually this is a function to apply against the row, but sometimes it's a hard-coded value, i.e. for headers
-    const maybeContent = column[row.kind];
-    if (typeof maybeContent === "function") {
-        // Auto-destructure data
-        return maybeContent(row["data"], { row: row, api, level });
-    }
-    else {
-        return maybeContent;
-    }
-}
-exports.applyRowFn = applyRowFn;
-/** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
-const defaultRenderFn = (as) => (key, css, content, row, rowStyle, classNames, onClick) => {
-    const Cell = as === "table" ? "td" : "div";
-    return ((0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as) }, className: classNames, onClick: onClick }, { children: content }), key));
-};
-/** Sets up the `GridContext` so that header cells can access the current sort settings. */
-const headerRenderFn = (columns, column, sortState, setSortKey, as) => (key, css, content, row, rowStyle, classNames) => {
-    const [currentKey, direction] = sortState || [];
-    // If server-side sorting, use the user's key for this column; client-side sorting, use the index.
-    const ourSortKey = column.serverSideSortKey || columns.indexOf(column);
-    const context = {
-        sorted: ourSortKey === currentKey ? direction : undefined,
-        toggleSort: () => setSortKey(ourSortKey),
-    };
-    const Cell = as === "table" ? "th" : "div";
-    return ((0, jsx_runtime_1.jsx)(GridSortContext_1.GridSortContext.Provider, Object.assign({ value: context }, { children: (0, jsx_runtime_1.jsx)(Cell, Object.assign({ css: { ...css, ...tableRowStyles(as, column) }, className: classNames }, { children: content }), void 0) }), key));
-};
-/** Renders a cell element when a row link is in play. */
-const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle, classNames) => {
-    const to = rowStyle.rowLink(row);
-    if (as === "table") {
-        return ((0, jsx_runtime_1.jsx)("td", Object.assign({ css: { ...css, ...tableRowStyles(as) }, className: classNames }, { children: (0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: Css_1.Css.noUnderline.color("unset").db.$, className: CssReset_1.navLink }, { children: content }), void 0) }), key));
-    }
-    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({ to: to, css: { ...Css_1.Css.noUnderline.color("unset").$, ...css }, className: `${CssReset_1.navLink} ${classNames}` }, { children: content }), key));
-};
-/** Renders a cell that will fire the RowStyle.onClick. */
-const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle, classNames, onClick) => {
-    const Row = as === "table" ? "tr" : "div";
-    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, className: classNames, onClick: (e) => {
-            rowStyle.onClick(row, api);
-            onClick && onClick();
-        } }, { children: content }), void 0));
-};
-const alignmentToJustify = {
-    left: "flex-start",
-    center: "center",
-    right: "flex-end",
-};
-const alignmentToTextAlign = {
-    left: "left",
-    center: "center",
-    right: "right",
-};
-function getAlignment(column, maybeContent) {
-    return (isGridCellContent(maybeContent) && maybeContent.alignment) || column.align || "left";
-}
-// For alignment, use: 1) cell def, else 2) column def, else 3) left.
-function getJustification(column, maybeContent, as, alignment) {
-    // Always apply text alignment.
-    const textAlign = Css_1.Css.add("textAlign", alignmentToTextAlign[alignment]).$;
-    if (as === "table") {
-        return textAlign;
-    }
-    return { ...Css_1.Css.jc(alignmentToJustify[alignment]).$, ...textAlign };
-}
-/** Look at a row and get its filter value. */
-function filterValue(value) {
-    let maybeFn = value;
-    if (value && typeof value === "object") {
-        if ("value" in value) {
-            maybeFn = value.value;
-        }
-        else if ("content" in value) {
-            maybeFn = value.content;
-        }
-    }
-    // Watch for functions that need to read from a potentially-changing proxy
-    if (maybeFn instanceof Function) {
-        return maybeFn();
-    }
-    return maybeFn;
-}
-function maybeApplyFunction(row, maybeFn) {
-    return typeof maybeFn === "function" ? maybeFn(row) : maybeFn;
-}
-function matchesFilter(maybeContent, filter) {
-    let value = filterValue(maybeContent);
-    if (typeof value === "string") {
-        return value.toLowerCase().includes(filter.toLowerCase());
-    }
-    else if (typeof value === "number") {
-        return Number(filter) === value;
-    }
-    return false;
-}
-exports.matchesFilter = matchesFilter;
-/** GridTable as Table utility to apply <tr> element override styles. */
-function tableRowStyles(as, column) {
-    const thWidth = column === null || column === void 0 ? void 0 : column.w;
-    return as === "table"
-        ? {
-            ...Css_1.Css.dtc.$,
-            ...(thWidth ? Css_1.Css.w(thWidth).$ : {}),
-        }
-        : {};
-}
-function resolveStyles(style) {
-    const defKeys = ["inlineEditing", "grouped", "rowHeight", "cellHighlight"];
-    const keys = (0, utils_1.safeKeys)(style);
-    if (keys.length === 0 || keys.some((k) => defKeys.includes(k))) {
-        return (0, styles_1.getTableStyles)(style);
-    }
-    return style;
-}
 /**
  * Filters rows given a client-side text `filter.
  *
@@ -798,7 +386,7 @@ function filterRows(api, columns, rows, filter) {
         const matches = row.kind === "header" ||
             row.kind === "totals" ||
             filters.length === 0 ||
-            filters.every((f) => columns.map((c) => applyRowFn(c, row, api, 0)).some((maybeContent) => matchesFilter(maybeContent, f)));
+            filters.every((f) => columns.map((c) => (0, utils_1.applyRowFn)(c, row, api, 0)).some((maybeContent) => (0, utils_1.matchesFilter)(maybeContent, f)));
         if (matches) {
             return acc.concat([[row, (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(acceptAll, [])) !== null && _b !== void 0 ? _b : []]]);
         }
@@ -816,3 +404,4 @@ function filterRows(api, columns, rows, filter) {
     }
     return rows.reduce(filterFn, []);
 }
+exports.filterRows = filterRows;

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

@@ -1,7 +1,8 @@
 import { MutableRefObject } from "react";
 import { VirtuosoHandle } from "react-virtuoso";
-import { DiscriminateUnion, GridDataRow, Kinded } from "./GridTable";
-import { RowState } from "./RowState";
+import { GridDataRow } from "./components/Row";
+import { DiscriminateUnion, Kinded } from "./types";
+import { RowState } from "./utils/RowState";
 /**
  * Creates an `api` handle to drive a `GridTable`.
  *

package/dist/components/Table/GridTableApi.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GridTableApiImpl = exports.useGridTableApi = void 0;
 const react_1 = require("react");
-const RowState_1 = require("./RowState");
-const visitor_1 = require("./visitor");
+const RowState_1 = require("./utils/RowState");
+const visitor_1 = require("./utils/visitor");
 /**
  * Creates an `api` handle to drive a `GridTable`.
  *

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

@@ -0,0 +1,86 @@
+import { ReactNode } from "react";
+import { PresentationContextProps, PresentationFieldProps } from "../PresentationContext";
+import { DiscriminateUnion, GridColumn, GridDataRow, GridTableApi, RenderCellFn } from "./index";
+import { Kinded, RenderAs } from "./types";
+import { Palette, Properties } from "../../Css";
+/** Completely static look & feel, i.e. nothing that is based on row kinds/content. */
+export interface GridStyle {
+    /** Applied to the base div element. */
+    rootCss?: Properties;
+    /** Applied with the owl operator between rows for rendering border lines. */
+    betweenRowsCss?: Properties;
+    /** Applied to the first non-header row, i.e. if you want to cancel out `betweenRowsCss`. */
+    firstNonHeaderRowCss?: Properties;
+    /** Applied to all cell divs (via a selector off the base div). */
+    cellCss?: Properties;
+    /**
+     * Applied to the header row divs.
+     *
+     * NOTE `as=virtual`: When using a virtual table with the goal of adding space
+     * between the header and the first row use `firstNonHeaderRowCss` with a
+     * margin-top instead. Using `headerCellCss` will not work since the header
+     * rows are wrapper with Chrome rows.
+     */
+    headerCellCss?: Properties;
+    /** Applied to 'kind: "totals"' cells */
+    totalsCellCss?: Properties;
+    /** Applied to the first cell of all rows, i.e. for table-wide padding or left-side borders. */
+    firstCellCss?: Properties;
+    /** Applied to the last cell of all rows, i.e. for table-wide padding or right-side borders. */
+    lastCellCss?: Properties;
+    /** Applied to a cell div when `indent: 1` is used. */
+    indentOneCss?: Properties;
+    /** Applied to a cell div when `indent: 2` is used. */
+    indentTwoCss?: Properties;
+    /** Applied if there is a fallback/overflow message showing. */
+    firstRowMessageCss?: Properties;
+    /** Applied on hover if a row has a rowLink/onClick set. */
+    rowHoverColor?: Palette;
+    /** Default content to put into an empty cell */
+    emptyCell?: ReactNode;
+    presentationSettings?: Pick<PresentationFieldProps, "borderless" | "typeScale"> & Pick<PresentationContextProps, "wrap">;
+    /** Minimum table width in pixels. Used when calculating columns sizes */
+    minWidthPx?: number;
+    /** Css to apply at each level of a parent/child nested table. */
+    levels?: Record<number, {
+        cellCss?: Properties;
+        firstContentColumn?: Properties;
+    }>;
+    /** Allows for customization of the background color used to denote an "active" row */
+    activeBgColor?: Palette;
+}
+export interface GridStyleDef {
+    inlineEditing?: boolean;
+    grouped?: boolean;
+    rowHeight?: "fixed" | "flexible";
+    /** Enables cells Highlight and hover */
+    cellHighlight?: boolean;
+}
+export declare const getTableStyles: (props?: GridStyleDef) => GridStyle;
+/** Defines row-specific styling for each given row `kind` in `R` */
+export declare type RowStyles<R extends Kinded> = {
+    [P in R["kind"]]?: RowStyle<DiscriminateUnion<R, "kind", P>>;
+};
+export interface RowStyle<R extends Kinded> {
+    /** Applies this css to the wrapper row, i.e. for row-level hovers. */
+    rowCss?: Properties | ((row: R) => Properties);
+    /** Applies this css to each cell in the row. */
+    cellCss?: Properties | ((row: R) => Properties);
+    /** Renders the cell element, i.e. a link to get whole-row links. */
+    renderCell?: RenderCellFn<R>;
+    /** Whether the row should be indented (via a style applied to the 1st cell). */
+    indent?: 1 | 2;
+    /** Whether the row should be a link. */
+    rowLink?: (row: R) => string;
+    /** Fired when the row is clicked, similar to rowLink but for actions that aren't 'go to this link'. */
+    onClick?: (row: GridDataRow<R>, api: GridTableApi<R>) => void;
+}
+/** Our original table look & feel/style. */
+export declare const defaultStyle: GridStyle;
+/** Tightens up the padding of rows, great for rows that have form elements in them. */
+export declare const condensedStyle: GridStyle;
+/** Renders each row as a card. */
+export declare const cardStyle: GridStyle;
+/** GridTable as Table utility to apply <tr> element override styles. */
+export declare function tableRowStyles(as: RenderAs, column?: GridColumn<any>): {};
+export declare function resolveStyles(style: GridStyle | GridStyleDef): GridStyle;