@homebound/beam 2.118.2 → 2.119.0

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

@@ -1,6 +1,7 @@
 import { MutableRefObject, ReactElement, ReactNode } from "react";
 import { PresentationContextProps, PresentationFieldProps } from "../PresentationContext";
 import { GridRowLookup } from "./GridRowLookup";
+import { GridTableApi } from "./GridTableApi";
 import { Margin, Only, Palette, Properties, Typography, Xss } from "../../Css";
 export declare type Kinded = {
     kind: string;
@@ -173,8 +174,8 @@ export interface GridTableProps<R extends Kinded, S, X> {
      */
     persistCollapse?: string;
     xss?: X;
-    /** Experimental API allowing one to scroll to a table index. Primarily intended for stories at the moment */
-    api?: MutableRefObject<GridTableApi<R> | undefined>;
+    /** Accepts the api, from `useGridTableApi`, that the caller wants to use for this table. */
+    api?: GridTableApi<R>;
     /** Experimental, expecting to be removed - Specify the element in which the table should resize its columns against. If not set, the table will resize columns based on its owns container's width */
     resizeTarget?: MutableRefObject<HTMLElement | null>;
     /**
@@ -184,18 +185,6 @@ export interface GridTableProps<R extends Kinded, S, X> {
      */
     activeRowId?: string;
 }
-/** NOTE: This API is experimental and primarily intended for story and testing purposes */
-export declare type GridTableApi<R extends Kinded> = {
-    scrollToIndex: (index: number) => void;
-    /** Returns the ids of currently-selected rows. */
-    getSelectedRowIds(): string[];
-    getSelectedRowIds<K extends R["kind"]>(kind: K): string[];
-    /** Returns the currently-selected rows. */
-    getSelectedRows(): GridDataRow<R>[];
-    getSelectedRows<K extends R["kind"]>(kind: K): GridDataRow<DiscriminateUnion<R, "kind", K>>[];
-    /** Sets the internal state of 'activeRowId' */
-    setActiveRowId: (id: string | undefined) => void;
-};
 /**
  * Renders data in our table layout.
  *
@@ -327,6 +316,6 @@ export declare type GridDataRow<R extends Kinded> = {
 } & IfAny<R, {}, DiscriminateUnion<R, "kind", R["kind"]>>;
 declare type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 /** Return the content for a given column def applied to a given row. */
-export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>, api: MutableRefObject<GridTableApi<R>>): ReactNode | GridCellContent;
+export declare function applyRowFn<R extends Kinded>(column: GridColumn<R>, row: GridDataRow<R>, api: GridTableApi<R>): ReactNode | GridCellContent;
 export declare function matchesFilter(maybeContent: ReactNode | GridCellContent, filter: string): boolean;
 export {};

package/dist/components/Table/GridTable.js

@@ -34,12 +34,12 @@ const PresentationContext_1 = require("../PresentationContext");
 const columnSizes_1 = require("./columnSizes");
 const GridRowLookup_1 = require("./GridRowLookup");
 const GridSortContext_1 = require("./GridSortContext");
+const GridTableApi_1 = require("./GridTableApi");
 const nestedCards_1 = require("./nestedCards");
 const RowState_1 = require("./RowState");
 const SortHeader_1 = require("./SortHeader");
 const sortRows_1 = require("./sortRows");
 const useSortState_1 = require("./useSortState");
-const visitor_1 = require("./visitor");
 const Css_1 = require("../../Css");
 const hooks_1 = require("../../hooks");
 const useRenderCount_1 = require("../../hooks/useRenderCount");
@@ -85,40 +85,19 @@ exports.setGridTableDefaults = setGridTableDefaults;
  */
 function GridTable(props) {
     var _a, _b, _c, _d;
-    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, api: callerApi, resizeTarget, activeRowId, } = props;
-    // Create a ref that always contains the latest rows, for our effectively-singleton RowState to use
-    const rowsRef = (0, react_1.useRef)(rows);
-    rowsRef.current = rows;
-    const [rowState] = (0, react_1.useState)(() => new RowState_1.RowState(rowsRef, persistCollapse, activeRowId));
+    const { id = "gridTable", as = "div", columns, rows, style = defaults.style, rowStyles, stickyHeader = defaults.stickyHeader, stickyOffset = "0", xss, filter, filterMaxRows, fallbackMessage = "No rows found.", infoMessage, setRowCount, observeRows, persistCollapse, resizeTarget, activeRowId, } = props;
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
     const tableRef = (0, react_1.useRef)(null);
