@homebound/beam 2.375.0 → 2.377.0

package/dist/components/Table/GridTable.js

@@ -92,13 +92,15 @@ function GridTable(props) {
     const columnsWithIds = (0, react_1.useMemo)(() => (0, columns_1.assignDefaultColumnIds)(_columns), [_columns]);
     // We only use this in as=virtual mode, but keep this here for rowLookup to use
     const virtuosoRef = (0, react_1.useRef)(null);
+    // Stores the current rendered range of rows from virtuoso (used for determining if we can skip re-scrolling to a row if already in view)
+    const virtuosoRangeRef = (0, react_1.useRef)(null);
     // Use this ref to watch for changes in the GridTable's container and resize columns accordingly.
     const resizeRef = (0, react_1.useRef)(null);
     const api = (0, react_1.useMemo)(() => {
         var _a;
         // Let the user pass in their own api handle, otherwise make our own
         const api = (_a = props.api) !== null && _a !== void 0 ? _a : new GridTableApi_1.GridTableApiImpl();
-        api.init(persistCollapse, virtuosoRef);
+        api.init(persistCollapse, virtuosoRef, virtuosoRangeRef);
         api.setActiveRowId(activeRowId);
         api.setActiveCellId(activeCellId);
         // Push the initial columns directly into tableState, b/c that is what
@@ -294,7 +296,7 @@ function GridTable(props) {
     // behave semantically the same as `as=div` did for its tests.
     const _as = as === "virtual" && runningInJest ? "div" : as;
     const rowStateContext = (0, react_1.useMemo)(() => ({ tableState: tableState }), [tableState]);
-    return ((0, jsx_runtime_1.jsx)(TableState_1.TableStateContext.Provider, { value: rowStateContext, children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, { fieldProps: fieldProps, wrap: (_d = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _d === void 0 ? void 0 : _d.wrap, children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: (0, components_1.getTableRefWidthStyles)(as === "virtual") }), renders[_as](style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, tableHeadRows, stickyOffset, infiniteScroll)] }) }));
+    return ((0, jsx_runtime_1.jsx)(TableState_1.TableStateContext.Provider, { value: rowStateContext, children: (0, jsx_runtime_1.jsxs)(PresentationContext_1.PresentationProvider, { fieldProps: fieldProps, wrap: (_d = style === null || style === void 0 ? void 0 : style.presentationSettings) === null || _d === void 0 ? void 0 : _d.wrap, children: [(0, jsx_runtime_1.jsx)("div", { ref: resizeRef, css: (0, components_1.getTableRefWidthStyles)(as === "virtual") }), renders[_as](style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, stickyOffset, infiniteScroll)] }) }));
 }
 // Determine which HTML element to use to build the GridTable
 const renders = {
@@ -303,7 +305,7 @@ const renders = {
     virtual: renderVirtual,
 };
 /** Renders table using divs with flexbox rows, which is the default render */
-function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, tableHeadRows, stickyOffset, _infiniteScroll) {
+function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, _infiniteScroll) {
     return ((0, jsx_runtime_1.jsxs)("div", { css: {
             // Use `fit-content` to ensure the width of the table takes up the full width of its content.
             // Otherwise, the table's width would be that of its container, which may not be as wide as the table itself.
@@ -323,7 +325,7 @@ function renderDiv(style, id, columns, visibleDataRows, keptSelectedRows, firstR
                 }, children: [keptSelectedRows, firstRowMessage && ((0, jsx_runtime_1.jsx)("div", { css: { ...style.firstRowMessageCss }, "data-gridrow": true, children: firstRowMessage })), visibleDataRows] })] }));
 }
 /** Renders as a table, primarily/solely for good print support. */
