@homebound/beam 2.187.0 → 2.187.1

package/dist/components/Table/{styles.js → TableStyles.js}

@@ -1,8 +1,44 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTableStyles = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = void 0;
+exports.resolveStyles = exports.tableRowStyles = exports.cardStyle = exports.condensedStyle = exports.defaultStyle = exports.getTableStyles = void 0;
 const Css_1 = require("../../Css");
 const utils_1 = require("../../utils");
+// Returns a "blessed" style of GridTable
+function memoizedTableStyles() {
+    const cache = {};
+    return (props = {}) => {
+        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false } = props;
+        const key = (0, utils_1.safeKeys)(props)
+            .sort()
+            .map((k) => `${k}_${props[k]}`)
+            .join("|");
+        if (!cache[key]) {
+            const groupedLevels = {
+                0: {
+                    cellCss: Css_1.Css.xsMd.mhPx(56).gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
+                    firstContentColumn: Css_1.Css.smMd.$,
+                },
+                2: { firstContentColumn: Css_1.Css.tiny.pl3.$ },
+            };
+            const defaultLevels = { 1: { firstContentColumn: Css_1.Css.tiny.pl3.$ } };
+            cache[key] = {
+                emptyCell: "-",
+                firstRowMessageCss: Css_1.Css.tc.py3.$,
+                headerCellCss: Css_1.Css.gray700.xsMd.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
+                totalsCellCss: Css_1.Css.bgWhite.gray700.smMd.hPx(52).pt0.pbPx(12).boxShadow("none").$,
+                cellCss: {
+                    ...Css_1.Css.gray900.xs.bgWhite.aic.pxPx(12).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
+                    ...(rowHeight === "flexible" ? Css_1.Css.pyPx(12).$ : Css_1.Css.nowrap.hPx(inlineEditing ? 48 : 36).$),
+                    ...(cellHighlight ? { "&:hover": Css_1.Css.bgGray100.$ } : {}),
+                },
+                presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
+                levels: grouped ? groupedLevels : defaultLevels,
+            };
+        }
+        return cache[key];
+    };
+}
+exports.getTableStyles = memoizedTableStyles();
 /** Our original table look & feel/style. */
 exports.defaultStyle = {
     rootCss: Css_1.Css.gray700.$,
@@ -42,38 +78,23 @@ exports.cardStyle = {
         }).p1.m0.xsMd.gray700.$,
     },
 };