-    const api = (0, react_1.useRef)({
-        scrollToIndex: (index) => virtuosoRef.current && virtuosoRef.current.scrollToIndex(index),
-        getSelectedRowIds(kind) {
-            if (kind === undefined) {
-                return rowState.selectedIds;
-            }
-            else {
-                return this.getSelectedRows(kind).map((row) => row.id);
-            }
-        },
-        // The any is not great, but getting the overload to handle the optional kind is annoying
-        getSelectedRows(kind) {
-            const ids = rowState.selectedIds;
-            const selected = [];
-            (0, visitor_1.visit)(rows, (row) => {
-                if (ids.includes(row.id) && (!kind || row.kind === kind)) {
-                    selected.push(row);
-                }
-            });
-            return selected;
-        },
-        setActiveRowId: (id) => (rowState.activeRowId = id),
-    });
-    if (callerApi) {
-        callerApi.current = api.current;
-    }
+    const api = (0, react_1.useMemo)(() => {
+        var _a;
+        const api = (_a = props.api) !== null && _a !== void 0 ? _a : new GridTableApi_1.GridTableApiImpl();
+        api.init(persistCollapse, virtuosoRef);
+        api.setActiveRowId(activeRowId);
+        return api;
+    }, [props.api]);
+    const { rowState } = api;
+    rowState.rows = rows;
     (0, react_1.useEffect)(() => {
         rowState.activeRowId = activeRowId;
     }, [rowState, activeRowId]);
