@homebound/beam 2.123.2 → 2.123.3

package/dist/components/Layout/ScrollableContent.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode, ReactPortal } from "react";
-/** Helper component for placing scrollable content within a `NestedScrollProvider`. */
-export declare function ScrollableContent({ children, virtualized, }: {
+/** Helper component for placing scrollable content within a `ScrollableParent`. */
+export declare function ScrollableContent(props: {
     children: ReactNode;
     virtualized?: boolean;
 }): ReactPortal | JSX.Element;

package/dist/components/Layout/ScrollableContent.js

@@ -7,8 +7,9 @@ const react_dom_1 = require("react-dom");
 const FullBleed_1 = require("./FullBleed");
 const ScrollableParent_1 = require("./ScrollableParent");
 const Css_1 = require("../../Css");
-/** Helper component for placing scrollable content within a `NestedScrollProvider`. */
-function ScrollableContent({ children, virtualized = false, }) {
+/** Helper component for placing scrollable content within a `ScrollableParent`. */
+function ScrollableContent(props) {
+    const { children, virtualized = false } = props;
     const { scrollableEl, setPortalTick, pl } = (0, ScrollableParent_1.useScrollableParent)();
     (0, react_1.useEffect)(() => {
         // The below `tick` logic is a way to detect whether the ScrollableContent is being used.

package/dist/components/Table/GridTable.js

@@ -43,6 +43,7 @@ const useSortState_1 = require("./useSortState");
 const Css_1 = require("../../Css");
 const hooks_1 = require("../../hooks");
 const useRenderCount_1 = require("../../hooks/useRenderCount");
+const shallowEqual_1 = require("../../utils/shallowEqual");
 const _1 = require(".");
 exports.ASC = "ASC";
 exports.DESC = "DESC";
@@ -592,8 +593,23 @@ function GridRow(props) {
         }) }), void 0));
     return openCardStyles && openCardStyles.length > 0 ? (0, nestedCards_1.wrapCard)(openCardStyles, rowNode) : rowNode;
 }
-// Fix to work with generics, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/37087#issuecomment-656596623
-const MemoizedGridRow = react_1.default.memo(GridRow);
+/**
+ * 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(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);
+});
 /** Wraps a mobx Observer around the row's rendering/evaluation, so that it will be reactive. */
 const ObservedGridRow = react_1.default.memo((props) => ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
         // Invoke this just as a regular function so that Observer sees the proxy access's

package/dist/utils/rtl.js

@@ -17,20 +17,24 @@ Object.defineProperty(exports, "wait", { enumerable: true, get: function () { re
 const react_1 = require("@testing-library/react");
 const components_1 = require("../components");
 function render(component, wrapperOrOpts, ...otherWrappers) {
+    let wrappers;
     if (wrapperOrOpts && "wrap" in wrapperOrOpts) {
         // They passed at least single wrapper + maybe more.
         // We put `withBeamRTL` first so that any `withApollo`s wrap outside of beam, so in-drawer/in-modal content has apollo
-        return (0, rtl_utils_1.render)(component, ...[exports.withBeamRTL, wrapperOrOpts, ...otherWrappers]);
+        wrappers = [exports.withBeamRTL, wrapperOrOpts, ...otherWrappers];
     }
     else if (wrapperOrOpts) {
         const { omitBeamContext, at } = wrapperOrOpts;
-        return (0, rtl_utils_1.render)(component, ...[
+        wrappers = [
             ...otherWrappers,
             ...(!omitBeamContext ? [exports.withBeamRTL] : []),
             ...(at ? [(0, rtl_react_router_utils_1.withRouter)(at.url, at.route)] : [(0, rtl_react_router_utils_1.withRouter)()]),
-        ]);
+        ];
     }
-    return (0, rtl_utils_1.render)(component, exports.withBeamRTL);
+    else {
+        wrappers = [exports.withBeamRTL];
+    }
+    return (0, rtl_utils_1.render)(component, { wrappers, wait: true });
 }
 exports.render = render;
 function cell(r, row, column) {

package/dist/utils/shallowEqual.d.ts

@@ -0,0 +1,4 @@
+/**
+ * An inlined version of shallowEach, see https://github.com/facebook/react/issues/16919
+ */
+export declare function shallowEqual(objA: any, objB: any): boolean;

package/dist/utils/shallowEqual.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shallowEqual = void 0;
+/**
+ * An inlined version of shallowEach, see https://github.com/facebook/react/issues/16919
+ */
+function shallowEqual(objA, objB) {
+    if (Object.is(objA, objB)) {
+        return true;
+    }
+    if (typeof objA !== "object" || objA === null || typeof objB !== "object" || objB === null) {
+        return false;
+    }
+    const keysA = Object.keys(objA);
+    const keysB = Object.keys(objB);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    // Test for A's keys different from B.
+    for (let i = 0; i < keysA.length; i++) {
+        const currentKey = keysA[i];
+        if (!objB.hasOwnProperty(currentKey) || !Object.is(objA[currentKey], objB[currentKey])) {
+            return false;
+        }
+    }
+    return true;
+}
+exports.shallowEqual = shallowEqual;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.123.2",
+  "version": "2.123.3",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -77,7 +77,7 @@
     "@emotion/jest": "^11.3.0",
     "@emotion/react": "^11.1.5",
     "@homebound/rtl-react-router-utils": "^1.0.3",
-    "@homebound/rtl-utils": "^2.51.0",
+    "@homebound/rtl-utils": "^2.59.3",
     "@homebound/truss": "^1.111.3",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",