@homebound/beam 2.117.2 → 2.118.0

package/dist/Css.d.ts

@@ -2527,6 +2527,9 @@ declare class CssBuilder<T extends Properties1> {
     } & {
         textOverflow: import("csstype").Property.TextOverflow | undefined;
     }>;
+    lh(value: Properties["lineHeight"]): CssBuilder<T & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    }>;
     get selectNone(): CssBuilder<T & {
         userSelect: import("csstype").Property.UserSelect | undefined;
     }>;

package/dist/Css.js

@@ -754,6 +754,7 @@ class CssBuilder {
     get indent() { return this.add("textIndent", "1em").add("marginTop", 0).add("marginBottom", 0); }
     get smallCaps() { return this.add("fontVariant", "small-caps"); }
     get truncate() { return this.add("whiteSpace", "nowrap").add("overflow", "hidden").add("textOverflow", "ellipsis"); }
+    lh(value) { return this.add("lineHeight", value); }
     // userSelect
     get selectNone() { return this.add("userSelect", "none"); }
     get selectText() { return this.add("userSelect", "text"); }

package/dist/components/Table/GridTable.js

@@ -127,6 +127,9 @@ function GridTable(props) {
     // (or us) is resetting component state more than necessary, so we track render counts from
     // here instead.
     const { getCount } = (0, useRenderCount_1.useRenderCount)();
+    const columnSizes = (0, columnSizes_1.useSetupColumnSizes)(style, columns, tableRef, resizeTarget);
+    // Make a single copy of our current collapsed state, so we'll have a single observer.
+    const collapsedIds = (0, hooks_1.useComputed)(() => rowState.collapsedIds, [rowState]);
     const [sortState, setSortKey] = (0, useSortState_1.useSortState)(columns, sorting);
     const maybeSorted = (0, react_1.useMemo)(() => {
         if ((sorting === null || sorting === void 0 ? void 0 : sorting.on) === "client" && sortState) {
@@ -135,13 +138,34 @@ function GridTable(props) {
         }
         return rows;
     }, [columns, rows, sorting, sortState]);
-    const columnSizes = (0, columnSizes_1.useSetupColumnSizes)(style, columns, tableRef, resizeTarget);
-    // Make a single copy of our current collapsed state, so we'll have a single observer.
-    const collapsedIds = (0, hooks_1.useComputed)(() => rowState.collapsedIds, [rowState]);
-    // Filter + flatten + component-ize the sorted rows.
-    let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
+    // Filter rows - ensures parent rows remain in the list if any children match the filter.
+    const filterRows = (0, react_1.useCallback)((acc, row) => {
+        var _a, _b, _c;
         // Break up "foo bar" into `[foo, bar]` and a row must match both `foo` and `bar`
         const filters = (filter && filter.split(/ +/)) || [];
+        const matches = row.kind === "header" ||
+            filters.length === 0 ||
+            !!row.pin ||
+            filters.every((f) => columns.map((c) => applyRowFn(c, row, api)).some((maybeContent) => matchesFilter(maybeContent, f)));
+        // If the row matches, add it in
+        if (matches) {
+            return acc.concat([[row, (_b = (_a = row.children) === null || _a === void 0 ? void 0 : _a.reduce(filterRows, [])) !== null && _b !== void 0 ? _b : []]]);
+        }
+        else {
+            // Otherwise, maybe one of the children match.
+            const isCollapsed = collapsedIds.includes(row.id);
+            if (!isCollapsed && !!((_c = row.children) === null || _c === void 0 ? void 0 : _c.length)) {
+                const matchedChildren = row.children.reduce(filterRows, []);
+                // If some children did match, then add the parent row with its matched children.
+                if (matchedChildren.length > 0) {
+                    return acc.concat([[row, matchedChildren]]);
+                }
+            }
+        }
+        return acc;
+    }, [filter, collapsedIds]);
+    // Flatten + component-ize the sorted rows.
+    let [headerRows, filteredRows] = (0, react_1.useMemo)(() => {
         function makeRowComponent(row, level) {
             // We only pass sortState to header rows, b/c non-headers rows shouldn't have to re-render on sorting
             // changes, and so by not passing the sortProps, it means the data rows' React.memo will still cache them.
@@ -168,38 +192,30 @@ function GridTable(props) {
         const filteredRows = [];
         // Misc state to track our nested card-ification, i.e. interleaved actual rows + chrome rows
         const nestedCards = !!style.nestedCards && new nestedCards_1.NestedCards(columns, filteredRows, style.nestedCards);
-        // Depth-first to filter
-        function visit(row, level) {
-            var _a;
-            const matches = filters.length === 0 ||
-                row.pin ||
-                filters.every((filter) => columns.map((c) => applyRowFn(c, row, api)).some((maybeContent) => matchesFilter(maybeContent, filter)));
-            let isCard = false;
-            // Even if we don't pass the filter, one of our children might, so we continue on after this check
-            if (matches) {
-                isCard = nestedCards && nestedCards.maybeOpenCard(row);
-                filteredRows.push([row, makeRowComponent(row, level)]);
-            }
+        function visit([row, children], level) {
+            let isCard = nestedCards && nestedCards.maybeOpenCard(row);
+            filteredRows.push([row, makeRowComponent(row, level)]);
             const isCollapsed = collapsedIds.includes(row.id);
-            if (!isCollapsed && !!((_a = row.children) === null || _a === void 0 ? void 0 : _a.length)) {
-                nestedCards && matches && nestedCards.addSpacer();
-                visitRows(row.children, isCard, level + 1);
+            if (!isCollapsed && children.length) {
+                nestedCards && nestedCards.addSpacer();
+                visitRows(children, isCard, level + 1);
             }
             !(0, nestedCards_1.isLeafRow)(row) && isCard && nestedCards && nestedCards.closeCard();
         }
         function visitRows(rows, addSpacer, level) {
             const length = rows.length;
             rows.forEach((row, i) => {
-                if (row.kind === "header") {
-                    headerRows.push([row, makeRowComponent(row, level)]);
+                if (row[0].kind === "header") {
+                    headerRows.push([row[0], makeRowComponent(row[0], level)]);
                     return;
                 }
                 visit(row, level);
                 addSpacer && nestedCards && i !== length - 1 && nestedCards.addSpacer();
             });
         }
+        // Call `visitRows` with our a pre-filtered set list
         // If nestedCards is set, we assume the top-level kind is a card, and so should add spacers between them
-        visitRows(maybeSorted, !!nestedCards, 0);
+        visitRows(maybeSorted.reduce(filterRows, []), !!nestedCards, 0);
         nestedCards && nestedCards.done();
         return [headerRows, filteredRows];
     }, [

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

@@ -34,6 +34,8 @@ export declare class RowState {
     get collapsedIds(): string[];
     isCollapsed(id: string): boolean;
     toggleCollapsed(id: string): void;
+    private getVisibleChildrenStates;
+    private setNestedSelectedStates;
 }
 /** Provides a context for rows to access their table's `RowState`. */
 export declare const RowStateContext: React.Context<{

package/dist/components/Table/RowState.js

@@ -37,6 +37,13 @@ class RowState {
         // 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))));
+            // Merge the changes back into the selected rows state
+            this.selectedRows.merge(map);
+        }, { equals: mobx_1.comparer.shallow });
     }
     get selectedIds() {
         // Return only ids that are fully checked, i.e. not partial
@@ -62,7 +69,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) => map.set(row.id, "checked"));
+                (0, visitor_1.visit)(this.rows.current, (row) => this.visibleRows.has(row.id) && map.set(row.id, "checked"));
                 this.selectedRows.replace(map);
             }
             else {
@@ -80,19 +87,15 @@ class RowState {
             }
             // Everything here & down is deterministically on/off
             const map = new Map();
-            (0, visitor_1.visit)([curr.row], (row) => map.set(row.id, selected ? "checked" : "unchecked"));
+            (0, visitor_1.visit)([curr.row], (row) => this.visibleRows.has(row.id) && map.set(row.id, selected ? "checked" : "unchecked"));
             // Now walk up the parents and see if they are now-all-checked/now-all-unchecked/some-of-each
             for (const parent of [...curr.parents].reverse()) {
                 if (parent.children) {
-                    const children = parent.children.map((row) => map.get(row.id) || this.getSelected(row.id));
-                    map.set(parent.id, deriveParentSelected(children));
+                    map.set(parent.id, deriveParentSelected(this.getVisibleChildrenStates(parent.children, map)));
                 }
             }
             // And do the header + top-level "children" as a final one-off
-            const children = this.rows.current
-                .filter((row) => row.id !== "header")
-                .map((row) => map.get(row.id) || this.getSelected(row.id));
-            map.set("header", deriveParentSelected(children));
+            map.set("header", deriveParentSelected(this.getVisibleChildrenStates(this.rows.current, map)));
             this.selectedRows.merge(map);
         }
     }
@@ -145,6 +148,24 @@ class RowState {
             localStorage.setItem(this.persistCollapse, JSON.stringify(collapsedIds));
         }
     }
+    getVisibleChildrenStates(children, map) {
+        return children
+            .filter((row) => row.id !== "header" && this.visibleRows.has(row.id))
+            .map((row) => map.get(row.id) || this.getSelected(row.id));
+    }
+    // Recursively traverse through rows to determine selected state of parent rows based on children
+    setNestedSelectedStates(row, map) {
+        if (this.visibleRows.has(row.id)) {
+            if (!row.children) {
+                return [this.getSelected(row.id)];
+            }
+            const childrenSelectedStates = row.children.flatMap((rc) => this.setNestedSelectedStates(rc, map));
+            const parentState = deriveParentSelected(childrenSelectedStates);
+            map.set(row.id, parentState);
+            return [parentState];
+        }
+        return [];
+    }
 }
 exports.RowState = RowState;
 /** Provides a context for rows to access their table's `RowState`. */
@@ -177,5 +198,5 @@ function findRow(rows, id) {
 function deriveParentSelected(children) {
     const allChecked = children.every((child) => child === "checked");
     const allUnchecked = children.every((child) => child === "unchecked");
-    return allChecked ? "checked" : allUnchecked ? "unchecked" : "partial";
+    return children.length === 0 ? "unchecked" : allChecked ? "checked" : allUnchecked ? "unchecked" : "partial";
 }

package/dist/components/Table/sortRows.js

@@ -8,7 +8,7 @@ function sortRows(columns, rows, sortState) {
     // Recursively sort child rows
     sorted.forEach((row, i) => {
         if (row.children) {
-            sorted[i] = { ...sorted[i], children: sortRows(columns, row.children, sortState) };
+            sorted[i].children = sortRows(columns, row.children, sortState);
         }
     });
     return sorted;

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.117.2",
+  "version": "2.118.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -20,8 +20,7 @@
   "scripts": {
     "start": "yarn storybook",
     "build": "yarn copy && ttsc",
-    "build:truss": "cd ./truss && npm run generate",
-    "watch:truss": "cd ./truss && watch 'npm run generate' ./",
+    "build:truss": "truss",
     "build:storybook": "build-storybook -s ./testAssets",
     "test": "jest --maxWorkers 4",
     "test:watch": "jest --watch",
@@ -33,7 +32,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",
@@ -78,6 +77,7 @@
     "@emotion/react": "^11.1.5",
     "@homebound/rtl-react-router-utils": "^1.0.3",
     "@homebound/rtl-utils": "^2.51.0",
+    "@homebound/truss": "^1.111.3",
     "@homebound/tsconfig": "^1.0.3",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^9.0.0",