@homebound/form-state 2.21.0 → 2.22.1

package/dist/fields/listField.d.ts

@@ -3,9 +3,9 @@ import { ObjectState } from "./objectField";
 import { FieldState } from "./valueField";
 import { Rule } from "../rules";
 /** Form state for list of children, i.e. `U` is a `Book` in a form with a `books: Book[]`. */
-export interface ListFieldState<U> extends Omit<FieldState<U[]>, "originalValue"> {
+export interface ListFieldState<U> extends FieldState<U[]> {
     readonly rows: ReadonlyArray<ObjectState<U>>;
     add(value: U, index?: number): void;
     remove(indexOrValue: number | U): void;
 }
-export declare function newListFieldState<T, K extends keyof T, U>(parentInstance: T, parentState: () => ObjectState<T>, key: K, rules: Rule<readonly ObjectState<U>[]>[], listConfig: ListFieldConfig<U>, config: ObjectConfig<U>, strictOrder: boolean, maybeAutoSave: () => void): ListFieldState<U>;
+export declare function newListFieldState<T, K extends keyof T, U>(parentCopy: T, parentInstance: T, parentState: () => ObjectState<T>, key: K, rules: Rule<readonly ObjectState<U>[]>[], listConfig: ListFieldConfig<U>, config: ObjectConfig<U>, strictOrder: boolean, maybeAutoSave: () => void): ListFieldState<U>;

package/dist/fields/listField.js

@@ -5,13 +5,20 @@ const mobx_1 = require("mobx");
 const objectField_1 = require("./objectField");
 const rules_1 = require("../rules");
 const utils_1 = require("../utils");
-function newListFieldState(parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeAutoSave) {
+function newListFieldState(parentCopy, parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeAutoSave) {
+    var _a;
     // Keep a map of "item in the parent list" -> "that item's ObjectState"
     const rowMap = new Map();
     const _tick = (0, mobx_1.observable)({ value: 1 });
+    const _originalValueTick = (0, mobx_1.observable)({ value: 1 });
     const _childTick = (0, mobx_1.observable)({ value: 1 });
-    // this is for dirty checking, not object identity
-    let originalCopy = [...(parentInstance[key] || [])];
+    // When child rows don't have ids (i.e. for new rows that aren't saved yet), we need an id-less
+    // "clone <-> current" map to tell if we're dirty or not, i.e. whether `parentInstance[key]` has
+    // drifted from `parentCopy[key]`
+    const copyMap = new Map();
+    ((_a = parentCopy[key]) !== null && _a !== void 0 ? _a : []).forEach((copy, i) => {
+        copyMap.set(copy, parentInstance[key][i]);
+    });
     const list = {
         key: key,
         // Our fundamental state of wrapped Us
@@ -46,22 +53,19 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             return parentState().isNewEntity;
         },
         // private
+        /** Returns whether a row has been added/removed. */
         hasChanged() {
-            const [current, original] = [this.value || [], originalCopy || []];
-            if (current.length !== original.length) {
+            const [current, original] = [this.value || [], this.originalValue];
+            if (current.length !== original.length)
                 return true;
-            }
             if (strictOrder) {
-                return original.some((e, idx) => {
-                    const originalState = rowMap.get(e);
-                    const currentState = rowMap.get(current[idx]);
-                    return originalState !== currentState;
-                });
+                // With strict order, every copy[i] === original[i] must be true
+                return original.some((e, idx) => current[idx] !== copyMap.get(e));
+            }
+            else {
+                // With loose order, we just want every copy to still have its original somewhere
+                return !original.every((e) => current.includes(copyMap.get(e)));
             }
-            return !original.every((e) => {
-                const state = rowMap.get(e);
-                return current.some((e) => rowMap.get(e) === state);
-            });
         },
         // And we can derive each value's ObjectState wrapper as needed from the rowMap cache
         get rows() {
@@ -92,7 +96,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         get valid() {
             const value = this.rows;
             // TODO Passing `originalCopy || []` is probably not 100% right
-            const opts = { value, key: key, originalValue: originalCopy || [], object: parentState() };
+            const opts = { value, key: key, originalValue: this.originalValue, object: parentState() };
             const collectionValid = this.rules.every((r) => r(opts) === undefined);
             const entriesValid = this.rows.filter((r) => !r._considerDeleted()).every((r) => r.valid);
             return collectionValid && entriesValid;
@@ -100,7 +104,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         get errors() {
             if (_tick.value < 0)
                 (0, utils_1.fail)();
-            const opts = { value: this.rows, key: key, originalValue: originalCopy || [], object: parentState() };
+            const opts = { value: this.rows, key: key, originalValue: this.originalValue, object: parentState() };
             return this.rules.map((r) => r(opts)).filter(utils_1.isNotUndefined);
         },
         get changedValue() {
@@ -143,6 +147,11 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             // We should be passed values that are non-proxies.
             parentInstance[key] = values.map((value) => {
                 let childState = rowMap.get(value);
+                // If we're being reverted to our originalValue, i.e. values is actually
+                // a list of copies, use the copyMap to recover our child states
+                if (!childState && copyMap.has(value)) {
+                    childState = rowMap.get(copyMap.get(value));
+                }
                 if (!childState) {
                     // Look for an existing child (requires having an id key configured)
                     for (const [, otherState] of rowMap.entries()) {
@@ -159,11 +168,12 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
                 // Return the already-observable'd value so that our `parent.value[key] = values` doesn't re-proxy things
                 return childState.value;
             });
+            // Make sure to tick first so that `setOriginalValue` sees the latest `rows`
+            _tick.value++;
             // Reset originalCopy so that our dirty checks have the right # of rows.
             if (opts.refreshing) {
-                originalCopy = [...(parentInstance[key] || [])];
+                this.setOriginalValue();
             }
-            _tick.value++;
         },
         add(value, spliceIndex) {
             // This is called by the user, so value should be a non-proxy value we should keep
@@ -189,16 +199,31 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             maybeAutoSave();
         },
         revertChanges() {
-            if (originalCopy) {
-                this.set(originalCopy, { resetting: true });
-                this.rows.forEach((r) => r.revertChanges());
-            }
+            this.set(this.originalValue, { resetting: true });
+            this.rows.forEach((r) => r.revertChanges());
+            this.touched = false;
         },
         commitChanges() {
+            // Tell each child ObjectState to have its fields commit into its parentCopy
             this.rows.forEach((r) => r.commitChanges());
-            originalCopy = [...(parentInstance[key] || [])];
+            this.setOriginalValue();
+            this.touched = false;
             _tick.value++;
         },
+        get originalValue() {
+            // A dummy check to for reactivity around our non-proxy value
+            const value = _originalValueTick.value > -1 ? parentCopy[key] : parentCopy[key];
+            return value !== null && value !== void 0 ? value : [];
+        },
+        // This should only be called when value === originalValue
+        setOriginalValue() {
+            // Use the rows' originalValues to update the parentCopy
+            parentCopy[key] = this.rows.map((r) => r.originalValue);
+            parentCopy[key].forEach((copy, i) => {
+                copyMap.set(copy, parentInstance[key][i]);
+            });
+            _originalValueTick.value++;
+        },
         ensureSet() {
             if (!parentInstance[key]) {
                 parentInstance[key] = [];

package/dist/fields/objectField.d.ts

@@ -36,6 +36,7 @@ export type ObjectState<T> = FieldStates<T> & FieldState<T> & {
 };
 export type ObjectStateInternal<T> = ObjectState<T> & {
     set(value: T, opts?: InternalSetOpts): void;
+    isSameEntity(other: T): boolean;
 };
 declare const fragmentSym: unique symbol;
 export type Fragment<V> = V & {

package/dist/fields/objectField.js

@@ -34,20 +34,26 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         }
         return proxy;
     }
+    // We directly mutate `instance` as the user edits the form, so keep a deep copy of the POJO.
+    // If the user passed us `instance` that was a mobx store/class, this originalValue won't really
+    // be a true match (i.e. pass instanceof), but it should be good enough
+    const originalCopy = (0, utils_1.deepClone)(instance);
     const objectConfig = config;
     const fieldStates = Object.entries(config).map(([_key, _config]) => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const key = _key;
         const config = _config;
         let field;
         if (config.type === "value") {
-            field = (0, valueField_1.newValueFieldState)(instance, getObjectState, key, config.rules || [], config.isIdKey ||
+            field = (0, valueField_1.newValueFieldState)(originalCopy, instance, getObjectState, key, config.rules || [], config.isIdKey ||
                 // Default the id key to "id" unless some other field has isIdKey set
                 (key === "id" &&
-                    !Object.entries(objectConfig).some(([other, c]) => other !== key && c.isIdKey)), config.isDeleteKey || false, config.isReadOnlyKey || false, config.computed || false, config.readOnly || false, (_a = config.strictOrder) !== null && _a !== void 0 ? _a : true, maybeAutoSave);
+                    !Object.entries(objectConfig).some(([other, c]) => other !== key && c.isIdKey)), config.isDeleteKey || false, config.isReadOnlyKey || false, (_a = config.computed) !== null && _a !== void 0 ? _a : 
+            // If instance is a mobx class, we can detect computeds as they won't be enumerable
+            ((0, mobx_1.isObservable)(instance) ? !(key in originalCopy) : false), (_b = config.readOnly) !== null && _b !== void 0 ? _b : false, (_c = config.strictOrder) !== null && _c !== void 0 ? _c : true, maybeAutoSave);
         }
         else if (config.type === "list") {
-            field = (0, listField_1.newListFieldState)(instance, getObjectState, key, config.rules || [], config, config.config, (_b = config.strictOrder) !== null && _b !== void 0 ? _b : true, maybeAutoSave);
+            field = (0, listField_1.newListFieldState)(originalCopy, instance, getObjectState, key, config.rules || [], config, config.config, (_d = config.strictOrder) !== null && _d !== void 0 ? _d : true, maybeAutoSave);
         }
         else if (config.type === "object") {
             if (!instance[key]) {
@@ -176,7 +182,8 @@ function newObjectState(config, parentState, parentListState, instance, key, may
             return result;
         },
         get originalValue() {
-            return instance;
+            getFields(proxy).map((f) => f.originalValue);
+            return originalCopy;
         },
         // An internal helper method to see if `other` is for "the same entity" as our current row
         isSameEntity(other) {
@@ -184,7 +191,9 @@ function newObjectState(config, parentState, parentListState, instance, key, may
             if (!idField) {
                 return false;
             }
-            return this[idField.key].value === other[idField.key];
+            // If the otherIdValue is undefined, it's a new entity so can't be the same as us
+            const otherIdValue = other[idField.key];
+            return otherIdValue !== undefined && otherIdValue === this[idField.key].value;
         },
     };
     proxy = (0, mobx_1.makeAutoObservable)(obj, {
@@ -193,6 +202,7 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         // to mobx this looks like the value never changes, and it will never invoke observers
         // even with our tick-based hacks.
         value: (0, mobx_1.computed)({ equals: () => false }),
+        originalValue: (0, mobx_1.computed)({ equals: () => false }),
     });
     // Any time a field changes, percolate that change up to us
     (0, mobx_1.reaction)(() => getFields(proxy).map((f) => f.value), () => _tick.value++);

package/dist/fields/valueField.d.ts

@@ -71,4 +71,4 @@ export interface FieldStateInternal<T, V> extends FieldState<V> {
     _isReadOnlyKey: boolean;
     _focused: boolean;
 }
-export declare function newValueFieldState<T, K extends keyof T>(parentInstance: T, parentState: () => ObjectState<T>, key: K, rules: Rule<T[K] | null | undefined>[], isIdKey: boolean, isDeleteKey: boolean, isReadOnlyKey: boolean, computed: boolean, readOnly: boolean, strictOrder: boolean, maybeAutoSave: () => void): FieldState<T[K] | null | undefined>;
+export declare function newValueFieldState<T, K extends keyof T>(parentCopy: T, parentInstance: T, parentState: () => ObjectState<T>, key: K, rules: Rule<T[K] | null | undefined>[], isIdKey: boolean, isDeleteKey: boolean, isReadOnlyKey: boolean, computed: boolean, readOnly: boolean, strictOrder: boolean, maybeAutoSave: () => void): FieldState<T[K] | null | undefined>;

package/dist/fields/valueField.js

@@ -6,10 +6,7 @@ const mobx_1 = require("mobx");
 const proxies_1 = require("../proxies");
 const rules_1 = require("../rules");
 const utils_1 = require("../utils");
-function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, isDeleteKey, isReadOnlyKey, computed, readOnly, strictOrder, maybeAutoSave) {
-    // keep a copy here for reference equality
-    const value = parentInstance[key];
-    let _originalValue = value === null ? undefined : (0, is_plain_object_1.isPlainObject)(value) ? (0, mobx_1.toJS)(value) : value;
+function newValueFieldState(parentCopy, parentInstance, parentState, key, rules, isIdKey, isDeleteKey, isReadOnlyKey, computed, readOnly, strictOrder, maybeAutoSave) {
     // Because we read/write the value directly back into parentInstance[key],
     // which itself is not a proxy, we use this as our "value changed" trigger.
     const _tick = (0, mobx_1.observable)({ value: 1 });
@@ -31,7 +28,7 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             // Re-create the `keepNull` logic on sets but for our initial read where our
             // originalValue is null (empty) but we want to expose it as undefined for
             // consistency of "empty-ness" to our UI components.
-            return value === null && (0, utils_1.isEmpty)(_originalValue) ? undefined : value;
+            return value === null && (0, utils_1.isEmpty)(parentCopy[key]) ? undefined : value;
         },
         set value(v) {
             this.set(v);
@@ -94,7 +91,7 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             if (opts.refreshing && this.dirty && this.value !== value) {
                 // Ignore incoming values if we have changes (this.dirty) unless our latest change (this.value)
                 // matches the incoming value (value), b/c if it does we should accept it and reset originalValue
-                // so that we're not longer dirty.
+                // so that we're no longer dirty.
                 return;
             }
             else if (computed && (opts.resetting || opts.refreshing)) {
@@ -140,12 +137,14 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
         },
         get originalValue() {
             // A dummy check to for reactivity around our non-proxy value
-            const value = _originalValueTick.value > -1 ? _originalValue : _originalValue;
+            const value = _originalValueTick.value > -1 ? parentCopy[key] : parentCopy[key];
             // Re-create the `keepNull` logic so that `.value` === `.originalValue`
             return value === null ? undefined : value;
         },
         set originalValue(v) {
-            _originalValue = v;
+            const canSkip = v === undefined && !(key in parentCopy);
+            if (!canSkip)
+                parentCopy[key] = v;
             _originalValueTick.value++;
         },
         maybeTrim() {

package/dist/formState.test.js

@@ -112,7 +112,8 @@ describe("formState", () => {
         const a1 = { firstName: "a1" };
         const state = createAuthorInputState(a1);
         state.firstName.set("a2");
-        expect(state.originalValue === a1).toEqual(true);
+        expect(state.value === a1).toEqual(true);
+        expect(state.originalValue !== a1).toEqual(true);
         expect(a1.firstName).toEqual("a2");
     });
     it("maintains object identity of lists", () => {
@@ -122,11 +123,11 @@ describe("formState", () => {
         const state = createAuthorInputState(a1);
         const b2 = { title: "t2" };
         state.books.add(b2);
-        expect(state.originalValue.books === a1.books).toEqual(true);
+        expect(state.value.books === a1.books).toEqual(true);
         expect(state.books.value.length).toEqual(2);
         expect((_a = a1.books) === null || _a === void 0 ? void 0 : _a.length).toEqual(2);
-        expect(state.books.rows[0].originalValue === b1).toEqual(true);
-        expect(state.books.rows[1].originalValue === b2).toEqual(true);
+        expect(state.books.rows[0].value === b1).toEqual(true);
+        expect(state.books.rows[1].value === b2).toEqual(true);
         expect(a1.books[1] === b2).toEqual(true);
     });
     it("can add items anywhere within a list", () => {
@@ -141,14 +142,14 @@ describe("formState", () => {
         });
         const b2 = { title: "t2" };
         state.books.add(b2, 0);
-        expect(state.books.rows[0].originalValue === b2).toEqual(true);
-        expect(state.books.rows[1].originalValue === b1).toEqual(true);
+        expect(state.books.rows[0].value === b2).toEqual(true);
+        expect(state.books.rows[1].value === b1).toEqual(true);
         expect(ticks).toEqual(2);
         const b3 = { title: "t3" };
         state.books.add(b3, 1);
-        expect(state.books.rows[0].originalValue === b2).toEqual(true);
-        expect(state.books.rows[1].originalValue === b3).toEqual(true);
-        expect(state.books.rows[2].originalValue === b1).toEqual(true);
+        expect(state.books.rows[0].value === b2).toEqual(true);
+        expect(state.books.rows[1].value === b3).toEqual(true);
+        expect(state.books.rows[2].value === b1).toEqual(true);
         expect(ticks).toEqual(3);
     });
     it("list value can observe changes", () => {
@@ -164,6 +165,34 @@ describe("formState", () => {
         state.books.add({ title: "t2" }, 0);
         expect(ticks).toEqual(2);
     });
+    it("list originalValue can observe changes", () => {
+        const b1 = { title: "t1" };
+        const a1 = { firstName: "a1", books: [b1] };
+        const state = createAuthorInputState(a1);
+        let books;
+        let ticks = 0;
+        (0, mobx_1.autorun)(() => {
+            books = state.books.originalValue;
+            ticks++;
+        });
+        state.books.add({ title: "t2" }, 0);
+        expect(ticks).toEqual(1);
+        state.commitChanges();
+        expect(ticks).toEqual(2);
+    });
+    it("state originalValue can observe changes", () => {
+        const a1 = { firstName: "a1", books: [] };
+        const state = createAuthorInputState(a1);
+        let ticks = 0;
+        (0, mobx_1.autorun)(() => {
+            noop(state.originalValue);
+            ticks++;
+        });
+        state.books.add({ title: "t2" }, 0);
+        expect(ticks).toEqual(1);
+        state.commitChanges();
+        expect(ticks).toEqual(2);
+    });
     it("maintains unknown fields", () => {
         // Given the form is not directly editing id fields
         const config = {
@@ -177,9 +206,8 @@ describe("formState", () => {
         state.firstName.set("a2");
         state.books.add({ title: "t2" });
         // When we get back the originalValue
-        const a2 = state.originalValue;
         // Then it has the ids and the new values
-        expect(a2).toMatchObject({
+        expect(state.value).toMatchObject({
             id: "1",
             books: [{ id: "2", title: "t1" }, { title: "t2" }],
         });
@@ -600,8 +628,8 @@ describe("formState", () => {
             firstName: "a1",
             lastName: "aL1",
             books: [
-                { title: "b1", classification: formStateDomain_1.dd100 },
-                { title: "b2", classification: formStateDomain_1.dd100 },
+                { id: "b:1", title: "b1", classification: formStateDomain_1.dd100 },
+                { id: "b:2", title: "b2", classification: formStateDomain_1.dd100 },
             ],
         });
         // And some values have been changed
@@ -678,7 +706,7 @@ describe("formState", () => {
         a1.firstName.value = "";
         // Then we keep it as null
         expect(a1.firstName.value).toBeNull();
-        expect(a1.originalValue.firstName).toBeNull();
+        expect(a1.originalValue.firstName).toBe("asdf");
         expect(a1.firstName.dirty).toBeTruthy();
     });
     it("initializes null values to be undefined", () => {
@@ -937,12 +965,14 @@ describe("formState", () => {
         const formState = (0, objectField_1.createObjectState)({
             firstName: { type: "value" },
             lastName: { type: "value" },
-            fullName: { type: "value", computed: true },
+            fullName: { type: "value" },
         }, new ObservableObject());
         expect(formState.firstName.value).toEqual("first");
         expect(formState.fullName.value).toEqual("first last");
+        expect(formState.fullName.dirty).toEqual(false);
         formState.firstName.value = "change";
         expect(formState.fullName.value).toEqual("change last");
+        expect(formState.fullName.dirty).toEqual(true);
         formState.revertChanges();
         expect(formState.firstName.value).toEqual("first");
     });
@@ -1076,6 +1106,45 @@ describe("formState", () => {
             id: "a:1",
             books: [{ id: "b:1", title: "t1b" }, { id: "b:2" }],
         });
+        // And add a 3rd new book
+        formState.books.add({ title: "t3" });
+        // Then we get the author id (for updates) and all 3 books
+        expect(formState.changedValue).toEqual({
+            id: "a:1",
+            books: [{ id: "b:1", title: "t1b" }, { id: "b:2" }, { title: "t3" }],
+        });
+        // And we can still get the original value
+        expect(formState.originalValue).toEqual({
+            id: "a:1",
+            firstName: "f",
+            books: [
+                { id: "b:1", title: "t1" },
+                { id: "b:2", title: "t2" },
+            ],
+        });
+        // And the books.originalValue as well
+        expect(formState.books.originalValue).toEqual([
+            { id: "b:1", title: "t1" },
+            { id: "b:2", title: "t2" },
+        ]);
+        // And when we commit changes
+        formState.commitChanges();
+        // Then our originalValue reflects the commit
+        expect(formState.originalValue).toEqual({
+            id: "a:1",
+            firstName: "f",
+            books: [
+                { id: "b:1", title: "t1b" },
+                { id: "b:2", title: "t2" },
+                { id: undefined, title: "t3" },
+            ],
+        });
+        // And the books.originalValue as well
+        expect(formState.books.originalValue).toEqual([
+            { id: "b:1", title: "t1b" },
+            { id: "b:2", title: "t2" },
+            { title: "t3" },
+        ]);
     });
     it("can return only changed but incremental list fields", () => {
         // Given an author

package/dist/useFormState.test.js

@@ -244,9 +244,11 @@ describe("useFormState", () => {
         // Given a component
         // And it's using a class/mobx proxy as the basis for the data
         class AuthorRow {
-            constructor(firstName, lastName) {
+            constructor(firstName, lastName, books) {
                 this.firstName = firstName;
                 this.lastName = lastName;
+                this.books = books;
+                (0, mobx_1.makeAutoObservable)(this);
             }
             get fullName() {
                 return this.firstName + " " + this.lastName;
@@ -254,27 +256,32 @@ describe("useFormState", () => {
         }
         function TestComponent() {
             // And we have two sets of data
-            const data1 = { firstName: "f1", lastName: "l1" };
-            const data2 = { firstName: "f2", lastName: "l2" };
+            const data1 = { firstName: "f1", lastName: "l1", books: [] };
+            const data2 = { firstName: "f2", lastName: "l2", books: [{ title: "t1" }] };
             // And we start out with data1
             const [data, setData] = (0, react_2.useState)(data1);
-            const author = (0, react_2.useMemo)(() => new AuthorRow(data.firstName, data.lastName), [data]);
+            const author = (0, react_2.useMemo)(() => new AuthorRow(data.firstName, data.lastName, data.books), [data]);
             const config = (0, react_2.useMemo)(() => ({
                 firstName: { type: "value" },
                 lastName: { type: "value" },
                 fullName: { type: "value", computed: true },
+                books: { type: "list", config: { title: { type: "value" } } },
             }), []);
             const form = (0, useFormState_1.useFormState)({ config, init: { input: author, map: (a) => a } });
-            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "fullName", children: form.fullName.value }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) })] })) }));
+            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "fullName", children: form.fullName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "booksLength", children: form.books.rows.length }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "booksDirty", children: String(form.books.touched) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) })] })) }));
         }
         // And we start out with the initial query data
         const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         expect(r.firstName.textContent).toEqual("f1");
         expect(r.fullName.textContent).toEqual("f1 l1");
+        expect(r.booksLength.textContent).toEqual("0");
+        expect(r.booksDirty.textContent).toEqual("false");
         // When the new query is ran i.e. due to a cache refresh
         (0, rtl_utils_1.click)(r.refreshData);
         expect(r.firstName.textContent).toEqual("f2");
         expect(r.fullName.textContent).toEqual("f2 l2");
+        expect(r.booksLength.textContent).toEqual("1");
+        expect(r.booksDirty.textContent).toEqual("false");
     });
     it("can trigger auto save for fields in list that were initially undefined", async () => {
         const autoSave = jest.fn();

package/dist/useFormStates.js

@@ -64,7 +64,9 @@ function useFormStates(opts) {
         }
         // If the source of truth changed, then update the existing state and return it.
         if (existing && existing[1] !== input) {
-            form.set((0, utils_1.initValue)(config, map ? { map, input } : input), { refreshing: true });
+            form.set((0, utils_1.initValue)(config, map ? { map, input } : input), {
+                refreshing: true,
+            });
             existing[1] = input;
         }
         form.readOnly = readOnlyRef.current || !!opts.readOnly;

package/dist/utils.d.ts

@@ -44,3 +44,5 @@ export declare function areEqual<T>(a?: T, b?: T, strictOrder?: boolean): boolea
 export declare function hasToJSON(o?: unknown): o is {
     toJSON(): void;
 };
+/** Make a clone of `obj`, but only recurse into POJOs and Arrays...and stores. */
+export declare function deepClone<T>(obj: T, map?: WeakMap<WeakKey, any>): T;

package/dist/utils.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hasToJSON = exports.areEqual = exports.isEmpty = exports.isNotUndefined = exports.pickFields = exports.isQuery = exports.isInput = exports.initValue = exports.assertNever = exports.fail = void 0;
+exports.deepClone = exports.hasToJSON = exports.areEqual = exports.isEmpty = exports.isNotUndefined = exports.pickFields = exports.isQuery = exports.isInput = exports.initValue = exports.assertNever = exports.fail = void 0;
 const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 const is_plain_object_1 = require("is-plain-object");
 const mobx_1 = require("mobx");
@@ -126,3 +126,25 @@ function hasToJSON(o) {
     return !!(o && typeof o === "object" && "toJSON" in o);
 }
 exports.hasToJSON = hasToJSON;
+/** Make a clone of `obj`, but only recurse into POJOs and Arrays...and stores. */
+function deepClone(obj, map = new WeakMap()) {
+    if (obj && typeof obj === "object" && ((0, is_plain_object_1.isPlainObject)(obj) || Array.isArray(obj) || (0, mobx_1.isObservable)(obj))) {
+        if (map.has(obj))
+            return map.get(obj);
+        const result = Array.isArray(obj) ? [] : {};
+        map.set(obj, result);
+        Object.assign(result, ...getAllPropertyNames(obj).map((key) => ({ [key]: deepClone(obj[key], map) })));
+        return result;
+    }
+    else {
+        return obj;
+    }
+}
+exports.deepClone = deepClone;
+/** Returns all property names, including mobx computeds (non-enumerable) & inherited. */
+function getAllPropertyNames(obj) {
+    const proto = Object.getPrototypeOf(obj);
+    // Don't crawl up into Object.prototype, or into arrays/observable arrays
+    const inherited = proto && proto !== Object.prototype && !Array.isArray(obj) ? getAllPropertyNames(proto) : [];
+    return [...new Set(Object.getOwnPropertyNames(obj).concat(inherited))];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/form-state",
-  "version": "2.21.0",
+  "version": "2.22.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",