@homebound/form-state 2.17.0 → 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

@@ -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<T, U> extends Omit<FieldState<U[]>, "originalValue"> {
+export interface ListFieldState<U> extends Omit<FieldState<U[]>, "originalValue"> {
     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<T, U>, config: ObjectConfig<U>, maybeAutoSave: () => void): ListFieldState<T, 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.d.ts

@@ -14,7 +14,7 @@ import { Builtin } from "../utils";
  * have exactly the on-the-wire type `T` that they need to submit to the backend, without doing the
  * manual mapping of "data that was in the form controls" into "data that the backend wants".
  *
- * Note that this can be hierarchical by having by having a field of `ListFieldState` that
+ * Note that this can be hierarchical by having a field of `ListFieldState` that
  * themselves each wrap an `ObjectState`, i.e.:
  *
  * ```
@@ -28,14 +28,14 @@ import { Builtin } from "../utils";
  *       - title: FieldState
  * ```
  */
-export declare type ObjectState<T, P = any> = FieldStates<T> & FieldState<T> & {
+export declare type ObjectState<T> = FieldStates<T> & FieldState<T> & {
     /** Sets the state of fields in `state`. */
     set(state: Partial<T>, opts?: SetOpts): void;
     /** Returns whether the object can be saved, i.e. is valid, but also as a side-effect marks touched. */
     canSave(): boolean;
 };
-export declare type ObjectStateInternal<T, P = any> = ObjectState<T, P> & {
-    set(value: P, opts?: InternalSetOpts): void;
+export declare type ObjectStateInternal<T> = ObjectState<T> & {
+    set(value: T, opts?: InternalSetOpts): void;
 };
 declare const fragmentSym: unique symbol;
 export declare type Fragment<V> = V & {
@@ -44,7 +44,7 @@ export declare type Fragment<V> = V & {
 export declare function fragment<V>(value: V): Fragment<V>;
 /** For a given input type `T`, decorate each field into the "field state" type that holds our form-relevant state, i.e. valid/touched/etc. */
 declare type FieldStates<T> = {
-    [K in keyof T]-?: T[K] extends Fragment<infer V> ? FragmentField<V> : T[K] extends Array<infer U> | null | undefined ? [U] extends [Builtin] ? FieldState<T[K]> : ListFieldState<T, U> : T[K] extends Builtin | null | undefined ? FieldState<T[K]> : ObjectState<T[K], T>;
+    [K in keyof T]-?: T[K] extends Fragment<infer V> ? FragmentField<V> : T[K] extends Array<infer U> | null | undefined ? [U] extends [Builtin] ? FieldState<T[K]> : ListFieldState<U> : T[K] extends Builtin | null | undefined ? FieldState<T[K]> : ObjectState<T[K]>;
 };
 /**
  * Creates a new `ObjectState` for a given form object `T` given config rules in `config`.
@@ -56,5 +56,5 @@ declare type FieldStates<T> = {
 export declare function createObjectState<T>(config: ObjectConfig<T>, instance: T, opts?: {
     maybeAutoSave?: () => void;
 }): ObjectState<T>;
-export declare function newObjectState<T, P = any>(config: ObjectConfig<T>, parentState: (() => ObjectState<P>) | undefined, parentListState: FieldState<any> | undefined, instance: T, key: keyof T | undefined, maybeAutoSave: () => void): ObjectState<T, P>;
+export declare function newObjectState<T, P = any>(config: ObjectConfig<T>, parentState: (() => ObjectState<P>) | undefined, parentListState: FieldState<any> | undefined, instance: T, key: keyof T | undefined, maybeAutoSave: () => void): ObjectState<T>;
 export {};

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.0",
+  "version": "2.18.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",