@homebound/form-state 2.3.0 → 2.5.1

package/dist/FormStateApp.js

@@ -20,7 +20,7 @@ function FormStateApp() {
                 return state.firstName.value === state.lastName.value ? "Last name cannot equal first name" : undefined;
             });
         },
-        autoSave() {
+        async autoSave() {
             console.log("saving", formState.changedValue);
         },
     });

package/dist/formState.d.ts

@@ -72,8 +72,10 @@ export interface FieldState<T, V> {
     readonly changedValue: V;
     /** Focuses the field. Disables changes from `ObjectState.set` calls. */
     focus(): void;
-    /** Blur essentially touches the field. */
+    /** Blur marks the field as touched and triggers an auto-save. */
     blur(): void;
+    /** Triggers an auto-save; the caller (i.e. useFormState) should still dirty & valid check. */
+    maybeAutoSave(): void;
     set(value: V, opts?: SetOpts): void;
     /** Reverts back to the original value and resets dirty/touched. */
     reset(): void;
@@ -161,7 +163,7 @@ export declare type ObjectFieldConfig<U> = {
  * individual fields as well as the top-level form/object itself.
  */
 export declare function createObjectState<T>(config: ObjectConfig<T>, instance: T, opts?: {
-    onBlur?: () => void;
+    maybeAutoSave?: () => void;
 }): ObjectState<T>;
 declare type Primitive = undefined | null | boolean | string | number | Function | Date | {
     toJSON(): any;

package/dist/formState.js

@@ -12,7 +12,8 @@ const utils_1 = require("./utils");
 // We pre-emptively make this a mobx action so that it's identity doesn't change when proxy-ified
 // and breaks our ability to do `rules.some(r => r === required)`.
 exports.required = mobx_1.action(({ value: v }) => {
-    return v !== undefined && v !== null && v !== "" ? undefined : "Required";
+    const isEmptyString = typeof v === "string" ? v.trim() === "" : false;
+    return v !== undefined && v !== null && !isEmptyString ? undefined : "Required";
 });
 /**
  * Creates a new `ObjectState` for a given form object `T` given config rules in `config`.
@@ -23,10 +24,10 @@ exports.required = mobx_1.action(({ value: v }) => {
  */
 function createObjectState(config, instance, opts = {}) {
     const noop = () => { };
-    return newObjectState(config, undefined, instance, undefined, opts.onBlur || noop);
+    return newObjectState(config, undefined, instance, undefined, opts.maybeAutoSave || noop);
 }
 exports.createObjectState = createObjectState;
-function newObjectState(config, parentState, instance, key, onBlur) {
+function newObjectState(config, parentState, instance, key, maybeAutoSave) {
     // This is what we return, but we only know it's value until we call `observable`, so
     // we create a mutable variable to capture it so that we can create fields/call their
     // constructors and give them a way to access it later.
@@ -42,16 +43,16 @@ function newObjectState(config, parentState, instance, key, onBlur) {
         const config = _config;
         let field;
         if (config.type === "value") {
-            field = newValueFieldState(instance, getObjectState, key, config.rules || [], config.isIdKey || key === "id", config.isDeleteKey || false, config.isReadOnlyKey || false, config.computed || false, config.readOnly || false, onBlur);
+            field = newValueFieldState(instance, getObjectState, key, config.rules || [], config.isIdKey || key === "id", config.isDeleteKey || false, config.isReadOnlyKey || false, config.computed || false, config.readOnly || false, maybeAutoSave);
         }
         else if (config.type === "list") {
-            field = newListFieldState(instance, getObjectState, key, config.rules || [], config, config.config, onBlur);
+            field = newListFieldState(instance, getObjectState, key, config.rules || [], config, config.config, maybeAutoSave);
         }
         else if (config.type === "object") {
             if (!instance[key]) {
                 instance[key] = {};
             }
-            field = newObjectState(config.config, getObjectState, instance[key], key, onBlur);
+            field = newObjectState(config.config, getObjectState, instance[key], key, maybeAutoSave);
         }
         else {
             throw new Error("Unsupported");
@@ -185,7 +186,7 @@ function newObjectState(config, parentState, instance, key, onBlur) {
     mobx_1.reaction(() => getFields(proxy).map((f) => f.value), () => _tick.value++);
     return proxy;
 }
-function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, isDeleteKey, isReadOnlyKey, computed, readOnly, onBlur) {
+function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, isDeleteKey, isReadOnlyKey, computed, readOnly, maybeAutoSave) {
     // keep a copy here for reference equality
     const value = parentInstance[key];
     let _originalValue = value === null ? undefined : is_plain_object_1.isPlainObject(value) ? mobx_1.toJS(value) : value;
@@ -260,14 +261,15 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             this._focused = true;
         },
         blur() {
-            // Now that the user is done editing the field, we sneak in some trim logic
-            if (this._focused) {
-                this.maybeTrim();
-            }
+            this.maybeAutoSave();
             this._focused = false;
+        },
+        maybeAutoSave() {
+            // Now that the user is done editing the field (note maybe w/o blurring, i.e. if they hit enter), we sneak in some trim logic
+            this.maybeTrim();
             // touched is readonly, but we're allowed to change it
             this.touched = true;
-            onBlur();
+            maybeAutoSave();
         },
         set(value, opts = {}) {
             if (this.readOnly && !opts.resetting && !opts.refreshing) {
@@ -299,7 +301,7 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             // If we're being set programmatically, i.e. we don't currently have focus,
             // call blur to trigger any auto-saves.
             if (!this._focused && !opts.refreshing && !opts.resetting && this.dirty && changed && opts.autoSave !== false) {
-                this.blur();
+                this.maybeAutoSave();
             }
         },
         reset() {
@@ -339,7 +341,7 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
     };
     return field;
 }
-function newListFieldState(parentInstance, parentState, key, rules, listConfig, config, onBlur) {
+function newListFieldState(parentInstance, parentState, key, rules, listConfig, config, 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 });
@@ -399,7 +401,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
                 // Because we're reading from this.value, child will be the proxy version
                 let childState = rowMap.get(child);
                 if (!childState) {
-                    childState = newObjectState(config, parentState, child, undefined, onBlur);
+                    childState = newObjectState(config, parentState, child, undefined, maybeAutoSave);
                     rowMap.set(child, childState);
                 }
                 return childState;
@@ -442,8 +444,11 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         },
         blur() {
             this._focused = false;
+            this.maybeAutoSave();
+        },
+        maybeAutoSave() {
             this.touched = true;
-            onBlur();
+            maybeAutoSave();
         },
         set(values, opts = {}) {
             if (this.readOnly && !opts.resetting && !opts.refreshing) {
@@ -462,7 +467,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
                         }
                     }
                     // If we didn't have an existing child, just make a new object state
-                    childState = createObjectState(config, value, { onBlur });
+                    childState = createObjectState(config, value, { maybeAutoSave });
                     rowMap.set(value, childState);
                 }
                 // Return the already-observable'd value so that our `parent.value[key] = values` doesn't re-proxy things
@@ -476,12 +481,12 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         },
         add(value, spliceIndex) {
             // This is called by the user, so value should be a non-proxy value we should keep
-            const childState = createObjectState(config, value, { onBlur });
+            const childState = createObjectState(config, value, { maybeAutoSave });
             rowMap.set(value, childState);
             this.ensureSet();
             this.value.splice(typeof spliceIndex === "number" ? spliceIndex : this.value.length, 0, childState.value);
             _tick.value++;
-            onBlur();
+            maybeAutoSave();
         },
         remove(indexOrValue) {
             this.ensureSet();
@@ -495,7 +500,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
                 }
             }
             _tick.value++;
-            onBlur();
+            maybeAutoSave();
         },
         reset() {
             if (originalCopy) {

package/dist/formState.test.js

@@ -39,6 +39,21 @@ describe("formState", () => {
         expect(a.title.required).toBeTruthy();
         expect(a.isPublished.required).toBeFalsy();
     });
+    it("trims whitespace within the required rule", () => {
+        const a = formState_1.createObjectState({ title: { type: "value", rules: [formState_1.required] } }, { title: "initial valid title" });
+        let numErrors = 0;
+        mobx_1.autorun(() => {
+            numErrors = a.title.errors.length;
+        });
+        expect(a.valid).toBeTruthy();
+        expect(numErrors).toEqual(0);
+        // When a value contains only whitespace
+        a.title.value = "  ";
+        expect(a.title.valid).toBeFalsy();
+        expect(numErrors).toEqual(1);
+        expect(a.title.errors).toEqual(["Required"]);
+        expect(a.errors).toEqual(["title: Required"]);
+    });
     it("can set values", () => {
         const a = formState_1.createObjectState({ title: { type: "value" } }, { title: "b1" });
         expect(a.title.value).toEqual("b1");
@@ -285,6 +300,52 @@ describe("formState", () => {
         expect(a.firstName.valid).toBeTruthy();
         expect(a.lastName.errors).toEqual(["Last name cannot be first name"]);
     });
+    it("passes sanitized values to validation rules", () => {
+        // Given a field with a validation rule
+        const rule = jest.fn().mockReturnValue("Required");
+        const a = formState_1.createObjectState({ firstName: { type: "value", rules: [rule] } }, {});
+        expect(rule).toHaveBeenCalledTimes(0);
+        // When the field is set to empty string
+        a.firstName.value = "";
+        expect(a.firstName.errors).toEqual(["Required"]);
+        expect(rule).toHaveBeenCalledTimes(1);
+        // Then the validation rule was passed undefined
+        expect(rule).toHaveBeenCalledWith({
+            value: undefined,
+            originalValue: undefined,
+            key: "firstName",
+            object: expect.anything(),
+        });
+    });
+    it("passes trimmed values to validation rules on maybeAutoSave", () => {
+        // Given we have a required rule
+        const rule = jest.fn().mockReturnValue("Required");
+        const a = formState_1.createObjectState({ firstName: { type: "value", rules: [rule] } }, {});
+        expect(rule).toHaveBeenCalledTimes(0);
+        // When the user initially sets an empty string value
+        a.firstName.focus();
+        a.firstName.value = "   ";
+        expect(a.firstName.errors).toEqual(["Required"]);
+        // Then initially the rule is called with the empty string
+        expect(rule).toHaveBeenCalledTimes(1);
+        expect(rule).toHaveBeenCalledWith({
+            value: "   ",
+            originalValue: undefined,
+            key: "firstName",
+            object: expect.anything(),
+        });
+        // But then when the field maybeAutoSaves (i.e. via blur)
+        a.firstName.maybeAutoSave();
+        expect(a.firstName.errors).toEqual(["Required"]);
+        // Then the rule is called with the undefined
+        expect(rule).toHaveBeenCalledTimes(2);
+        expect(rule).toHaveBeenCalledWith({
+            value: undefined,
+            originalValue: undefined,
+            key: "firstName",
+            object: expect.anything(),
+        });
+    });
     it("simple value changes trigger observers", () => {
         const a = formState_1.createObjectState({
             title: { type: "value", rules: [formState_1.required] },
@@ -330,78 +391,78 @@ describe("formState", () => {
         a1.books.remove(0);
         expect(a1.dirty).toBeFalsy();
     });
-    it("calls onBlur when adding or removing to a list", () => {
-        const onBlur = jest.fn();
-        const a1 = createAuthorInputState({ books: [] }, onBlur);
+    it("calls maybeAutoSave when adding or removing to a list", () => {
+        const maybeAutoSave = jest.fn();
+        const a1 = createAuthorInputState({ books: [] }, maybeAutoSave);
         expect(a1.books.dirty).toBeFalsy();
         a1.books.add({ title: "t2" });
         expect(a1.books.dirty).toBeTruthy();
         a1.books.remove(0);
         expect(a1.dirty).toBeFalsy();
-        expect(onBlur).toBeCalledTimes(2);
+        expect(maybeAutoSave).toBeCalledTimes(2);
     });
-    it("calls onBlur when programmatically setting a value", () => {
-        const onBlur = jest.fn();
+    it("calls maybeAutoSave when programmatically setting a value", () => {
+        const maybeAutoSave = jest.fn();
         // Given an author listening for blur
-        const a1 = createAuthorInputState({ books: [{}] }, onBlur);
+        const a1 = createAuthorInputState({ books: [{}] }, maybeAutoSave);
         // When we programmatically set a field that isn't focused
         a1.firstName.value = "first";
-        // Then we call onBlur
-        expect(onBlur).toBeCalledTimes(1);
+        // Then we call maybeAutoSave
+        expect(maybeAutoSave).toBeCalledTimes(1);
         // And when we set a nested value
         a1.books.rows[0].title.value = "title";
-        // Then we called onBlur again
-        expect(onBlur).toBeCalledTimes(2);
+        // Then we called maybeAutoSave again
+        expect(maybeAutoSave).toBeCalledTimes(2);
     });
-    it("can skip onBlur when programmatically setting a value", () => {
-        const onBlur = jest.fn();
+    it("can skip maybeAutoSave when programmatically setting a value", () => {
+        const maybeAutoSave = jest.fn();
         // Given an author listening for blur
-        const a1 = createAuthorInputState({ books: [{}] }, onBlur);
+        const a1 = createAuthorInputState({ books: [{}] }, maybeAutoSave);
         // When we programmatically set a field that isn't focused
         a1.set({ firstName: "first" }, { autoSave: false });
-        // Then we don't call onBlur
-        expect(onBlur).toBeCalledTimes(0);
+        // Then we don't call maybeAutoSave
+        expect(maybeAutoSave).toBeCalledTimes(0);
     });
-    it("defers calling onBlur when setting a bound value", () => {
-        const onBlur = jest.fn();
+    it("defers calling maybeAutoSave when setting a focused value", () => {
+        const maybeAutoSave = jest.fn();
         // Given an author listening for blur
-        const a1 = createAuthorInputState({ books: [{}] }, onBlur);
+        const a1 = createAuthorInputState({ books: [{}] }, maybeAutoSave);
         // And the field is focused
         a1.firstName.focus();
         // When we we set the field
         a1.firstName.value = "first";
-        // Then we don't call onBlur
-        expect(onBlur).toBeCalledTimes(0);
+        // Then we don't call maybeAutoSave
+        expect(maybeAutoSave).toBeCalledTimes(0);
     });
-    it("skips onBlur when refreshing", () => {
-        const onBlur = jest.fn();
+    it("skips maybeAutoSave when refreshing", () => {
+        const maybeAutoSave = jest.fn();
         // Given an author listening for blur
-        const a1 = createAuthorInputState({ books: [{}] }, onBlur);
+        const a1 = createAuthorInputState({ books: [{}] }, maybeAutoSave);
         // When we programmatically set a field that isn't focused
         a1.set({ firstName: "first" }, { refreshing: true });
-        // Then we don't call onBlur
-        expect(onBlur).toBeCalledTimes(0);
+        // Then we don't call maybeAutoSave
+        expect(maybeAutoSave).toBeCalledTimes(0);
     });
-    it("skips onBlur when resetting", () => {
-        const onBlur = jest.fn();
+    it("skips maybeAutoSave when resetting", () => {
+        const maybeAutoSave = jest.fn();
         // Given an author listening for blur
-        const a1 = createAuthorInputState({ books: [{}] }, onBlur);
-        // And we called onBlur once
+        const a1 = createAuthorInputState({ books: [{}] }, maybeAutoSave);
+        // And we called maybeAutoSave once
         a1.set({ firstName: "first" });
-        expect(onBlur).toBeCalledTimes(1);
+        expect(maybeAutoSave).toBeCalledTimes(1);
         // When we reset
         a1.reset();
         // We don't call blur again
-        expect(onBlur).toBeCalledTimes(1);
+        expect(maybeAutoSave).toBeCalledTimes(1);
     });
-    it("skips onBlur when not dirty", () => {
-        const onBlur = jest.fn();
+    it("skips maybeAutoSave when not dirty", () => {
+        const maybeAutoSave = jest.fn();
         // Given an author listening for blur
-        const a1 = createAuthorInputState({ firstName: "first", books: [{}] }, onBlur);
+        const a1 = createAuthorInputState({ firstName: "first", books: [{}] }, maybeAutoSave);
         // When we programmatically set a field to it's existing valued
         a1.firstName.value = "first";
-        // Then we don't call onBlur
-        expect(onBlur).toBeCalledTimes(0);
+        // Then we don't call maybeAutoSave
+        expect(maybeAutoSave).toBeCalledTimes(0);
     });
     it("knows list of primitives are dirty", () => {
         const a1 = formState_1.createObjectState({ favoriteColors: { type: "value" } }, {});
@@ -964,6 +1025,20 @@ describe("formState", () => {
         // Then we trim it
         expect(formState.firstName.value).toEqual("f");
     });
+    it("trims string values on maybeAutoSave", () => {
+        const formState = formState_1.createObjectState(authorWithBooksConfig, { firstName: "f", lastName: "l" });
+        // Given the user is typing with spaces
+        formState.firstName.focus();
+        formState.firstName.set("f ");
+        // And we initially keep the space
+        expect(formState.firstName.value).toEqual("f ");
+        // When the user hits Enter (which will call maybeAutoSave)
+        formState.firstName.maybeAutoSave();
+        // Then we trim it
+        expect(formState.firstName.value).toEqual("f");
+        // And the field is considered touched
+        expect(formState.firstName.touched).toEqual(true);
+    });
     it("trims empty values to undefined on blur", () => {
         const formState = formState_1.createObjectState(authorWithBooksConfig, { firstName: "f", lastName: "l" });
         // Given the user is typing with only spaces
@@ -1102,8 +1177,8 @@ const authorWithBooksConfig = {
         },
     },
 };
-function createAuthorInputState(input, onBlur) {
-    return formState_1.createObjectState(authorWithBooksConfig, input, { onBlur });
+function createAuthorInputState(input, maybeAutoSave) {
+    return formState_1.createObjectState(authorWithBooksConfig, input, { maybeAutoSave });
 }
 const authorWithAddressConfig = {
     id: { type: "value" },

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { createObjectState, FieldState, ListFieldState, ObjectConfig, ObjectState, required, Rule, } from "./formState";
 export { useFormState } from "./useFormState";
+export { useFormStates } from "./useFormStates";

package/dist/index.js

@@ -1,8 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFormState = exports.required = exports.createObjectState = void 0;
+exports.useFormStates = exports.useFormState = exports.required = exports.createObjectState = void 0;
 var formState_1 = require("./formState");
 Object.defineProperty(exports, "createObjectState", { enumerable: true, get: function () { return formState_1.createObjectState; } });
 Object.defineProperty(exports, "required", { enumerable: true, get: function () { return formState_1.required; } });
 var useFormState_1 = require("./useFormState");
 Object.defineProperty(exports, "useFormState", { enumerable: true, get: function () { return useFormState_1.useFormState; } });
+var useFormStates_1 = require("./useFormStates");
+Object.defineProperty(exports, "useFormStates", { enumerable: true, get: function () { return useFormStates_1.useFormStates; } });

package/dist/setupTests.js

@@ -4,5 +4,10 @@ require("@testing-library/jest-dom");
 const mobx_1 = require("mobx");
 // formState doesn't use actions
 mobx_1.configure({ enforceActions: "never" });
-beforeAll(() => jest.useFakeTimers("modern"));
-afterAll(() => jest.useRealTimers());
+beforeEach(() => {
+    jest.useFakeTimers("modern");
+});
+afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+});

package/dist/useFormState.d.ts

@@ -37,21 +37,9 @@ export declare type UseFormStateOpts<T, I> = {
      *
      * Does not need to be stable/useMemo'd.
      */
-    autoSave?: (state: ObjectState<T>) => void;
+    autoSave?: (state: ObjectState<T>) => Promise<unknown>;
 };
 /**
  * Creates a formState instance for editing in a form.
  */
 export declare function useFormState<T, I>(opts: UseFormStateOpts<T, I>): ObjectState<T>;
-/**
- * Picks ony fields out of `instance` that are in the `formConfig`.
- *
- * This is useful for creating a form input from a GraphQL query result,
- * but ignoring extra data in the query that we don't want/need in the form.
- *
- * (Especially because the form.value will become our mutation's input type
- * that goes on the wire, we don't want superfluous data in it.)
- */
-export declare function pickFields<T, I>(formConfig: ObjectConfig<T>, instance: I): {
-    [K in keyof T]: K extends keyof I ? I[K] : never;
-};

package/dist/useFormState.js

@@ -1,12 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pickFields = exports.useFormState = void 0;
+exports.useFormState = void 0;
 const is_plain_object_1 = require("is-plain-object");
-const mobx_1 = require("mobx");
 const react_1 = require("react");
 const formState_1 = require("./formState");
 const utils_1 = require("./utils");
+// If the user's autoSave hook makes some last-minute `.set` calls to sneak
+// in some business logic right before their GraphQL mutation call, ignore it
+// so that we don't infinite loop.
 let isAutoSaving = false;
+// `pendingAutoSave` is a flag for determining if we need to immediately call `maybeAutoSave` again after the initial Promise finishes
+// This could happen if a field triggers auto-save while another field's auto-save is already in progress.
+let pendingAutoSave = false;
+let timerId;
 /**
  * Creates a formState instance for editing in a form.
  */
@@ -17,28 +23,47 @@ function useFormState(opts) {
     autoSaveRef.current = autoSave;
     const firstRunRef = react_1.useRef(true);
     // This is a little weird, but we need to know ahead of time, before the form useMemo, if we're working with classes/mobx proxies
-    const [firstInitValue] = react_1.useState(() => initValue(config, init));
+    const [firstInitValue] = react_1.useState(() => utils_1.initValue(config, init));
     const isWrappingMobxProxy = !is_plain_object_1.isPlainObject(firstInitValue);
     // If they're using init.input, useMemo on it (and it might be an array), otherwise allow the identity of init be unstable
     const dep = init && "input" in init && "map" in init ? (Array.isArray(init.input) ? init.input : [init.input]) : [];
     const form = react_1.useMemo(() => {
-        function onBlur() {
-            // Don't use canSave() because we don't want to set touched for all of the field
+        function maybeAutoSave() {
+            if (isAutoSaving === "in-flight") {
+                pendingAutoSave = true;
+            }
+            else if (isAutoSaving === "queued") {
+                return;
+            }
+            // Don't use canSave() because we don't want to set touched for all the fields
             if (autoSaveRef.current && form.dirty && form.valid && !isAutoSaving) {
-                try {
-                    isAutoSaving = true;
-                    autoSaveRef.current(form);
-                }
-                finally {
-                    isAutoSaving = false;
-                }
+                isAutoSaving = "queued";
+                // We use setTimeout as a cheap way to wait until the end of the current event listener
+                timerId = setTimeout(async () => {
+                    try {
+                        // We technically don't flip to in-flight until after the call in case the
+                        // user's autoSave function itself wants to call a .set.
+                        const promise = autoSaveRef.current(form);
+                        isAutoSaving = "in-flight";
+                        await promise;
+                    }
+                    finally {
+                        isAutoSaving = false;
+                        if (pendingAutoSave) {
+                            pendingAutoSave = false;
+                            // Push out the follow-up by 1 tick to allow refreshes to happen to potentially
+                            // un-dirty the just-saved data (e.g. if we run right away, the caller's maybeAutoSave
+                            // will see a form.changedValue that thinks the just-saved data is still dirty).
+                            setTimeout(maybeAutoSave, 0);
+                        }
+                    }
+                }, 0);
             }
         }
-        const value = firstRunRef.current ? firstInitValue : initValue(config, init);
-        const form = formState_1.createObjectState(config, value, { onBlur });
+        const value = firstRunRef.current ? firstInitValue : utils_1.initValue(config, init);
+        const form = formState_1.createObjectState(config, value, { maybeAutoSave });
         form.readOnly = readOnly;
         // The identity of `addRules` is not stable, but assume that it is for better UX.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
         (addRules || (() => { }))(form);
         firstRunRef.current = true;
         return form;
@@ -56,7 +81,7 @@ function useFormState(opts) {
             firstRunRef.current = false;
             return;
         }
-        form.set(initValue(config, init), { refreshing: true });
+        form.set(utils_1.initValue(config, init), { refreshing: true });
     }, [form, ...dep]);
     // Use useEffect so that we don't touch the form.init proxy during a render
     react_1.useEffect(() => {
@@ -65,59 +90,3 @@ function useFormState(opts) {
     return form;
 }
 exports.useFormState = useFormState;
-/** Introspects the `init` prop to see if has a `map` function/etc. and returns the form value. */
-function initValue(config, init) {
-    const initValue = init && "input" in init && "map" in init
-        ? init.input
-            ? init.map(init.input)
-            : init.ifUndefined || {}
-        : init || {};
-    return pickFields(config, initValue);
-}
-/**
- * Picks ony fields out of `instance` that are in the `formConfig`.
- *
- * This is useful for creating a form input from a GraphQL query result,
- * but ignoring extra data in the query that we don't want/need in the form.
- *
- * (Especially because the form.value will become our mutation's input type
- * that goes on the wire, we don't want superfluous data in it.)
- */
-function pickFields(formConfig, instance) {
-    // If the caller is using classes, i.e. with their own custom observable behavior, then just use as-is
-    if (!is_plain_object_1.isPlainObject(instance)) {
-        return instance;
-    }
-    return Object.fromEntries(Object.entries(formConfig).map(([key, _keyConfig]) => {
-        const keyConfig = _keyConfig;
-        const value = instance[key];
-        if (keyConfig.type === "object") {
-            if (value) {
-                return [key, pickFields(keyConfig.config, value)];
-            }
-            else {
-                return [key, value];
-            }
-        }
-        else if (keyConfig.type === "list") {
-            if (mobx_1.isObservable(value)) {
-                // If we hit an observable array, leave it as the existing proxy so the our
-                // ListFieldState will react to changes in the original array.
-                return [key, value];
-            }
-            else if (value) {
-                return [key, value.map((u) => pickFields(keyConfig.config, u))];
-            }
-            else {
-                return [key, value];
-            }
-        }
-        else if (keyConfig.type === "value") {
-            return [key, value];
-        }
-        else {
-            return utils_1.assertNever(keyConfig);
-        }
-    }));
-}
-exports.pickFields = pickFields;