@homebound/beam 2.97.5 → 2.99.0

package/dist/components/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { MutableRefObject, ReactNode } from "react";
 import { Only, Xss } from "../../Css";
 import { Callback } from "../../types";
 export declare type ModalSize = "sm" | "md" | "lg" | "xl";
@@ -19,7 +19,12 @@ export interface ModalProps {
     forceScrolling?: boolean;
     /** Adds a callback that is called _after_ close has definitely happened. */
     onClose?: Callback;
+    /** Imperative API for interacting with the Modal */
+    api?: MutableRefObject<ModalApi | undefined>;
 }
+export declare type ModalApi = {
+    setSize: (size: ModalProps["size"]) => void;
+};
 /**
  * Internal component for displaying a Modal; see `useModal` for the public API.
  *

package/dist/components/Modal/Modal.js

@@ -20,7 +20,7 @@ const utils_1 = require("../../utils");
  * Provides underlay, modal container, and header. Will disable scrolling of page under the modal.
  */
 function Modal(props) {
-    const { size = "md", content, forceScrolling } = props;
+    const { size = "md", content, forceScrolling, api } = props;
     const isFixedHeight = typeof size !== "string";
     const ref = (0, react_1.useRef)(null);
     const { modalBodyDiv, modalFooterDiv, modalHeaderDiv, drawerContentStack } = (0, BeamContext_1.useBeamContext)();
@@ -37,13 +37,16 @@ function Modal(props) {
     }, ref);
     const { modalProps } = (0, react_aria_1.useModal)();
     const { dialogProps, titleProps } = (0, react_aria_1.useDialog)({ role: "dialog" }, ref);
-    const [width, height] = getSize(size);
+    const [[width, height], setSize] = (0, react_1.useState)(getSize(size));
     const contentRef = (0, react_1.useRef)(null);
     const modalBodyRef = (0, react_1.useRef)(null);
     const modalFooterRef = (0, react_1.useRef)(null);
     const modalHeaderRef = (0, react_1.useRef)(null);
     const testId = (0, utils_1.useTestIds)({}, testIdPrefix);
     (0, react_aria_1.usePreventScroll)();
