@homebound/beam 2.315.1 → 2.316.0

package/dist/components/Table/GridTable.js

@@ -32,6 +32,7 @@ const memoize_one_1 = __importDefault(require("memoize-one"));
 const mobx_1 = require("mobx");
 const react_1 = __importStar(require("react"));
 const react_virtuoso_1 = require("react-virtuoso");
+const components_1 = require("..");
 const PresentationContext_1 = require("../PresentationContext");
 const GridTableApi_1 = require("./GridTableApi");
 const useSetupColumnSizes_1 = require("./hooks/useSetupColumnSizes");
@@ -42,6 +43,7 @@ const utils_1 = require("./utils/utils");
 const Css_1 = require("../../Css");
 const hooks_1 = require("../../hooks");
 const useRenderCount_1 = require("../../hooks/useRenderCount");
+const utils_2 = require("../../utils");
 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. */
@@ -276,11 +278,15 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
         const { paddingBottom, ...otherRootStyles } = (_a = style.rootCss) !== null && _a !== void 0 ? _a : {};
         return { footerStyle: { paddingBottom }, listStyle: { ...style, rootCss: otherRootStyles } };
     }, [style]);
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [fetchMoreInProgress, setFetchMoreInProgress] = (0, react_1.useState)(false);
     return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { overscan: 5, ref: virtuosoRef, components: {
             // Applying a zIndex: 2 to ensure it stays on top of sticky columns
             TopItemList: react_1.default.forwardRef((props, ref) => ((0, jsx_runtime_1.jsx)("div", { ...props, ref: ref, style: { ...props.style, ...{ zIndex: utils_1.zIndices.stickyHeader } } }))),
             List: VirtualRoot(listStyle, columns, id, xss),
-            Footer: () => (0, jsx_runtime_1.jsx)("div", { css: footerStyle }),
+            Footer: () => {
+                return ((0, jsx_runtime_1.jsx)("div", { css: footerStyle, children: fetchMoreInProgress && ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h5.df.aic.jcc.$, children: (0, jsx_runtime_1.jsx)(components_1.Loader, { size: "xs" }) })) }));
+            },
         }, 
         // Pin/sticky both the header row(s) + firstRowMessage to the top
         topItemCount: stickyHeader ? tableHeadRows.length : 0, itemContent: (index) => {
@@ -316,7 +322,15 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
                 // Add a `index > 0` check b/c Virtuoso is calling this in storybook
                 // with `endReached(0)` at odd times, like on page unload/story load,
                 // which then causes our test data to have duplicate ids in it.
-                endReached: (index) => (index > 0 ? infiniteScroll.onEndReached(index) : 0),
+                endReached: (index) => {
+                    if (index === 0)
+                        return;
+                    const result = infiniteScroll.onEndReached(index);
+                    if ((0, utils_2.isPromise)(result)) {
+                        setFetchMoreInProgress(true);
+                        result.finally(() => setFetchMoreInProgress(false));
+                    }
+                },
             }
             : {}) }));
 }

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

@@ -104,8 +104,8 @@ export type Pin = {
 };
 export type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 export type InfiniteScroll = {
-    /** will be called when the user scrolls to the end of the list with the last item index as an argument.  */
-    onEndReached: (index: number) => void;
+    /** will be called when the user scrolls to the end of the list with the last item index as an argument. Return a promise to automatically show a loading spinner.  */
+    onEndReached: (index: number) => void | Promise<void>;
     /** The number of pixels from the bottom of the list to eagerly trigger `onEndReached`. The default is 500px. */
     endOffsetPx?: number;
 };

package/dist/utils/rtl.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "type", { enumerable: true, get: function () { re
 Object.defineProperty(exports, "typeAndWait", { enumerable: true, get: function () { return rtl_utils_1.typeAndWait; } });
 Object.defineProperty(exports, "wait", { enumerable: true, get: function () { return rtl_utils_1.wait; } });
 const react_1 = require("@testing-library/react");
+const mobx_utils_1 = require("mobx-utils");
 const components_1 = require("../components");
 function render(component, wrapperOrOpts, ...otherWrappers) {
     let wrappers;
@@ -49,7 +50,7 @@ function cellOf(r, tableTestId, rowNum, column) {
 exports.cellOf = cellOf;
 function cellAnd(r, row, column, testId) {
     return (cell(r, row, column).querySelector(`[data-testid="${testId}"]`) ||
-        fail(`Element not found ${(0, react_1.prettyDOM)(cell(r, row, column))}`));
+        (0, mobx_utils_1.fail)(`Element not found ${(0, react_1.prettyDOM)(cell(r, row, column))}`));
 }
 exports.cellAnd = cellAnd;
 function row(r, row, tableTestId = "gridTable") {
@@ -59,7 +60,7 @@ function row(r, row, tableTestId = "gridTable") {
 exports.row = row;
 function rowAnd(r, rowNum, testId) {
     const e = row(r, rowNum);
-    return e.querySelector(`[data-testid="${testId}"]`) || fail(`Element not found ${(0, react_1.prettyDOM)(e)}`);
+    return e.querySelector(`[data-testid="${testId}"]`) || (0, mobx_utils_1.fail)(`Element not found ${(0, react_1.prettyDOM)(e)}`);
 }
 exports.rowAnd = rowAnd;
 /** Intended to be used to generate a human-readable text
@@ -168,9 +169,7 @@ function ensureListBoxOpen(select) {
     }
 }
 function selectOption(select, optionValue) {
-    const body = select.closest("body");
-    const listboxId = select.getAttribute("aria-controls");
-    const listbox = body.querySelector(`#${listboxId}`);
+    const listbox = findListBox(select);
     const options = listbox.querySelectorAll("[role=option]");
     // Allow searching for options by their data-key (value) or textContent (label)
     const optionToSelect = Array.from(options).find((o) => o.dataset.key === optionValue || o.dataset.label === optionValue);
@@ -190,9 +189,7 @@ function getSelected(element) {
         return (_a = select.textContent) !== null && _a !== void 0 ? _a : undefined;
     }
     ensureListBoxOpen(select);
-    const body = select.closest("body");
-    const listboxId = select.getAttribute("aria-controls");
-    const listbox = body.querySelector(`#${listboxId}`);
+    const listbox = findListBox(select);
     const options = listbox.querySelectorAll("[role=option]");
     const selections = Array.from(options)
         .filter((o) => o.getAttribute("aria-selected") === "true")
@@ -206,15 +203,17 @@ function getOptions(element) {
     const select = resolveIfNeeded(element);
     assertListBoxInput(select);
     ensureListBoxOpen(select);
-    const body = select.closest("body");
-    const listboxId = select.getAttribute("aria-controls");
-    const listbox = body.querySelector(`#${listboxId}`);
+    const listbox = findListBox(select);
     const options = listbox.querySelectorAll("[role=option]");
     return Array.from(options)
         .map((o) => { var _a, _b; return (_b = (_a = o.dataset.label) !== null && _a !== void 0 ? _a : o.dataset.key) !== null && _b !== void 0 ? _b : ""; })
         .filter((o) => !!o);
 }
 exports.getOptions = getOptions;
+function findListBox(select) {
+    const listboxId = select.getAttribute("aria-controls") || (0, mobx_utils_1.fail)("aria-controls attribute not found");
+    return document.getElementById(listboxId) || (0, mobx_utils_1.fail)("listbox not found");
+}
 function assertListBoxInput(select) {
     if (isSelectElement(select)) {
         throw new Error("Beam getOptions helper does not support <select> elements");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.315.1",
+  "version": "2.316.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",