-function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, tableHeadRows, stickyOffset, _infiniteScroll) {
+function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, _virtuosoRef, _virtuosoRangeRef, tableHeadRows, stickyOffset, _infiniteScroll) {
     return ((0, jsx_runtime_1.jsxs)("table", { css: {
             ...Css_1.Css.w100.add("borderCollapse", "separate").add("borderSpacing", "0").$,
             ...Css_1.Css.addIn("& tr ", { pageBreakAfter: "auto", pageBreakInside: "avoid" }).$,
@@ -357,7 +359,7 @@ function renderTable(style, id, columns, visibleDataRows, keptSelectedRows, firs
  * [2]: https://github.com/tannerlinsley/react-virtual/issues/85
  * [3]: https://github.com/tannerlinsley/react-virtual/issues/108
  */
-function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, tableHeadRows, _stickyOffset, infiniteScroll) {
+function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, firstRowMessage, stickyHeader, xss, virtuosoRef, virtuosoRangeRef, tableHeadRows, _stickyOffset, infiniteScroll) {
     var _a;
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const { footerStyle, listStyle } = (0, react_1.useMemo)(() => {
@@ -402,6 +404,8 @@ function renderVirtual(style, id, columns, visibleDataRows, keptSelectedRows, fi
             }
             // Lastly render the table body rows
             return visibleDataRows[index];
+        }, rangeChanged: (newRange) => {
+            virtuosoRangeRef.current = newRange;
         }, totalCount: tableHeadRows.length + (firstRowMessage ? 1 : 0) + visibleDataRows.length + keptSelectedRows.length, ...(infiniteScroll
             ? {
                 increaseViewportBy: {

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

@@ -1,5 +1,5 @@
 import { MutableRefObject } from "react";
-import { VirtuosoHandle } from "react-virtuoso";
+import { ListRange, VirtuosoHandle } from "react-virtuoso";
 import { GridRowLookup, GridTableScrollOptions, MaybeFn } from "../index";
 import { GridDataRow } from "./components/Row";
 import { DiscriminateUnion, Kinded } from "./types";
@@ -77,11 +77,12 @@ export type GridRowApi<R extends Kinded> = GridTableApi<R> & {
 export declare class GridTableApiImpl<R extends Kinded> implements GridTableApi<R> {
     readonly tableState: TableState<R>;
     virtuosoRef: MutableRefObject<VirtuosoHandle | null>;
+    virtuosoRangeRef: MutableRefObject<ListRange | null>;
     lookup: GridRowLookup<R>;
     constructor();
     /** Called once by the GridTable when it takes ownership of this api instance. */
-    init(persistCollapse: string | undefined, virtuosoRef: MutableRefObject<VirtuosoHandle | null>): void;
-    scrollToIndex(index: GridTableScrollOptions): void;
+    init(persistCollapse: string | undefined, virtuosoRef: MutableRefObject<VirtuosoHandle | null>, virtuosoRangeRef: MutableRefObject<ListRange | null>): void;
+    scrollToIndex(indexOrOptions: GridTableScrollOptions): void;
     getSelectedRowIds(kind?: string): string[];
     private getSelectedRowIdsImpl;
     getSelectedRows(kind?: string): any;

package/dist/components/Table/GridTableApi.js

@@ -33,6 +33,7 @@ class GridTableApiImpl {
         // This is public to GridTable but not exported outside of Beam
         this.tableState = new TableState_1.TableState(this);
         this.virtuosoRef = { current: null };
+        this.virtuosoRangeRef = { current: null };
         // This instance gets spread into each row's GridRowApi, so bind the methods up-front
         bindMethods(this);
         // Memoize these so that if the user is creating new `data` instances on every render, they
@@ -43,16 +44,21 @@ class GridTableApiImpl {
         this.getSelectedRowIdsImpl = (0, mobx_utils_1.computedFn)(this.getSelectedRowIdsImpl, { equals: mobx_1.comparer.shallow });
     }
     /** Called once by the GridTable when it takes ownership of this api instance. */
-    init(persistCollapse, virtuosoRef) {
+    init(persistCollapse, virtuosoRef, virtuosoRangeRef) {
         // Technically this drives both row-collapse and column-expanded
         if (persistCollapse)
             this.tableState.loadCollapse(persistCollapse);
         this.virtuosoRef = virtuosoRef;
-        this.lookup = (0, index_1.createRowLookup)(this, virtuosoRef);
-    }
-    scrollToIndex(index) {
-        this.virtuosoRef.current &&
-            this.virtuosoRef.current.scrollToIndex(typeof index === "number" ? { index, behavior: "smooth" } : index);
+        this.virtuosoRangeRef = virtuosoRangeRef;
+        this.lookup = (0, index_1.createRowLookup)(this, virtuosoRef, virtuosoRangeRef);
+    }
+    scrollToIndex(indexOrOptions) {
+        if (!this.virtuosoRef.current)
+            return;
+        const scrollToOpts = typeof indexOrOptions === "number" ? { index: indexOrOptions, behavior: "smooth" } : indexOrOptions;
+        if ((0, index_1.shouldSkipScrollTo)(scrollToOpts.index, this.virtuosoRangeRef))
+            return;
+        this.virtuosoRef.current.scrollToIndex(scrollToOpts);
     }
     getSelectedRowIds(kind) {
         return this.getSelectedRowIdsImpl(kind !== null && kind !== void 0 ? kind : undefined);

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

@@ -14,7 +14,7 @@ export { cardStyle, condensedStyle, defaultStyle, getTableStyles } from "./Table
 export type { GridStyle, RowStyle, RowStyles } from "./TableStyles";
 export * from "./types";
 export * from "./utils/columns";
-export { createRowLookup } from "./utils/GridRowLookup";
+export { createRowLookup, shouldSkipScrollTo } from "./utils/GridRowLookup";
 export type { GridRowLookup } from "./utils/GridRowLookup";
 export { simpleDataRows, simpleHeader } from "./utils/simpleHelpers";
 export type { SimpleHeaderAndData } from "./utils/simpleHelpers";

package/dist/components/Table/index.js

@@ -14,7 +14,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.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.TableStateContext = exports.TableState = exports.simpleHeader = exports.simpleDataRows = exports.createRowLookup = exports.getTableStyles = exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.useGridTableApi = exports.SortHeader = exports.Row = exports.EditColumnsButton = exports.rowLinkRenderFn = exports.rowClickRenderFn = exports.headerRenderFn = exports.defaultRenderFn = void 0;
+exports.setGridTableDefaults = exports.setDefaultStyle = exports.GridTable = exports.TableStateContext = exports.TableState = exports.simpleHeader = exports.simpleDataRows = exports.shouldSkipScrollTo = exports.createRowLookup = exports.getTableStyles = exports.defaultStyle = exports.condensedStyle = exports.cardStyle = exports.useGridTableApi = exports.SortHeader = exports.Row = exports.EditColumnsButton = exports.rowLinkRenderFn = exports.rowClickRenderFn = exports.headerRenderFn = exports.defaultRenderFn = void 0;
 var cell_1 = require("./components/cell");
 Object.defineProperty(exports, "defaultRenderFn", { enumerable: true, get: function () { return cell_1.defaultRenderFn; } });
 Object.defineProperty(exports, "headerRenderFn", { enumerable: true, get: function () { return cell_1.headerRenderFn; } });
@@ -41,6 +41,7 @@ __exportStar(require("./types"), exports);
 __exportStar(require("./utils/columns"), exports);
 var GridRowLookup_1 = require("./utils/GridRowLookup");
 Object.defineProperty(exports, "createRowLookup", { enumerable: true, get: function () { return GridRowLookup_1.createRowLookup; } });
+Object.defineProperty(exports, "shouldSkipScrollTo", { enumerable: true, get: function () { return GridRowLookup_1.shouldSkipScrollTo; } });
 var simpleHelpers_1 = require("./utils/simpleHelpers");
 Object.defineProperty(exports, "simpleDataRows", { enumerable: true, get: function () { return simpleHelpers_1.simpleDataRows; } });
 Object.defineProperty(exports, "simpleHeader", { enumerable: true, get: function () { return simpleHelpers_1.simpleHeader; } });

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

@@ -1,5 +1,5 @@
 import { MutableRefObject } from "react";
-import { VirtuosoHandle } from "react-virtuoso";
+import { ListRange, VirtuosoHandle } from "react-virtuoso";
 import { GridDataRow } from "../components/Row";
 import { GridTableApiImpl } from "../GridTableApi";
 import { DiscriminateUnion, GridColumnWithId, Kinded } from "../types";
@@ -16,13 +16,18 @@ export interface GridRowLookup<R extends Kinded> {
     };
     /** Returns the list of currently filtered/sorted rows, without headers. */
     currentList(): readonly GridDataRow<R>[];
-    /** Scroll's to the row with the given kind + id. Requires using `as=virtual`. */
+    /**
+     * Scroll's to the row with the given kind + id. Requires using `as=virtual`.
+     * Will skip re-scrolling to a row if it's already visible.
+     */
     scrollTo(kind: R["kind"], id: string): void;
 }
 interface NextPrev<R extends Kinded> {
     next: GridDataRow<R> | undefined;
     prev: GridDataRow<R> | undefined;
 }
-export declare function createRowLookup<R extends Kinded>(api: GridTableApiImpl<R>, virtuosoRef: MutableRefObject<VirtuosoHandle | null>): GridRowLookup<R>;
+export declare function createRowLookup<R extends Kinded>(api: GridTableApiImpl<R>, virtuosoRef: MutableRefObject<VirtuosoHandle | null>, virtuosoRangeRef: MutableRefObject<ListRange | null>): GridRowLookup<R>;
 export declare function getKinds<R extends Kinded>(columns: GridColumnWithId<R>[]): R[];
+/** Optionally takes into consideration if a row is already in view before attempting to scroll to it. */
+export declare function shouldSkipScrollTo(index: number, virtuosoRangeRef: MutableRefObject<ListRange | null>): boolean;
 export {};

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

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createRowLookup = createRowLookup;
 exports.getKinds = getKinds;
+exports.shouldSkipScrollTo = shouldSkipScrollTo;
 const types_1 = require("../types");
-function createRowLookup(api, virtuosoRef) {
+function createRowLookup(api, virtuosoRef, virtuosoRangeRef) {
     return {
         scrollTo(kind, id) {
             if (virtuosoRef.current === null) {
@@ -12,6 +13,8 @@ function createRowLookup(api, virtuosoRef) {
                 throw new Error("scrollTo is only supported for as=virtual");
             }
             const index = api.tableState.visibleRows.findIndex((r) => r && r.kind === kind && r.row.id === id);
+            if (shouldSkipScrollTo(index, virtuosoRangeRef))
+                return;
             virtuosoRef.current.scrollToIndex({ index, behavior: "smooth" });
         },
         currentList() {
@@ -53,3 +56,14 @@ function createRowLookup(api, virtuosoRef) {
 function getKinds(columns) {
     return Object.keys(columns.find((c) => !c.isAction) || {}).filter((key) => !types_1.nonKindGridColumnKeys.includes(key));
 }
+/** Optionally takes into consideration if a row is already in view before attempting to scroll to it. */
+function shouldSkipScrollTo(index, virtuosoRangeRef) {
+    if (!virtuosoRangeRef.current)
+        return false;
+    const isAlreadyInView = 
+    // Add 1 on each end to account for "overscan" where the next out of view row is usually already rendered. This isn't a perfect solution,
+    // but our current "overscan" is only set to 50px, so it should be close enough and the library recommended alternative of adding an
+    // intersection observer to each row seems like a not worth it performance hit (https://github.com/petyosi/react-virtuoso/issues/118)
+    index >= virtuosoRangeRef.current.startIndex - 1 && index <= virtuosoRangeRef.current.endIndex + 1;
+    return isAlreadyInView;
+}

package/dist/inputs/internal/ComboBoxBase.js

@@ -1,14 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addNewOption = exports.unsetOption = void 0;
 exports.ComboBoxBase = ComboBoxBase;
 exports.initializeOptions = initializeOptions;
 exports.disabledOptionToKeyedTuple = disabledOptionToKeyedTuple;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
-const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 const react_1 = require("react");
 const react_aria_1 = require("react-aria");
 const react_stately_1 = require("react-stately");
@@ -68,18 +64,7 @@ function ComboBoxBase(props) {
         : [propOptions.current, propOptions.options, unsetLabel, onAddNew]);
     const values = (0, react_1.useMemo)(() => propValues !== null && propValues !== void 0 ? propValues : [], [propValues]);
     const inputStylePalette = (0, react_1.useMemo)(() => propsInputStylePalette, [propsInputStylePalette]);
-    const selectedOptionsRef = (0, react_1.useRef)(options.filter((o) => values.includes(getOptionValue(o))));
-    const selectedOptions = (0, react_1.useMemo)(() => {
-        // `selectedOptions` should only ever update if the `values` prop actually change.
-        // Assuming `values` is a state variable, then it should hold its identity until it _really_ changes.
-        // Though, it is possible that the `options` prop has changed, which is a dependency on this `useMemo`.
-        // That could trigger an unnecessary new reference for `selectedOptions`, and cause additional renders or unexpected state changes.
-        // We should avoid updating `selectedOptions` unless `values` has actually changed.
-        if (!(0, fast_deep_equal_1.default)([...values].sort(), selectedOptionsRef.current.map(getOptionValue).sort())) {
-            selectedOptionsRef.current = options.filter((o) => values.includes(getOptionValue(o)));
-        }
-        return selectedOptionsRef.current;
-    }, [options, values, getOptionValue]);
+    const selectedOptions = (0, react_1.useMemo)(() => options.filter((o) => values.includes(getOptionValue(o))), [options, values, getOptionValue]);
     const { contains } = (0, react_aria_1.useFilter)({ sensitivity: "base" });
     const isDisabled = !!disabled;
     const isReadOnly = !!readOnly;

package/package.json

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