@homebound/form-state 2.17.1 → 2.18.0

package/dist/config.d.ts

@@ -63,6 +63,8 @@ export declare type ListFieldConfig<T, U> = {
      * default behavior.
      */
     update?: "exhaustive" | "incremental";
+    /** Set to not consider the order of the list when evaluating changed/dirty states. */
+    strictOrder?: false;
 };
 export declare type ObjectFieldConfig<U> = {
     type: "object";

package/dist/fields/listField.d.ts

@@ -8,4 +8,4 @@ export interface ListFieldState<U> extends Omit<FieldState<U[]>, "originalValue"
     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<T, U>, config: ObjectConfig<U>, maybeAutoSave: () => void): ListFieldState<U>;
+export declare function newListFieldState<T, K extends keyof T, U>(parentInstance: T, parentState: () => ObjectState<T>, key: K, rules: Rule<readonly ObjectState<U>[]>[], listConfig: ListFieldConfig<T, U>, config: ObjectConfig<U>, strictOrder: boolean, maybeAutoSave: () => void): ListFieldState<U>;

package/dist/fields/listField.js

@@ -5,7 +5,7 @@ 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, maybeAutoSave) {
+function newListFieldState(parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeAutoSave) {
     // Keep a map of "item in the parent list" -> "that item's ObjectState"
     const rowMap = new Map();
     const _tick = mobx_1.observable({ value: 1 });
@@ -37,7 +37,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             this.set(v);
         },
         get dirty() {
-            return this.rows.some((r) => r.dirty) || this.hasNewItems();
+            return this.rows.some((r) => r.dirty) || this.hasChanged();
         },
         get required() {
             return this.rules.some((rule) => rule === rules_1.required);
@@ -46,21 +46,22 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             return parentState().isNewEntity;
         },
         // private
-        hasNewItems() {
+        hasChanged() {
             const [current, original] = [this.value || [], originalCopy || []];
-            // Instead of relying on just object identities, we look up each child's state
-            // in rowMap, because we already dedup/check object identity (i.e. look for id fields)
-            // when create object states.
-            const a = current.every((e) => {
-                const state = rowMap.get(e);
-                return original.some((e) => rowMap.get(e) === state);
-            });
-            const b = original.every((e) => {
+            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;
+                });
+            }
+            return !original.every((e) => {
                 const state = rowMap.get(e);
                 return current.some((e) => rowMap.get(e) === state);
             });
-            const isSame = a && b;
-            return !isSame;
         },
         // And we can derive each value's ObjectState wrapper as needed from the rowMap cache
         get rows() {
@@ -82,7 +83,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         },
         // TODO Should this be true when all rows are touched?
         get touched() {
-            return this.rows.some((r) => r.touched) || this.hasNewItems();
+            return this.rows.some((r) => r.touched) || this.hasChanged();
         },
         set touched(touched) {
             this.rows.forEach((r) => (r.touched = touched));

package/dist/fields/objectField.js

@@ -35,7 +35,7 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         return proxy;
     }
     const fieldStates = Object.entries(config).map(([_key, _config]) => {
-        var _a;
+        var _a, _b;
         const key = _key;
         const config = _config;
         let field;
@@ -43,7 +43,7 @@ function newObjectState(config, parentState, parentListState, instance, key, may
             field = valueField_1.newValueFieldState(instance, getObjectState, key, config.rules || [], config.isIdKey || key === "id", config.isDeleteKey || false, config.isReadOnlyKey || false, config.computed || false, config.readOnly || false, (_a = config.strictOrder) !== null && _a !== void 0 ? _a : true, maybeAutoSave);
         }
         else if (config.type === "list") {
-            field = listField_1.newListFieldState(instance, getObjectState, key, config.rules || [], config, config.config, maybeAutoSave);
+            field = listField_1.newListFieldState(instance, getObjectState, key, config.rules || [], config, config.config, (_b = config.strictOrder) !== null && _b !== void 0 ? _b : true, maybeAutoSave);
         }
         else if (config.type === "object") {
             if (!instance[key]) {

package/dist/formState.test.js

@@ -1320,6 +1320,41 @@ describe("formState", () => {
         // The list is again dirty
         expect(a1.books.dirty).toBeTruthy();
     });
+    it("can properly evaluate dirty lists when order changes", () => {
+        // Given a list state in a specific order
+        const a = createAuthorInputState({ books: [{ title: "t1" }, { title: "t2" }] });
+        expect(a.books.dirty).toBeFalsy();
+        // When changing that order
+        const book1 = a.books.rows[0].value;
+        a.books.remove(book1);
+        a.books.add(book1);
+        // Then the list state is considered dirty.
+        expect(a.books.dirty).toBeTruthy();
+        // When putting the books back in the original order
+        a.books.remove(book1);
+        a.books.add(book1, 0);
+        // Then the list state is no longer dirty
+        expect(a.books.dirty).toBeFalsy();
+    });
+    it("can optionally ignore the order of list state rows when determining dirty state", () => {
+        // Given a list state in a specific order, and the `strictOrder` option set to `false`
+        const a = objectField_1.createObjectState({
+            books: {
+                type: "list",
+                strictOrder: false,
+                config: {
+                    title: { type: "value", rules: [rules_1.required] },
+                },
+            },
+        }, { books: [{ title: "t1" }, { title: "t2" }] });
+        expect(a.books.dirty).toBeFalsy();
+        // When changing that order
+        const book1 = a.books.rows[0].value;
+        a.books.remove(book1);
+        a.books.add(book1);
+        // Then the list state is still not considered dirty.
+        expect(a.books.dirty).toBeFalsy();
+    });
     describe("fragments", () => {
         it("ignores changes within fragments", () => {
             const a = objectField_1.createObjectState({ title: { type: "value" }, data: { type: "fragment" } }, { title: "b1", data: objectField_1.fragment({ foo: "1" }) });

package/package.json

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