@homebound/form-state 2.26.1 → 2.26.3

package/dist/fields/listField.js

@@ -53,6 +53,7 @@ function newListFieldState(parentCopy, parentInstance, parentState, key, rules,
             var _a;
             return _tick.value > 0 && _childTick.value > 0 ? ((_a = parentInstance[key]) !== null && _a !== void 0 ? _a : []) : (0, utils_1.fail)();
         },
+        _kind: "list",
         _focused: false,
         _readOnly: false,
         _loading: false,

package/dist/fields/objectField.js

@@ -57,6 +57,10 @@ function newObjectState(config, parentState, parentInstance, parentListState, in
             field = (0, listField_1.newListFieldState)(originalCopy, instance, getObjectState, key, config.rules || [], config, { type: "object", config: config.config }, (_d = config.strictOrder) !== null && _d !== void 0 ? _d : true, maybeAutoSave);
         }
         else if (config.type === "object") {
+            // Because our objectField will fundamentally want to do `child.firstName.set(...)` or
+            // even `child.firstName !== undefined`, etc., we "simplify" things by always setting
+            // an empty object, for our child valueFields/listFields to use/read from, although
+            // we then have to "oh right ignore {}" in places like `dirty`.
             if (!instance[key]) {
                 instance[key] = {};
             }
@@ -131,7 +135,10 @@ function newObjectState(config, parentState, parentInstance, parentListState, in
             return getFields(this).flatMap((f) => f.errors.map((e) => `${f.key}: ${e}`));
         },
         get dirty() {
-            return getFields(this).some((f) => f.dirty) || this.isUnset();
+            return (getFields(this).some((f) => f.dirty) ||
+                // `isUnset` checks if our `parent[key] === undefined`, which can mean "surely we're dirty",
+                // but as long as we've got some keys actually set
+                (this.isUnset() && !(0, utils_1.areEqual)(this.value, {})));
         },
         get isNewEntity() {
             const idField = getFields(this).find((f) => f._isIdKey);
@@ -196,6 +203,7 @@ function newObjectState(config, parentState, parentInstance, parentListState, in
                 return null;
             }
             getFields(this).forEach((f) => {
+                var _a;
                 if (f._computed)
                     return;
                 // References only include the id key below
@@ -205,8 +213,14 @@ function newObjectState(config, parentState, parentInstance, parentListState, in
                     // If the caller used useFormState.ifUndefined to provide some default values, then those keys may not
                     // look dirty, but if we're new we should include them anyway.
                     (this.isNewEntity && f._kind === "value" && f.value !== undefined) ||
-                    // And unless they're empty sub-objects
-                    (this.isNewEntity && f._kind === "object" && Object.entries(f.changedValue).length > 0)) {
+                    // ...or they're non-empty sub-objects
+                    (this.isNewEntity &&
+                        f._kind === "object" &&
+                        // Child objects that are unset will have `changedValue = null`
+                        f.changedValue &&
+                        Object.entries(f.changedValue).length > 0) ||
+                    // ...or they're non-empty sub-lists
+                    (this.isNewEntity && f._kind === "list" && ((_a = f.value) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
                     result[f.key] = f.changedValue;
                 }
             });

package/dist/formState.test.js

@@ -595,6 +595,19 @@ describe("formState", () => {
         a1.firstName.set("a1");
         expect(a1.dirty).toBeFalsy();
     });
+    it("realizes object fields set to null aren't actually dirty", () => {
+        // Given we started off with a `object: undefined`
+        const a1 = createAuthorWithAddressInputState({ address: undefined });
+        expect(a1.address.dirty).toBe(false);
+        expect(a1.address.value).toEqual({});
+        // And it's later set to null, i.e. from a mutation returning `{ address: null }`
+        a1.set({ firstName: "a1", address: null });
+        // Then we convert it to `{}` to potentially hold data
+        expect(a1.address.value).toEqual({});
+        // But we don't consider the address dirty
+        expect(a1.address.dirty).toBe(false);
+        expect(a1.changedValue).toEqual({ firstName: "a1" });
+    });
     it("knows an object's field of type object is dirty", () => {
         const a1 = createAuthorInputState({
             books: [{ title: "b1", classification: formStateDomain_1.dd100 }],
@@ -1069,6 +1082,23 @@ describe("formState", () => {
         // because this might trigger creating a throw-away entity
         expect(formState.changedValue).toEqual({ firstName: "f" });
     });
+    it("changedValue includes initialized-and-unchanged list fields", () => {
+        // Given a new author that is initialized with a new book
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, {
+            books: [{ title: "t1" }],
+        });
+        // Then changedValue realizes that even though `books` is not changed, it should be included
+        expect(formState.books.dirty).toBe(false);
+        expect(formState.changedValue).toEqual({ books: [{ title: "t1" }] });
+    });
+    it("changedValue skips initialized-and-unchanged list fields that are empty", () => {
+        // Given a new author that is initialized with no books
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, {
+            books: [],
+        });
+        // Then changedValue doesn't include the books
+        expect(formState.changedValue).toEqual({});
+    });
     it("changedValue includes new entity nested fields", () => {
         // Given a new author with an address FK
         const formState = (0, objectField_1.createObjectState)(authorWithAddressFkConfig, {

package/dist/useFormState.test.js

@@ -346,11 +346,12 @@ describe("useFormState", () => {
                 init: { input: undefined, map: (d) => d },
                 autoSave,
             });
-            return (0, jsx_runtime_1.jsx)("div", { "data-testid": "len", children: form.books.value.length });
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "len", children: form.books.value.length }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "dirty", children: String(form.books.dirty) })] }));
         }
         // Then we can still read it as empty
         const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         expect(r.len).toHaveTextContent("0");
+        expect(r.dirty).toHaveTextContent("false");
     });
     it("does not infinite loop when calling set inside of auto-save", async () => {
         // Given a component

package/package.json

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