@homebound/beam 2.244.1 → 2.244.3

package/README.md

@@ -33,7 +33,7 @@ The most concrete manifestation of this is that we want to _provide as few props
 Fewer props generally means:
 
 1. More consistent UX for users (the component cannot behave in N different ways, depending on the page the user sees it on)
-2. Easier usage for client applications (fewer props to know and understand "...should I set this? or not?")
+2. Easier usage for client applications (fewer props to know and understand "...should I set this or not?")
 3. Simpler implementation for Beam components and maintainers
 4. More flexibility to change the internal implementations of Beam components and roll out them relatively easily.
 

package/dist/components/Layout/RightPaneLayout/RightPaneLayout.js

@@ -3,10 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RightPaneLayout = void 0;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const framer_motion_1 = require("framer-motion");
+const react_1 = require("react");
 const Css_1 = require("../../../Css");
 const RightPaneContext_1 = require("./RightPaneContext");
 function RightPaneLayout({ children, paneBgColor = Css_1.Palette.White, paneWidth = 450, }) {
-    const { isRightPaneOpen, rightPaneContent, clearPane } = (0, RightPaneContext_1.useRightPaneContext)();
+    const { isRightPaneOpen, rightPaneContent, clearPane, closePane } = (0, RightPaneContext_1.useRightPaneContext)();
+    // Close pane on page unmount because otherwise the next page that has a right pane will show our stale content
+    (0, react_1.useEffect)(() => {
+        return () => {
+            closePane();
+        };
+    }, []);
     return ((0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.h100.df.overflowXHidden.$, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.w(`calc(100% - ${paneWidth + 24}px)`)
                         .add("transition", "width .2s linear")
                         .h100.mr3.overflowXAuto.if(!isRightPaneOpen).w100.mr0.$, children: children }), (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: isRightPaneOpen && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { layout: "position", "data-testid": "rightPaneContent", css: Css_1.Css.bgColor(paneBgColor).h100.wPx(paneWidth).$, 

package/dist/components/Table/utils/TableState.d.ts

@@ -48,7 +48,7 @@ export declare class TableState {
     setRows(rows: GridDataRow<any>[]): void;
     setColumns(columns: GridColumnWithId<any>[], visibleColumnsStorageKey: string | undefined): void;
     /** Determines which columns to expand immediately vs async */
-    parseAndUpdateExpandedColumns(columnsToExpand: GridColumnWithId<any>[]): void;
+    parseAndUpdateExpandedColumns(columnsToExpand: GridColumnWithId<any>[]): Promise<void>;
     /** Updates the state of which columns are expanded */
     updateExpandedColumns(newColumns: GridColumnWithId<any>[]): void;
     loadExpandedColumns(column: GridColumnWithId<any>): Promise<void>;

package/dist/components/Table/utils/TableState.js

@@ -201,7 +201,7 @@ class TableState {
         }
     }
     /** Determines which columns to expand immediately vs async */
-    parseAndUpdateExpandedColumns(columnsToExpand) {
+    async parseAndUpdateExpandedColumns(columnsToExpand) {
         // Separate out which columns need to be loaded async vs which can be loaded immediately.
         const [localColumnsToExpand, asyncColumnsToExpand] = columnsToExpand.reduce((acc, c) => {
             if ((0, utils_2.isFunction)(c.expandColumns)) {
@@ -212,7 +212,16 @@ class TableState {
         // Handle all async expanding columns using a Promise.all.
         // This will allow the table to render immediately, then cause a rerender with the new columns
         if (asyncColumnsToExpand.length > 0) {
-            Promise.all(asyncColumnsToExpand.map(async (c) => await this.loadExpandedColumns(c))).then(() => this.updateExpandedColumns(asyncColumnsToExpand));
+            // Note: Not using a Promise.all because there seems to be a bug in Apollo with applying TypePolicies when using Promise.all.
+            // TODO: Update comment with Apollo issue link.
+            // Promise.all(asyncColumnsToExpand.map(async (c) => await this.loadExpandedColumns(c))).then(() =>
+            //   this.updateExpandedColumns(asyncColumnsToExpand),
+            // );
+            // Instead, doing each async request in sequence for now.
+            for await (const column of asyncColumnsToExpand) {
+                await this.loadExpandedColumns(column);
+            }
+            this.updateExpandedColumns(asyncColumnsToExpand);
         }
         // For local columns, we skip the Promise in order to have the correct state on the initial load.
         if (localColumnsToExpand.length > 0) {

package/package.json

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