-function memoizedTableStyles() {
-    const cache = {};
-    return (props = {}) => {
-        const { inlineEditing = false, grouped = false, rowHeight = "flexible", cellHighlight = false } = props;
-        const key = (0, utils_1.safeKeys)(props)
-            .sort()
-            .map((k) => `${k}_${props[k]}`)
-            .join("|");
-        if (!cache[key]) {
-            const groupedLevels = {
-                0: {
-                    cellCss: Css_1.Css.xsMd.mhPx(56).gray700.bgGray100.boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
-                    firstContentColumn: Css_1.Css.smMd.$,
-                },
-                2: { firstContentColumn: Css_1.Css.tiny.pl3.$ },
-            };
-            const defaultLevels = { 1: { firstContentColumn: Css_1.Css.tiny.pl3.$ } };
-            cache[key] = {
-                emptyCell: "-",
-                firstRowMessageCss: Css_1.Css.tc.py3.$,
-                headerCellCss: Css_1.Css.gray700.xsMd.bgGray200.aic.nowrap.pxPx(12).hPx(40).$,
-                totalsCellCss: Css_1.Css.bgWhite.gray700.smMd.hPx(52).pt0.pbPx(12).boxShadow("none").$,
-                cellCss: {
-                    ...Css_1.Css.gray900.xs.bgWhite.aic.pxPx(12).boxShadow(`inset 0 -1px 0 ${Css_1.Palette.Gray200}`).$,
-                    ...(rowHeight === "flexible" ? Css_1.Css.pyPx(12).$ : Css_1.Css.nowrap.hPx(inlineEditing ? 48 : 36).$),
-                    ...(cellHighlight ? { "&:hover": Css_1.Css.bgGray100.$ } : {}),
-                },
-                presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
-                levels: grouped ? groupedLevels : defaultLevels,
-            };
+/** 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).$ : {}),
         }
-        return cache[key];
-    };
+        : {};
 }
-exports.getTableStyles = memoizedTableStyles();
+exports.tableRowStyles = tableRowStyles;
+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, exports.getTableStyles)(style);
+    }
+    return style;
+}
+exports.resolveStyles = resolveStyles;

package/dist/components/Table/{CollapseToggle.d.ts → components/CollapseToggle.d.ts}

@@ -1,4 +1,4 @@
-import { GridDataRow, IconButtonProps } from "..";
+import { GridDataRow, IconButtonProps } from "../../index";
 export interface GridTableCollapseToggleProps extends Pick<IconButtonProps, "compact"> {
     row: GridDataRow<any>;
 }

package/dist/components/Table/{CollapseToggle.js → components/CollapseToggle.js}

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollapseToggle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const components_1 = require("..");
-const hooks_1 = require("../../hooks");
+const index_1 = require("../../index");
+const hooks_1 = require("../../../hooks");
 /** Provides a chevron icons to collapse/un-collapse for parent/child tables. */
 function CollapseToggle(props) {
     const { row, compact } = props;
-    const { rowState } = (0, react_1.useContext)(components_1.RowStateContext);
+    const { rowState } = (0, react_1.useContext)(index_1.RowStateContext);
     const isCollapsed = (0, hooks_1.useComputed)(() => rowState.isCollapsed(row.id), [rowState]);
     const iconKey = isCollapsed ? "chevronRight" : "chevronDown";
     const headerIconKey = isCollapsed ? "chevronsRight" : "chevronsDown";
@@ -17,6 +17,6 @@ function CollapseToggle(props) {
     if (!isHeader && (!row.children || row.children.length === 0)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(components_1.IconButton, { onClick: () => rowState.toggleCollapsed(row.id), icon: isHeader ? headerIconKey : iconKey, compact: compact }, void 0));
+    return ((0, jsx_runtime_1.jsx)(index_1.IconButton, { onClick: () => rowState.toggleCollapsed(row.id), icon: isHeader ? headerIconKey : iconKey, compact: compact }, void 0));
 }
 exports.CollapseToggle = CollapseToggle;

package/dist/components/Table/{EditColumnsButton.d.ts → components/EditColumnsButton.d.ts}

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
-import { OverlayTriggerProps } from "../internal/OverlayTrigger";
-import { GridColumn, Kinded } from "./GridTable";
+import { OverlayTriggerProps } from "../../internal/OverlayTrigger";
+import { GridColumn, Kinded } from "../types";
 interface EditColumnsButtonProps<R extends Kinded, S> extends Pick<OverlayTriggerProps, "trigger" | "placement" | "disabled" | "tooltip"> {
     allColumns: GridColumn<R, S>[];
     selectedColumns: GridColumn<R, S>[];

package/dist/components/Table/{EditColumnsButton.js → components/EditColumnsButton.js}

@@ -5,11 +5,11 @@ const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
-const inputs_1 = require("../../inputs");
-const Css_1 = require("../../Css");
-const utils_1 = require("../../utils");
-const Button_1 = require("../Button");
-const OverlayTrigger_1 = require("../internal/OverlayTrigger");
+const Button_1 = require("../../Button");
+const OverlayTrigger_1 = require("../../internal/OverlayTrigger");
+const Css_1 = require("../../../Css");
+const inputs_1 = require("../../../inputs");
+const utils_1 = require("../../../utils");
 function EditColumnsButton(props) {
     const { defaultOpen, disabled, allColumns, setSelectedColumns, trigger, title, selectedColumns } = props;
     const state = (0, react_stately_1.useMenuTriggerState)({ isOpen: defaultOpen });

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

@@ -0,0 +1,71 @@
+import { ReactElement } from "react";
+import { GridTableApi } from "../GridTableApi";
+import { SortOn, SortState } from "../hooks/useSortState";
+import { GridStyle, RowStyles } from "../TableStyles";
+import { DiscriminateUnion, GridColumn, IfAny, Kinded, Pin, RenderAs } from "../types";
+interface RowProps<R extends Kinded, S> {
+    as: RenderAs;
+    columns: GridColumn<R>[];
+    row: GridDataRow<R>;
+    style: GridStyle;
+    rowStyles: RowStyles<R> | undefined;
+    stickyHeader: boolean;
+    stickyOffset: number;
+    sortOn: SortOn;
+    sortState?: SortState<S>;
+    setSortKey?: (value: S) => void;
+    columnSizes: string[];
+    level: number;
+    getCount: (id: string) => object;
+    api: GridTableApi<R>;
+    cellHighlight: boolean;
+}
+declare function RowImpl<R extends Kinded, S>(props: RowProps<R, S>): ReactElement;
+/**
+ * Memoizes Rows so that re-rendering the table doesn't re-render every single row.
+ *
+ * We use a custom `propsAreEqual` for the `RowProps.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.
+ */
+export declare const Row: typeof RowImpl;
+/** A specific kind of row, including the GridDataRow props. */
+export declare type GridRowKind<R extends Kinded, P extends R["kind"]> = DiscriminateUnion<R, "kind", P> & {
+    id: string;
+    children: GridDataRow<R>[];
+    selectable?: false;
+};
+/**
+ * The data for any row in the table, marked by `kind` so that each column knows how to render it.
+ *
+ * Each `kind` should contain very little presentation logic, i.e. mostly just off-the-wire data from
+ * a GraphQL query.
+ *
+ * The presentation concerns instead mainly live in each GridColumn definition, which will format/render
+ * each kind's data for that specific row+column (i.e. cell) combination.
+ */
+export declare type GridDataRow<R extends Kinded> = {
+    kind: R["kind"];
+    /** Combined with the `kind` to determine a table wide React key. */
+    id: string;
+    /** A list of parent/grand-parent ids for collapsing parent/child rows. */
+    children?: GridDataRow<R>[];
+    /** * Whether to pin this sort to the first/last of its parent's children.
+     *
+     * By default, pinned rows are always shown/not filtered out, however providing
+     * the pin `filter: true` property will allow pinned rows to be hidden
+     * while filtering.*/
+    pin?: "first" | "last" | Pin;
+    data: unknown;
+    /** Whether to have the row collapsed (children not visible) on initial load. This will be ignore in subsequent re-renders of the table */
+    initCollapsed?: boolean;
+    /** Whether to have the row selected on initial load. This will be ignore in subsequent re-renders of the table */
+    initSelected?: boolean;
+    /** Whether row can be selected */
+    selectable?: false;
+} & IfAny<R, {}, DiscriminateUnion<R, "kind", R["kind"]>>;
+export {};

package/dist/components/Table/components/Row.js

@@ -0,0 +1,177 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const mobx_react_1 = require("mobx-react");
+const react_1 = __importStar(require("react"));
+const cell_1 = require("./cell");
+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 shallowEqual_1 = require("../../../utils/shallowEqual");
+// We extract Row to its own mini-component primarily so we can React.memo'ize it.
+function RowImpl(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 RowTag = as === "table" ? "tr" : "div";
+    const revealOnRowHoverClass = "revealOnRowHover";
+    const rowStyleCellCss = (0, utils_1.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).$,
+        }),
+        ...(0, utils_1.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)(RowTag, 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 = (0, utils_1.applyRowFn)(column, row, api, level);
+            currentColspan = (0, utils_1.isGridCellContent)(maybeContent) ? (_a = maybeContent.colspan) !== null && _a !== void 0 ? _a : 1 : 1;
+            const revealOnRowHover = (0, utils_1.isGridCellContent)(maybeContent) ? maybeContent.revealOnRowHover : false;
+            const canSortColumn = (sortOn === "client" && column.clientSideSort !== false) ||
+                (sortOn === "server" && !!column.serverSideSortKey);
+            const alignment = (0, utils_1.getAlignment)(column, maybeContent);
+            const justificationCss = (0, utils_1.getJustification)(column, maybeContent, as, alignment);
+            const content = (0, utils_1.toContent)(maybeContent, isHeader, canSortColumn, sortOn === "client", style, as, alignment);
+            (0, sortRows_1.ensureClientSideSortValueIsSortable)(sortOn, isHeader, column, columnIndex, maybeContent);
+            const maybeSticky = (_b = (((0, utils_1.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
+                ...(0, utils_1.getFirstOrLastCellCss)(style, columnIndex, columns),
+                // Then override with per-cell/per-row justification/indentation
+                ...justificationCss,
+                ...(0, utils_1.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
+                ...((0, utils_1.isGridCellContent)(maybeContent) && maybeContent.typeScale ? Css_1.Css[maybeContent.typeScale].$ : {}),
+                // And any cell specific css
+                ...((0, utils_1.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
+                ? (0, cell_1.rowLinkRenderFn)(as)
+                : isHeader
+                    ? (0, cell_1.headerRenderFn)(columns, column, sortState, setSortKey, as)
+                    : (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick) && wrapAction
+                        ? (0, cell_1.rowClickRenderFn)(as, api)
+                        : (0, cell_1.defaultRenderFn)(as);
+            return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames, cellOnClick);
+        }) }), void 0));
+}
+/**
+ * Memoizes Rows so that re-rendering the table doesn't re-render every single row.
+ *
+ * We use a custom `propsAreEqual` for the `RowProps.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 RowImpl` to work with generics, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
+exports.Row = react_1.default.memo((0, mobx_react_1.observer)(RowImpl), (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);
+});

package/dist/components/Table/{SelectToggle.js → components/SelectToggle.js}

@@ -3,15 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectToggle = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const RowState_1 = require("./RowState");
-const index_1 = require("../../hooks/index");
-const index_2 = require("../../inputs/index");
+const RowState_1 = require("../utils/RowState");
+const hooks_1 = require("../../../hooks");
+const inputs_1 = require("../../../inputs");
 /** Provides a checkbox to show/drive this row's selected state. */
 function SelectToggle({ id, disabled }) {
     const { rowState } = (0, react_1.useContext)(RowState_1.RowStateContext);
-    const state = (0, index_1.useComputed)(() => rowState.getSelected(id), [rowState]);
+    const state = (0, hooks_1.useComputed)(() => rowState.getSelected(id), [rowState]);
     const selected = state === "checked" ? true : state === "unchecked" ? false : "indeterminate";
-    return ((0, jsx_runtime_1.jsx)(index_2.Checkbox, { checkboxOnly: true, disabled: disabled, label: "Select", onChange: (selected) => {
+    return ((0, jsx_runtime_1.jsx)(inputs_1.Checkbox, { checkboxOnly: true, disabled: disabled, label: "Select", onChange: (selected) => {
             rowState.selectRow(id, selected);
         }, selected: selected }, void 0));
 }

package/dist/components/Table/{SortHeader.d.ts → components/SortHeader.d.ts}

@@ -1,4 +1,4 @@
-import { Properties } from "../../Css";
+import { Properties } from "../../../Css";
 /**
  * Wraps column header names with up/down sorting icons.
  *

package/dist/components/Table/{SortHeader.js → components/SortHeader.js}

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SortHeader = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const Icon_1 = require("../Icon");
-const GridSortContext_1 = require("./GridSortContext");
-const Css_1 = require("../../Css");
-const hooks_1 = require("../../hooks");
-const useTestIds_1 = require("../../utils/useTestIds");
+const Icon_1 = require("../../Icon");
+const GridSortContext_1 = require("../utils/GridSortContext");
+const Css_1 = require("../../../Css");
+const hooks_1 = require("../../../hooks");
+const useTestIds_1 = require("../../../utils/useTestIds");
 /**
  * Wraps column header names with up/down sorting icons.
  *

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

@@ -0,0 +1,41 @@
+import { ReactNode } from "react";
+import { GridTableApi } from "../GridTableApi";
+import { SortState } from "../hooks/useSortState";
+import { RowStyle } from "../TableStyles";
+import { GridCellAlignment, GridColumn, Kinded, MaybeFn, RenderAs } from "../types";
+import { Properties, Typography } from "../../../Css";
+/**
+ * Allows a cell to be more than just a RectNode, i.e. declare its alignment or
+ * primitive value for filtering and sorting.
+ */
+export declare type GridCellContent = {
+    /** The JSX content of the cell. Virtual tables that client-side sort should use a function to avoid perf overhead. */
+    content: ReactNode | (() => ReactNode);
+    alignment?: GridCellAlignment;
+    /** Allow value to be a function in case it's a dynamic value i.e. reading from an inline-edited proxy. */
+    value?: MaybeFn<number | string | Date | boolean | null | undefined>;
+    /** The value to use specifically for sorting (i.e. if `value` is used for filtering); defaults to `value`. */
+    sortValue?: MaybeFn<number | string | Date | boolean | null | undefined>;
+    /** Whether to indent the cell. */
+    indent?: 1 | 2;
+    colspan?: number;
+    typeScale?: Typography;
+    /** Allows the cell to stay in place when the user scrolls horizontally, i.e. frozen columns. */
+    sticky?: "left" | "right";
+    /** If provided, content of the cell will be wrapped within a <button /> or <a /> tag depending on if the value is a function or a string. */
+    onClick?: () => {} | string;
+    /** Custom css to apply directly to this cell, i.e. cell-specific borders. */
+    css?: Properties;
+    /** Allows cell to reveal content when the user hovers over a row. Content must be wrapped in an element in order to be hidden. IE <div>{value}</div>*/
+    revealOnRowHover?: true;
+};
+/** Allows rendering a specific cell. */
+export declare type RenderCellFn<R extends Kinded> = (idx: number, css: Properties, content: ReactNode, row: R, rowStyle: RowStyle<R> | undefined, classNames: string | undefined, onClick: (() => void) | undefined) => ReactNode;
+/** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
+export declare const defaultRenderFn: (as: RenderAs) => RenderCellFn<any>;
+/** Sets up the `GridContext` so that header cells can access the current sort settings. */
+export declare const headerRenderFn: (columns: GridColumn<any>[], column: GridColumn<any>, sortState: SortState<any> | undefined, setSortKey: Function | undefined, as: RenderAs) => RenderCellFn<any>;
+/** Renders a cell element when a row link is in play. */
+export declare const rowLinkRenderFn: (as: RenderAs) => RenderCellFn<any>;
+/** Renders a cell that will fire the RowStyle.onClick. */
+export declare const rowClickRenderFn: (as: RenderAs, api: GridTableApi<any>) => RenderCellFn<any>;

package/dist/components/Table/components/cell.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rowClickRenderFn = exports.rowLinkRenderFn = exports.headerRenderFn = exports.defaultRenderFn = void 0;
+const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const CssReset_1 = require("../../CssReset");
+const TableStyles_1 = require("../TableStyles");
+const GridSortContext_1 = require("../utils/GridSortContext");
+const Css_1 = require("../../../Css");
+/** 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, ...(0, TableStyles_1.tableRowStyles)(as) }, className: classNames, onClick: onClick }, { children: content }), key));
+};
+exports.defaultRenderFn = defaultRenderFn;
+/** 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, ...(0, TableStyles_1.tableRowStyles)(as, column) }, className: classNames }, { children: content }), void 0) }), key));
+};
+exports.headerRenderFn = headerRenderFn;
+/** 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, ...(0, TableStyles_1.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));
+};
+exports.rowLinkRenderFn = rowLinkRenderFn;
+/** 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, ...(0, TableStyles_1.tableRowStyles)(as) }, className: classNames, onClick: (e) => {
+            rowStyle.onClick(row, api);
+            onClick && onClick();
+        } }, { children: content }), void 0));
+};
+exports.rowClickRenderFn = rowClickRenderFn;

package/dist/components/Table/{useColumns.d.ts → hooks/useColumns.d.ts}

@@ -1,3 +1,3 @@
 import { Dispatch, SetStateAction } from "react";
-import { GridColumn, Kinded } from "./GridTable";
+import { GridColumn, Kinded } from "../types";
 export declare function useColumns<R extends Kinded, S = {}>(tableColumns: GridColumn<R, S>[], maybeStorageKey?: string): [GridColumn<R, S>[], Dispatch<SetStateAction<GridColumn<R, S>[]>>];

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useColumns = void 0;
 const change_case_1 = require("change-case");
 const react_1 = require("react");
-const useSessionStorage_1 = require("../../hooks/useSessionStorage");
+const useSessionStorage_1 = require("../../../hooks/useSessionStorage");
 function useColumns(tableColumns, maybeStorageKey) {
     const { selectedColumns, hideColumns } = tableColumns.reduce((acc, column) => {
         // Only include options that can be hidden and have the `name` property defined.

package/dist/components/Table/{columnSizes.d.ts → hooks/useSetupColumnSizes.d.ts}

@@ -1,5 +1,6 @@
 import { MutableRefObject } from "react";
-import { GridColumn, GridStyle } from "./GridTable";
+import { GridStyle } from "../TableStyles";
+import { GridColumn } from "../types";
 /**
  * Calculates an array of sizes for each of our columns.
  *

package/dist/components/Table/{columnSizes.js → hooks/useSetupColumnSizes.js}

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSetupColumnSizes = void 0;
 const utils_1 = require("@react-aria/utils");
 const react_1 = require("react");
-const GridTable_1 = require("./GridTable");
+const columns_1 = require("../utils/columns");
 const use_debounce_1 = require("use-debounce");
 /**
  * Calculates an array of sizes for each of our columns.
@@ -31,10 +31,10 @@ function useSetupColumnSizes(style, columns, resizeRef) {
     const calculateImmediately = (0, react_1.useRef)(true);
     const [tableWidth, setTableWidth] = (0, react_1.useState)();
     // Calc our initial/first render sizes where we won't have a width yet
-    const [columnSizes, setColumnSizes] = (0, react_1.useState)((0, GridTable_1.calcColumnSizes)(columns, tableWidth, style.minWidthPx));
+    const [columnSizes, setColumnSizes] = (0, react_1.useState)((0, columns_1.calcColumnSizes)(columns, tableWidth, style.minWidthPx));
     const setTableAndColumnWidths = (0, react_1.useCallback)((width) => {
         setTableWidth(width);
-        setColumnSizes((0, GridTable_1.calcColumnSizes)(columns, width, style.minWidthPx));
+        setColumnSizes((0, columns_1.calcColumnSizes)(columns, width, style.minWidthPx));
     }, [setTableWidth, setColumnSizes, columns, style]);
     // Used to recalculate our columns sizes when columns change
     (0, react_1.useEffect)(() => {

package/dist/components/Table/{useSortState.d.ts → hooks/useSortState.d.ts}

@@ -1,4 +1,5 @@
-import { Direction, GridColumn, GridSortConfig, Kinded } from "./GridTable";
+import { GridSortConfig } from "../GridTable";
+import { Direction, GridColumn, Kinded } from "../types";
 /**
  * Our internal sorting state.
  *