@@ -664,10 +643,10 @@ function applyRowFn(column, row, api) {
     if (typeof maybeContent === "function") {
         if ("data" in row && "id" in row) {
             // Auto-destructure data
-            return maybeContent(row["data"], row["id"], api.current);
+            return maybeContent(row["data"], row["id"], api);
         }
         else {
-            return maybeContent(row, api.current);
+            return maybeContent(row, api);
         }
     }
     else {
@@ -703,7 +682,7 @@ const rowLinkRenderFn = (as) => (key, css, content, row, rowStyle) => {
 /** Renders a cell that will fire the RowStyle.onClick. */
 const rowClickRenderFn = (as, api) => (key, css, content, row, rowStyle) => {
     const Row = as === "table" ? "tr" : "div";
-    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, onClick: () => rowStyle.onClick(row, api.current) }, { children: content }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Row, Object.assign({}, { key }, { css: { ...css, ...tableRowStyles(as) }, onClick: () => rowStyle.onClick(row, api) }, { children: content }), void 0));
 };
 const alignmentToJustify = {
     left: "flex-start",

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

@@ -0,0 +1,43 @@
+import { MutableRefObject } from "react";
+import { VirtuosoHandle } from "react-virtuoso";
+import { DiscriminateUnion, GridDataRow, Kinded } from "./GridTable";
+import { RowState } from "./RowState";
+/**
+ * Creates an `api` handle to drive a `GridTable`.
+ *
+ * ```
+ * const api = useGridTableApi<Row>();
+ * const count = useComputed(() => api.getSelectedRows().length, [api]);
+ * ...
+ * return <GridTable api={api} />
+ * ```
+ *
+ * This is very similar to a `useRef`, except that the parent function has
+ * immediate access to `api` and can use it for `useComputed`, instead of
+ * having to wait for `ref.current` to be set after the child `GridTable`
+ * has ran.
+ */
+export declare function useGridTableApi<R extends Kinded>(): GridTableApi<R>;
+/** Provides an imperative API for an application page to interact with the table. */
+export declare type GridTableApi<R extends Kinded> = {
+    /** Scrolls row `index` into view; only supported with `as=virtual` and after a `useEffect`. */
+    scrollToIndex: (index: number) => void;
+    /** Returns the ids of currently-selected rows. */
+    getSelectedRowIds(): string[];
+    getSelectedRowIds<K extends R["kind"]>(kind: K): string[];
+    /** Returns the currently-selected rows. */
+    getSelectedRows(): GridDataRow<R>[];
+    getSelectedRows<K extends R["kind"]>(kind: K): GridDataRow<DiscriminateUnion<R, "kind", K>>[];
+    /** Sets the internal state of 'activeRowId' */
+    setActiveRowId: (id: string | undefined) => void;
+};
+export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<R> {
+    readonly rowState: RowState;
+    virtuosoRef: MutableRefObject<VirtuosoHandle | null>;
+    /** Called once by the GridTable when it takes ownership of this api instance. */
+    init(persistCollapse: string | undefined, virtuosoRef: MutableRefObject<VirtuosoHandle | null>): void;
+    scrollToIndex(index: number): void;
+    getSelectedRowIds(kind?: string): string[];
+    getSelectedRows(kind?: string): any;
+    setActiveRowId(id: string | undefined): void;
+}

package/dist/components/Table/GridTableApi.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridTableApiImpl = exports.useGridTableApi = void 0;
+const react_1 = require("react");
+const RowState_1 = require("./RowState");
+const visitor_1 = require("./visitor");
+/**
+ * Creates an `api` handle to drive a `GridTable`.
+ *
+ * ```
+ * const api = useGridTableApi<Row>();
+ * const count = useComputed(() => api.getSelectedRows().length, [api]);
+ * ...
+ * return <GridTable api={api} />
+ * ```
+ *
+ * This is very similar to a `useRef`, except that the parent function has
+ * immediate access to `api` and can use it for `useComputed`, instead of
+ * having to wait for `ref.current` to be set after the child `GridTable`
+ * has ran.
+ */
+function useGridTableApi() {
+    return (0, react_1.useMemo)(() => new GridTableApiImpl(), []);
+}
+exports.useGridTableApi = useGridTableApi;
+// Using `FooImpl`to keep the public GridTableApi definition separate.
+class GridTableApiImpl {
+    constructor() {
+        // This is public to GridTable but not exported outside of Beam
+        this.rowState = new RowState_1.RowState();
+        this.virtuosoRef = { current: null };
+    }
+    /** Called once by the GridTable when it takes ownership of this api instance. */
+    init(persistCollapse, virtuosoRef) {
+        if (persistCollapse) {
+            this.rowState.loadPersistedCollapse(persistCollapse);
+        }
+        this.virtuosoRef = virtuosoRef;
+    }
+    scrollToIndex(index) {
+        this.virtuosoRef.current && this.virtuosoRef.current.scrollToIndex(index);
+    }
+    getSelectedRowIds(kind) {
+        if (kind === undefined) {
+            return this.rowState.selectedIds;
+        }
+        else {
+            return this.getSelectedRows(kind).map((row) => row.id);
+        }
+    }
+    // The any is not great, but getting the overload to handle the optional kind is annoying
+    getSelectedRows(kind) {
+        const ids = this.rowState.selectedIds;
+        const selected = [];
+        (0, visitor_1.visit)(this.rowState.rows, (row) => {
+            if (ids.includes(row.id) && (!kind || row.kind === kind)) {
+                selected.push(row);
+            }
+        });
+        return selected;
+    }
+    setActiveRowId(id) {
+        this.rowState.activeRowId = id;
+    }
+}
+exports.GridTableApiImpl = GridTableApiImpl;

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

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

package/dist/components/Table/RowState.js

@@ -26,25 +26,29 @@ class RowState {
     /**
      * Creates the `RowState` for a given `GridTable`.
      */
-    constructor(rows, persistCollapse, activeRowId) {
-        this.rows = rows;
-        this.persistCollapse = persistCollapse;
+    constructor() {
+        // A set of just row ids, i.e. not row.kind+row.id
+        this.collapsedRows = new mobx_1.ObservableSet();
         this.selectedRows = new mobx_1.ObservableMap();
         // Set of just row ids. Keeps track of which rows are visible. Used to filter out non-visible rows from `selectedIds`
         this.visibleRows = new mobx_1.ObservableSet();
-        this.collapsedRows = new mobx_1.ObservableSet(persistCollapse ? readLocalCollapseState(persistCollapse) : []);
-        this.activeRowId = activeRowId;
+        // The current list of rows, basically a useRef.current. Not reactive.
+        this.rows = [];
         // Make ourselves an observable so that mobx will do caching of .collapseIds so
         // that it'll be a stable identity for GridTable to useMemo against.
         (0, mobx_1.makeAutoObservable)(this, { rows: false }); // as any b/c rows is private, so the mapped type doesn't see it
         // Whenever our `visibleRows` change (i.e. via filtering) then we need to re-derive header and parent rows' selected state.
         (0, mobx_1.reaction)(() => [...this.visibleRows.values()].sort(), () => {
             const map = new Map();
-            map.set("header", deriveParentSelected(this.rows.current.flatMap((row) => this.setNestedSelectedStates(row, map))));
+            map.set("header", deriveParentSelected(this.rows.flatMap((row) => this.setNestedSelectedStates(row, map))));
             // Merge the changes back into the selected rows state
             this.selectedRows.merge(map);
         }, { equals: mobx_1.comparer.shallow });
     }
+    loadPersistedCollapse(persistCollapse) {
+        this.persistCollapse = persistCollapse;
+        this.collapsedRows.replace(readLocalCollapseState(persistCollapse));
+    }
     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
@@ -79,7 +83,7 @@ class RowState {
                 // Just mash the header + all rows + children as selected
                 const map = new Map();
                 map.set("header", "checked");
-                (0, visitor_1.visit)(this.rows.current, (row) => this.visibleRows.has(row.id) && map.set(row.id, "checked"));
+                (0, visitor_1.visit)(this.rows, (row) => this.visibleRows.has(row.id) && map.set(row.id, "checked"));
                 this.selectedRows.replace(map);
             }
             else {
@@ -91,7 +95,7 @@ class RowState {
             // This is the regular/non-header behavior to just add/remove the individual row id,
             // plus percolate the change down-to-child + up-to-parents.
             // Find the clicked on row
-            const curr = findRow(this.rows.current, id);
+            const curr = findRow(this.rows, id);
             if (!curr) {
                 return;
             }
@@ -105,7 +109,7 @@ class RowState {
                 }
             }
             // And do the header + top-level "children" as a final one-off
-            map.set("header", deriveParentSelected(this.getVisibleChildrenStates(this.rows.current, map)));
+            map.set("header", deriveParentSelected(this.getVisibleChildrenStates(this.rows, map)));
             this.selectedRows.merge(map);
         }
     }
@@ -131,7 +135,7 @@ class RowState {
                 // Find all non-leaf rows so that toggling "all collapsed" -> "all not collapsed" opens
                 // the parent rows of any level.
                 const parentIds = new Set();
-                const todo = [...this.rows.current];
+                const todo = [...this.rows];
                 while (todo.length > 0) {
                     const r = todo.pop();
                     if (r.children) {

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

@@ -4,6 +4,8 @@ export type { GridRowLookup } from "./GridRowLookup";
 export { GridSortContext } from "./GridSortContext";
 export { ASC, DESC, GridTable, setDefaultStyle, setGridTableDefaults } from "./GridTable";
 export type { Direction, GridCellAlignment, GridCellContent, GridColumn, GridDataRow, GridRowStyles, GridSortConfig, GridStyle, GridTableDefaults, GridTableProps, GridTableXss, Kinded, RowStyle, setRunningInJest, } from "./GridTable";
+export { useGridTableApi } from "./GridTableApi";
+export type { GridTableApi } from "./GridTableApi";
 export { RowState, RowStateContext } from "./RowState";
 export * from "./SelectToggle";
 export { simpleDataRows, simpleHeader, simpleRows } from "./simpleHelpers";

package/dist/components/Table/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.beamTotalsFlexibleStyle = exports.beamTotalsFixedStyle = exports.beamNestedFlexibleStyle = exports.beamNestedFixedStyle = exports.beamFlexibleStyle = exports.beamFixedStyle = exports.SortHeader = exports.simpleRows = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
+exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.beamTotalsFlexibleStyle = exports.beamTotalsFixedStyle = exports.beamNestedFlexibleStyle = exports.beamNestedFixedStyle = exports.beamFlexibleStyle = exports.beamFixedStyle = exports.SortHeader = exports.simpleRows = exports.simpleHeader = exports.simpleDataRows = exports.RowStateContext = exports.RowState = exports.useGridTableApi = exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.DESC = exports.ASC = exports.GridSortContext = void 0;
 __exportStar(require("./CollapseToggle"), exports);
 __exportStar(require("./columns"), exports);
 var GridSortContext_1 = require("./GridSortContext");
@@ -21,6 +21,8 @@ Object.defineProperty(exports, "DESC", { enumerable: true, get: function () { re
 Object.defineProperty(exports, "GridTable", { enumerable: true, get: function () { return GridTable_1.GridTable; } });
 Object.defineProperty(exports, "setDefaultStyle", { enumerable: true, get: function () { return GridTable_1.setDefaultStyle; } });
 Object.defineProperty(exports, "setGridTableDefaults", { enumerable: true, get: function () { return GridTable_1.setGridTableDefaults; } });
+var GridTableApi_1 = require("./GridTableApi");
+Object.defineProperty(exports, "useGridTableApi", { enumerable: true, get: function () { return GridTableApi_1.useGridTableApi; } });
 var RowState_1 = require("./RowState");
 Object.defineProperty(exports, "RowState", { enumerable: true, get: function () { return RowState_1.RowState; } });
 Object.defineProperty(exports, "RowStateContext", { enumerable: true, get: function () { return RowState_1.RowStateContext; } });

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.2",
+  "version": "2.119.0",
   "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",