@homebound/beam 2.315.2 → 2.316.1

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/hooks/useComputed.js

@@ -41,8 +41,13 @@ function useComputed(fn, deps) {
             // Only trigger a re-render if this is not the 1st autorun. Note
             // that if deps has changed, we're inherently in a re-render so also
             // don't need to trigger an additional re-render.
-            if (hasRan)
+            if (hasRan) {
+                // This can cause 'Cannot update a component while rendering a different component'
+                // if one component (the mutator) is updating observable from directly
+                // within it's render method. Usually this is rare and can be avoided by
+                // only updating observables from within useEffect.
                 setTick((tick) => tick + 1);
+            }
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);

package/dist/utils/defaultTestId.d.ts

@@ -3,6 +3,8 @@
  * returns `homeownerContract`.
  *
  * This is useful for our (non-bound) form fields that will probably have a label,
- * but may not have an data-testid set by the encompassing page.
+ * but may not have a `data-testid` set by the encompassing page.
+ *
+ * (Bound form fields typically set their test id from their form-state field's key.)
  */
 export declare function defaultTestId(label: string): string;

package/dist/utils/defaultTestId.js

@@ -7,9 +7,13 @@ const change_case_1 = require("change-case");
  * returns `homeownerContract`.
  *
  * This is useful for our (non-bound) form fields that will probably have a label,
- * but may not have an data-testid set by the encompassing page.
+ * but may not have a `data-testid` set by the encompassing page.
+ *
+ * (Bound form fields typically set their test id from their form-state field's key.)
  */
 function defaultTestId(label) {
-    return (0, change_case_1.camelCase)(label);
+    // Strip `m:4` to `m4` to prevent it from becoming `m_4` which our rtl-utils assumes
+    // means "the 4th element with a data-testid value of 'm'".
+    return (0, change_case_1.camelCase)(label.replace(":", ""));
 }
 exports.defaultTestId = defaultTestId;

package/package.json

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