@homebound/beam 2.117.0 → 2.117.3

package/dist/components/Table/GridTable.js

@@ -224,6 +224,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 : ""; }));
     // 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,3 +1,4 @@
+import { ObservableSet } from "mobx";
 import React, { MutableRefObject } from "react";
 import { GridDataRow } from "./GridTable";
 export declare type SelectedState = "checked" | "unchecked" | "partial";
@@ -21,6 +22,7 @@ export declare class RowState {
     private persistCollapse;
     private readonly collapsedRows;
     private readonly selectedRows;
+    visibleRows: ObservableSet<string>;
     activeRowId: string | undefined;
     /**
      * Creates the `RowState` for a given `GridTable`.

package/dist/components/Table/RowState.js

@@ -30,6 +30,8 @@ class RowState {
         this.rows = rows;
         this.persistCollapse = persistCollapse;
         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;
         // Make ourselves an observable so that mobx will do caching of .collapseIds so
@@ -38,7 +40,9 @@ class RowState {
     }
     get selectedIds() {
         // Return only ids that are fully checked, i.e. not partial
-        const ids = [...this.selectedRows.entries()].filter(([, v]) => v === "checked").map(([k]) => k);
+        const ids = [...this.selectedRows.entries()]
+            .filter(([id, v]) => this.visibleRows.has(id) && v === "checked")
+            .map(([k]) => k);
         // Hide our header marker
         const headerIndex = ids.indexOf("header");
         if (headerIndex > -1) {

package/dist/forms/BoundChipSelectField.d.ts

@@ -1,4 +1,4 @@
-import { FieldState } from "@homebound/form-state/dist/formState";
+import { FieldState } from "@homebound/form-state";
 import { Value } from "../inputs";
 import { ChipSelectFieldProps } from "../inputs/ChipSelectField";
 import { HasIdAndName, Optional } from "../types";

package/dist/forms/BoundMultiSelectField.d.ts

@@ -1,4 +1,4 @@
-import { FieldState } from "@homebound/form-state/dist/formState";
+import { FieldState } from "@homebound/form-state";
 import { MultiSelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";
 export declare type BoundMultiSelectFieldProps<O, V extends Value> = Omit<MultiSelectFieldProps<O, V>, "values" | "onSelect" | "label"> & {

package/dist/forms/BoundSelectField.d.ts

@@ -1,4 +1,4 @@
-import { FieldState } from "@homebound/form-state/dist/formState";
+import { FieldState } from "@homebound/form-state";
 import { SelectFieldProps, Value } from "../inputs";
 import { HasIdAndName, Optional } from "../types";
 export declare type BoundSelectFieldProps<T, V extends Value> = Omit<SelectFieldProps<T, V>, "value" | "onSelect" | "label"> & {

package/dist/forms/FormStateApp.js

@@ -56,9 +56,9 @@ function FormStateApp() {
         { value: "a:4", label: "Iguana" },
         { value: "a:5", label: "Turtle" },
     ];
-    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.wPx(700).$ }, { children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, Object.assign({ labelSuffix: { required: "*", optional: "(Opt)" } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }, void 0), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.StaticLinkField, { label: "Website", href: "https://google.com" }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }, void 0), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows, observeRows: true }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap1.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.reset(), label: "Cancel" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.$ }, { children: [(0, jsx_runtime_1.jsxs)("header", Object.assign({ css: Css_1.Css.wPx(700).$ }, { children: [(0, jsx_runtime_1.jsxs)(FormLines_1.FormLines, Object.assign({ labelSuffix: { required: "*", optional: "(Opt)" } }, { children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.firstName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.middleInitial }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundTextField, { field: formState.lastName }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundDateField, { field: formState.birthday }, void 0), (0, jsx_runtime_1.jsxs)(forms_1.FieldGroup, { children: [(0, jsx_runtime_1.jsx)(forms_1.StaticField, { label: "Revenue", value: "$500" }, void 0), (0, jsx_runtime_1.jsx)(forms_1.StaticLinkField, { label: "Website", href: "https://google.com" }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundNumberField, { field: formState.heightInInches }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSelectField, { field: formState.favoriteSport, options: sports }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundMultiSelectField, { field: formState.favoriteShapes, options: shapes }, void 0), (0, jsx_runtime_1.jsx)(BoundCheckboxGroupField_1.BoundCheckboxGroupField, { field: formState.favoriteColors, options: colors }, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundToggleChipGroupField, { field: formState.animals, options: animals }, void 0), (0, jsx_runtime_1.jsx)(forms_1.FormDivider, {}, void 0), (0, jsx_runtime_1.jsx)(forms_1.BoundSwitchField, { field: formState.isAvailable }, void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books", (0, jsx_runtime_1.jsx)(components_1.IconButton, { icon: "plus", onClick: () => formState.books.add({ id: String(formState.books.value.length) }) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(components_1.GridTable, { columns: columns, rows: rows, observeRows: true }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.childGap1.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => formState.revertChanges(), label: "Cancel" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { onClick: () => {
                                         if (formState.canSave()) {
-                                            formState.save();
+                                            formState.commitChanges();
                                         }
                                     }, label: "Save" }, void 0)] }), void 0)] }), void 0), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(components_1.Button, { label: "Read Only", onClick: () => setReadOnly(!readOnly) }, void 0) }, void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.mt1.$ }, { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Form Values:" }, void 0), (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(formState.value, null, 2) }, void 0)] }), void 0)] }, void 0)] }), void 0)) }, void 0));
 }

package/dist/forms/StepperFormApp.js

@@ -89,7 +89,7 @@ function MiscAuthorDetails({ formState, onBack }) {
             var _a, _b;
             return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h1", Object.assign({ css: Css_1.Css.mb1.$ }, { children: "Author Details" }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mb2.$ }, { children: (0, jsx_runtime_1.jsx)(BoundDateField_1.BoundDateField, { field: formState.birthday, helperText: "Required" }, void 0) }), void 0), (0, jsx_runtime_1.jsx)("div", Object.assign({ css: Css_1.Css.mb2.$ }, { children: (0, jsx_runtime_1.jsx)(BoundNumberField_1.BoundNumberField, { field: formState.heightInInches }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.jcsb.bt.bGray300.py1.mt2.$ }, { children: [(0, jsx_runtime_1.jsx)(components_1.Button, { variant: "tertiary", label: "Back", onClick: onBack }, void 0), (0, jsx_runtime_1.jsx)(components_1.Button, { disabled: !formState.valid, onClick: () => {
                                     if (formState.canSave()) {
-                                        formState.save();
+                                        formState.commitChanges();
                                         setShowFormData(true);
                                     }
                                 }, label: "Save" }, void 0)] }), void 0), showFormData && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.mt5.$ }, { children: [(0, jsx_runtime_1.jsx)("h2", { children: "Form saved!" }, void 0), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "First Name" }, void 0), " ", formState.value.firstName] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Last Name" }, void 0), " ", formState.value.lastName] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Books" }, void 0), " ", (_a = formState.value.books) === null || _a === void 0 ? void 0 : _a.map((b) => b.title).join(", ")] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Birthday" }, void 0), " ", (_b = formState.value.birthday) === null || _b === void 0 ? void 0 : _b.toDateString()] }, void 0), (0, jsx_runtime_1.jsxs)("li", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Height" }, void 0), " ", formState.value.heightInInches] }, void 0)] }, void 0)] }), void 0))] }, void 0));

package/dist/hooks/useComputed.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 /** 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
-    const [, setValue] = (0, react_1.useState)(0);
+    const [, setTick] = (0, react_1.useState)(0);
     const ref = (0, react_1.useRef)({
         runner: undefined,
         value: undefined,
@@ -17,25 +17,25 @@ function useComputed(fn, deps) {
     // with `useEffect`, which would only get calc'd after the 1st render has
     // already been done.
     (0, react_1.useMemo)(() => {
-        let tick = 0;
         const { current } = ref;
         // If deps has changed, unhook the previous observer
         if (current.runner) {
             current.runner();
         }
+        // If deps has changed, we're already re-running, so don't trigger a 2nd one
+        current.hasRan = false;
         current.runner = (0, mobx_1.autorun)(() => {
             // Always eval fn() (even on 1st render) to register our observable.
             const newValue = fn();
-            const oldValue = current.value;
+            const { value: oldValue, hasRan: oldHasRun } = current;
             current.value = newValue;
             current.hasRan = true;
             // 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 (tick > 0 && newValue !== oldValue) {
-                setValue(tick);
+            if (oldHasRun && newValue !== oldValue) {
+                setTick((tick) => tick + 1);
             }
-            tick++;
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.117.0",
+  "version": "2.117.3",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -33,7 +33,7 @@
     "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md}\""
   },
   "dependencies": {
-    "@homebound/form-state": "2.5.0",
+    "@homebound/form-state": "2.13.0",
     "@internationalized/number": "^3.0.3",
     "@react-aria/utils": "^3.9.0",
     "@react-hook/resize-observer": "^1.2.2",