+    if (api) {
+        api.current = { setSize: (size = "md") => setSize(getSize(size)) };
+    }
     const [hasScroll, setHasScroll] = (0, react_1.useState)(forceScrolling !== null && forceScrolling !== void 0 ? forceScrolling : false);
     (0, resize_observer_1.default)(contentRef, ({ target }) => {
         if (forceScrolling === undefined && !isFixedHeight) {

package/dist/components/Modal/useModal.d.ts

@@ -4,5 +4,6 @@ export interface UseModalHook {
     openModal: (props: ModalProps) => void;
     closeModal: Callback;
     addCanClose: (canClose: CheckFn) => void;
+    setSize: (size: ModalProps["size"]) => void;
 }
 export declare function useModal(): UseModalHook;

package/dist/components/Modal/useModal.js

@@ -7,6 +7,7 @@ const utils_1 = require("../../utils");
 function useModal() {
     const { modalState, modalCanCloseChecks } = (0, BeamContext_1.useBeamContext)();
     const lastCanClose = (0, react_1.useRef)();
+    const api = (0, react_1.useRef)();
     (0, react_1.useEffect)(() => {
         return () => {
             modalCanCloseChecks.current = modalCanCloseChecks.current.filter((c) => c !== lastCanClose.current);
@@ -16,7 +17,7 @@ function useModal() {
         openModal(props) {
             // TODO Check already open?
             // TODO Check can leave?
-            modalState.current = props;
+            modalState.current = { ...props, api };
         },
         closeModal() {
             var _a;
@@ -38,6 +39,12 @@ function useModal() {
             ];
             lastCanClose.current = canClose;
         },
+        setSize(size) {
+            var _a;
+            if (modalState.current && ((_a = modalState.current.api) === null || _a === void 0 ? void 0 : _a.current)) {
+                modalState.current.api.current.setSize(size);
+            }
+        },
     }), [modalState, modalCanCloseChecks]);
 }
 exports.useModal = useModal;

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

@@ -188,7 +188,7 @@ export declare function GridTable<R extends Kinded, S = {}, X extends Only<GridT
  *
  * When we're as=virtual, we change our default + enforce only fixed-sized units (% and px)
  */
-export declare function calcVirtualGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string;
+export declare function calcVirtualGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string[];
 export declare function calcDivGridColumns(columns: GridColumn<any>[], firstLastColumnWidth: number | undefined): string;
 /**
  * Given an ADT of type T, performs a look up and returns the type of kind K.

package/dist/components/Table/GridTable.js

@@ -103,8 +103,10 @@ function GridTable(props) {
     }, [columns, rows, sorting, sortState]);
     // Filter + flatten + component-ize the sorted rows.
     let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
+        var _a;
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
+        const columnSizes = as === "virtual" ? calcVirtualGridColumns(columns, (_a = style.nestedCards) === null || _a === void 0 ? void 0 : _a.firstLastColumnWidth) : undefined;
         function makeRowComponent(row) {
             // 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.
@@ -119,6 +121,7 @@ function GridTable(props) {
                     stickyHeader,
                     stickyOffset,
                     openCards: nestedCards ? nestedCards.currentOpenCards() : undefined,
+                    columnSizes,
                     ...sortProps,
                 }), `${row.kind}-${row.id}`) }), `${row.kind}-${row.id}`));
         }
@@ -302,12 +305,9 @@ function renderVirtual(style, id, columns, headerRows, filteredRows, firstRowMes
 const VirtualRoot = (0, memoize_one_1.default)((gs, columns, id, firstLastColumnWidth, xss) => {
     return react_1.default.forwardRef(function VirtualRoot({ style, children }, ref) {
         // This re-renders each time we have new children in the view port
-        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: style, css: {
-                ...Css_1.Css.dg.gtc(calcVirtualGridColumns(columns, firstLastColumnWidth)).$,
+        return ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, style: { ...style, ...(gs.nestedCards ? { minWidth: "fit-content" } : {}) }, css: {
                 // Add an extra `> div` due to Item + itemContent both having divs
                 ...Css_1.Css.addIn("& > div + div > div > *", gs.betweenRowsCss || {}).$,
-                // Add `display:contents` to Item to flatten it like we do GridRow
-                ...Css_1.Css.addIn("& > div", Css_1.Css.display("contents").$).$,
                 ...gs.rootCss,
                 ...xss,
             }, "data-testid": id }, { children: children }), void 0));
@@ -355,7 +355,7 @@ function calcVirtualGridColumns(columns, firstLastColumnWidth) {
     }, { claimedPercentages: 0, claimedPixels: firstLastColumnWidth ? firstLastColumnWidth * 2 : 0, totalFr: 0 });
     // This is our "fake but for some reason it lines up better" fr calc
     function fr(myFr) {
-        return `calc((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`;
+        return `((100% - ${claimedPercentages}% - ${claimedPixels}px) * (${myFr} / ${totalFr}))`;
     }
     let sizes = columns.map(({ w }) => {
         if (typeof w === "undefined") {
@@ -394,12 +394,12 @@ function calcDivGridColumns(columns, firstLastColumnWidth) {
             return `${w}fr`;
         }
     });
-    return maybeAddCardColumns(sizes, firstLastColumnWidth);
+    return maybeAddCardColumns(sizes, firstLastColumnWidth).join(" ");
 }
 exports.calcDivGridColumns = calcDivGridColumns;
 // If we're doing nested cards, we add extra 1st/last cells...
 function maybeAddCardColumns(sizes, firstLastColumnWidth) {
-    return (!firstLastColumnWidth ? sizes : [`${firstLastColumnWidth}px`, ...sizes, `${firstLastColumnWidth}px`]).join(" ");
+    return !firstLastColumnWidth ? sizes : [`${firstLastColumnWidth}px`, ...sizes, `${firstLastColumnWidth}px`];
 }
 function getIndentationCss(style, rowStyle, columnIndex, maybeContent) {
     // Look for cell-specific indent or row-specific indent (row-specific is only one the first column)
@@ -414,7 +414,7 @@ function getFirstOrLastCellCss(style, columnIndex, columns) {
 }
 // We extract GridRow to its own mini-component primarily so we can React.memo'ize it.
 function GridRow(props) {
-    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, ...others } = props;
+    const { as, columns, row, style, rowStyles, stickyHeader, stickyOffset, sorting, sortState, setSortKey, openCards, columnSizes, ...others } = props;
     // We treat the "header" kind as special for "good defaults" styling
     const isHeader = row.kind === "header";
     const rowStyle = rowStyles === null || rowStyles === void 0 ? void 0 : rowStyles[row.kind];
@@ -425,7 +425,8 @@ function GridRow(props) {
         // root-element > row-element > cell-elements, so that we can have a hook for
         // hovers and styling. In theory this would change with subgrids.
         // Only enable when using div as elements
-        ...(as === "table" ? {} : Css_1.Css.display("contents").$),
+        // For virtual tables use `display: flex` to keep all cells on the same row, but use `flexNone` to ensure the cells stay their defined widths
+        ...(as === "table" ? {} : as === "virtual" ? Css_1.Css.df.addIn("&>*", Css_1.Css.flexNone.$).$ : Css_1.Css.display("contents").$),
         ...(((rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.onClick)) &&
             style.rowHoverColor && {
             // Even though backgroundColor is set on the cellCss (due to display: content), the hover target is the row.
@@ -443,7 +444,11 @@ function GridRow(props) {
     const currentCard = openCardStyles && openCardStyles[openCardStyles.length - 1];
     let currentColspan = 1;
     const maybeStickyHeaderStyles = isHeader && stickyHeader ? Css_1.Css.sticky.top(stickyOffset).z1.$ : undefined;
-    return ((0, jsx_runtime_1.jsxs)(Row, Object.assign({ css: rowCss }, others, { children: [openCardStyles && (0, nestedCards_1.maybeAddCardPadding)(openCardStyles, "first", maybeStickyHeaderStyles), columns.map((column, columnIndex) => {
+    return ((0, jsx_runtime_1.jsxs)(Row, Object.assign({ css: rowCss }, others, { children: [openCardStyles &&
+                (0, nestedCards_1.maybeAddCardPadding)(openCardStyles, "first", {
+                    ...maybeStickyHeaderStyles,
+                    ...(columnSizes ? Css_1.Css.w(columnSizes[0]).$ : {}),
+                }), columns.map((column, columnIndex) => {
                 var _a;
                 // Decrement colspan count and skip if greater than 1.
                 if (currentColspan > 1) {
@@ -456,6 +461,7 @@ function GridRow(props) {
                     ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "server" && !!column.serverSideSortKey);
                 const content = toContent(maybeContent, isHeader, canSortColumn, (sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client", style, as);
                 (0, sortRows_1.ensureClientSideSortValueIsSortable)(sorting, isHeader, column, columnIndex, maybeContent);
+                const maybeNestedCardColumnIndex = columnIndex + (style.nestedCards ? 1 : 0);
                 // 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
@@ -477,6 +483,10 @@ function GridRow(props) {
                     ...getIndentationCss(style, rowStyle, columnIndex, maybeContent),
                     // Then apply any header-specific override
                     ...(isHeader && style.headerCellCss),
+                    // Non-virtualized tables use h100 so that all cells are the same height across the row.
+                    // Virtualized table rows use `display: flex;`, so the flex children are set to `align-self: stretch` by default, which achieves the same goal.
+                    // Though, we need to omit setting `h100` on the flex children, as a flex container needs a defined height set for `h100` to work on flex children
+                    ...(isHeader && as !== "virtual" ? Css_1.Css.h100.$ : undefined),
                     ...maybeStickyHeaderStyles,
                     // If we're within a card, use its background color
                     ...(currentCard && Css_1.Css.bgColor(currentCard.bgColor).$),
@@ -484,6 +494,12 @@ function GridRow(props) {
                     ...(currentColspan > 1 ? Css_1.Css.gc(`span ${currentColspan}`).$ : {}),
                     // And finally the specific cell's css (if any from GridCellContent)
                     ...rowStyleCellCss,
+                    // For virtual tables we define the width of the column on each cell. Supports col spans.
+                    ...(columnSizes && {
+                        width: `calc(${columnSizes
+                            .slice(maybeNestedCardColumnIndex, maybeNestedCardColumnIndex + currentColspan)
+                            .join(" + ")})`,
+                    }),
                 };
                 const renderFn = (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.renderCell) || (rowStyle === null || rowStyle === void 0 ? void 0 : rowStyle.rowLink)
                     ? rowLinkRenderFn(as)
@@ -493,7 +509,11 @@ function GridRow(props) {
                             ? rowClickRenderFn(as)
                             : defaultRenderFn(as);
                 return renderFn(columnIndex, cellCss, content, row, rowStyle);
-            }), openCardStyles && (0, nestedCards_1.maybeAddCardPadding)(openCardStyles, "final", maybeStickyHeaderStyles)] }), void 0));
+            }), openCardStyles &&
+                (0, nestedCards_1.maybeAddCardPadding)(openCardStyles, "final", {
+                    ...maybeStickyHeaderStyles,
+                    ...(columnSizes ? Css_1.Css.w(columnSizes[columnSizes.length - 1]).$ : {}),
+                })] }), void 0));
 }
 // Fix to work with generics, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
 const MemoizedGridRow = react_1.default.memo(GridRow);

package/dist/components/Table/styles.js

@@ -12,8 +12,7 @@ exports.defaultStyle = {
     lastCellCss: Css_1.Css.$,
     indentOneCss: Css_1.Css.pl4.$,
     indentTwoCss: Css_1.Css.pl7.$,
-    // Use h100 so that all cells are the same height when scrolled; set bgWhite for when we're laid over other rows.
-    headerCellCss: Css_1.Css.asfe.nowrap.py1.bgGray100.h100.aife.$,
+    headerCellCss: Css_1.Css.nowrap.py1.bgGray100.aife.$,
     firstRowMessageCss: Css_1.Css.px1.py2.$,
     rowHoverColor: Css_1.Palette.Gray200,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.97.5",
+  "version": "2.99.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -48,7 +48,7 @@
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-stately": "^3.9.0",
-    "react-virtuoso": "^2.3.1",
+    "react-virtuoso": "^2.4.0",
     "tinycolor2": "^1.4.2",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",