@homebound/beam 2.118.1 → 2.118.4

package/dist/components/Table/GridTable.js

@@ -240,7 +240,7 @@ function GridTable(props) {
         tooManyClientSideRows = true;
         filteredRows = filteredRows.slice(0, filterMaxRows);
     }
-    rowState.visibleRows.replace(filteredRows.map(([row]) => { var _a; return (_a = row === null || row === void 0 ? void 0 : row.id) !== null && _a !== void 0 ? _a : ""; }));
+    rowState.setVisibleRows(filteredRows.map(([row]) => { var _a; return (_a = row === null || row === void 0 ? void 0 : row.id) !== null && _a !== void 0 ? _a : ""; }));
     // Push back to the caller a way to ask us where a row is.
     const { rowLookup } = props;
     if (rowLookup) {

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

@@ -1,4 +1,3 @@
-import { ObservableSet } from "mobx";
 import React, { MutableRefObject } from "react";
 import { GridDataRow } from "./GridTable";
 export declare type SelectedState = "checked" | "unchecked" | "partial";
@@ -22,12 +21,13 @@ export declare class RowState {
     private persistCollapse;
     private readonly collapsedRows;
     private readonly selectedRows;
-    visibleRows: ObservableSet<string>;
+    private visibleRows;
     activeRowId: string | undefined;
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
     constructor(rows: MutableRefObject<GridDataRow<any>[]>, persistCollapse: string | undefined, activeRowId: string | undefined);
+    setVisibleRows(rowIds: string[]): void;
     get selectedIds(): string[];
     getSelected(id: string): SelectedState;
     selectRow(id: string, selected: boolean): void;

package/dist/components/Table/RowState.js

@@ -45,6 +45,16 @@ class RowState {
             this.selectedRows.merge(map);
         }, { equals: mobx_1.comparer.shallow });
     }
