@homebound/beam 2.117.1 → 2.117.4

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/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/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.1",
+  "version": "2.117.4",
   "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",