+    setVisibleRows(rowIds) {
+        // ObservableSet doesn't seem to do a `diff` inside `replace` before firing
+        // observers/reactions that watch it, which can lead to render loops with the
+        // application page is observing `GridTableApi.getSelectedRows`, and merely
+        // the act of rendering GridTable (w/o row changes) causes it's `useComputed`
+        // to be triggered.
+        if (!mobx_1.comparer.shallow(rowIds, [...this.visibleRows.values()])) {
+            this.visibleRows.replace(rowIds);
+        }
+    }
     get selectedIds() {
         // Return only ids that are fully checked, i.e. not partial
         const ids = [...this.selectedRows.entries()]

package/dist/hooks/useComputed.js

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useComputed = void 0;
 const mobx_1 = require("mobx");
 const react_1 = require("react");
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 /** Evaluates a computed function `fn` to a regular value and triggers a re-render whenever it changes. */
 function useComputed(fn, deps) {
     // We always return the useRef value, and use this just to trigger re-renders
@@ -33,7 +37,7 @@ 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 (oldHasRun && newValue !== oldValue) {
+            if (oldHasRun && !(0, fast_deep_equal_1.default)(newValue, oldValue)) {
                 setTick((tick) => tick + 1);
             }
         });

package/dist/inputs/internal/ListBox.js

@@ -25,15 +25,37 @@ function ListBox(props) {
     const isMultiSelect = state.selectionManager.selectionMode === "multiple";
     const firstItem = state.collection.at(0);
     const hasSections = firstItem && firstItem.type === "section";
-    const onListHeightChange = (height) => {
+    // Create a reference for measuring the MultiSelect's selected list's height. Used for re-evaluating `popoverHeight`.
+    const selectedList = (0, react_1.useRef)(null);
+    const firstRender = (0, react_1.useRef)(true);
+    // Keep track of the virtuoso list height to properly update the ListBox's height.
+    // Using a ref, this itself should not trigger a rerender, only `popoverHeight` changes will trigger a rerender.
+    const virtuosoListHeight = (0, react_1.useRef)(0);
+    const onListHeightChange = (listHeight) => {
+        var _a;
+        virtuosoListHeight.current = listHeight;
+        // The "listHeight" is only the list of options.
+        // For multiple selects we need to also account for the height of the list of currently selected elements when re-evaluating.
+        // Using `offsetHeight` to account for borders
+        const height = (((_a = selectedList.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0) + listHeight;
         // Using Math.min to choose between the smaller height, either the total height of the List (`height` arg), or the maximum height defined by the space allotted on screen or our hard coded max.
         // If there are ListBoxSections, then we assume it is the persistent section with a single item and account for that height.
         setPopoverHeight(Math.min(popoverMaxHeight, hasSections ? height + constants_1.persistentItemHeight + constants_1.sectionSeparatorHeight : height));
     };
+    (0, react_1.useEffect)(() => {
+        // Reevaluate the list height when introducing or removing the MultiSelect's options list.
+        // Do not call `onListHeightChange` on the first render. Only when the selectedKeys size has actually changed between empty and not empty.
+        if (!firstRender.current &&
+            isMultiSelect &&
+            (state.selectionManager.selectedKeys.size === 0 || state.selectionManager.selectedKeys.size === 1)) {
+            onListHeightChange(virtuosoListHeight.current);
+        }
+        firstRender.current = false;
+    }, [state.selectionManager.selectedKeys.size]);
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: {
-            ...Css_1.Css.bgWhite.br4.w100.bshBasic.if(contrast).bgGray700.$,
+            ...Css_1.Css.bgWhite.br4.w100.bshBasic.hPx(popoverHeight).df.fdc.if(contrast).bgGray700.$,
             "&:hover": Css_1.Css.bshHover.$,
-        }, ref: listBoxRef }, listBoxProps, { children: [isMultiSelect && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bGray200.add("flexWrap", "wrap").$ }, { children: selectedOptions.map((o) => ((0, jsx_runtime_1.jsx)(ListBoxToggleChip_1.ListBoxToggleChip, { state: state, option: o, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o)))) }), void 0)), (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.hPx(popoverHeight).$ }, { children: hasSections ? ([...state.collection].map((section) => ((0, jsx_runtime_1.jsx)(ListBoxSection_1.ListBoxSection, { section: section, state: state, contrast: contrast, onListHeightChange: onListHeightChange, popoverHeight: popoverHeight, 
+        }, ref: listBoxRef }, listBoxProps, { children: [isMultiSelect && state.selectionManager.selectedKeys.size > 0 && ((0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.pt2.pl2.pb1.pr1.df.bb.bGray200.add("flexWrap", "wrap").$, ref: selectedList }, { children: selectedOptions.map((o) => ((0, jsx_runtime_1.jsx)(ListBoxToggleChip_1.ListBoxToggleChip, { state: state, option: o, getOptionValue: getOptionValue, getOptionLabel: getOptionLabel, disabled: state.disabledKeys.has(getOptionValue(o)) }, getOptionValue(o)))) }), void 0)), (0, jsx_runtime_1.jsx)("ul", Object.assign({ css: Css_1.Css.listReset.fg1.$ }, { children: hasSections ? ([...state.collection].map((section) => ((0, jsx_runtime_1.jsx)(ListBoxSection_1.ListBoxSection, { section: section, state: state, contrast: contrast, onListHeightChange: onListHeightChange, popoverHeight: popoverHeight, 
                     // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))
                     scrollOnFocus: props.shouldUseVirtualFocus }, section.key)))) : ((0, jsx_runtime_1.jsx)(VirtualizedOptions_1.VirtualizedOptions, { state: state, items: [...state.collection], onListHeightChange: onListHeightChange, contrast: contrast, 
                     // Only scroll on focus if using VirtualFocus (used for ComboBoxState (SelectField), but not SelectState (ChipSelectField))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.118.1",
+  "version": "2.118.4",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -39,6 +39,7 @@
     "change-case": "^4.1.2",
     "date-fns": "^2.21.3",
     "dompurify": "^2.3.0",
+    "fast-deep-equal": "^3.1.3",
     "framer-motion": "^4.1.11",
     "memoize-one": "^5.2.1",
     "react-aria": "^3.10.0",
@@ -50,8 +51,8 @@
     "react-virtuoso": "^2.4.0",
     "tributejs": "^5.1.3",
     "trix": "^1.3.1",
-    "use-query-params": "^1.2.2",
-    "use-debounce": "^7.0.1"
+    "use-debounce": "^7.0.1",
+    "use-query-params": "^1.2.2"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",