@homebound/form-state 2.10.1 → 2.13.0

package/dist/FormStateApp.js

@@ -52,8 +52,8 @@ function FormStateApp() {
                                                     jsx_runtime_1.jsx("td", { children: formState.valid.toString() }, void 0),
                                                     jsx_runtime_1.jsx("td", { children: formState.dirty.toString() }, void 0)] }, void 0) }, void 0)] }), void 0),
                                 jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("button", Object.assign({ "data-testid": "touch", onClick: () => (formState.touched = !formState.touched) }, { children: "touch" }), void 0),
-                                        jsx_runtime_1.jsx("button", Object.assign({ "data-testid": "reset", onClick: () => formState.reset() }, { children: "reset" }), void 0),
-                                        jsx_runtime_1.jsx("button", Object.assign({ "data-testid": "save", onClick: () => formState.save() }, { children: "save" }), void 0),
+                                        jsx_runtime_1.jsx("button", Object.assign({ "data-testid": "revertChanges", onClick: () => formState.revertChanges() }, { children: "revert" }), void 0),
+                                        jsx_runtime_1.jsx("button", Object.assign({ "data-testid": "commitChanges", onClick: () => formState.commitChanges() }, { children: "commit" }), void 0),
                                         jsx_runtime_1.jsx("button", Object.assign({ "data-testid": "set", onClick: () => formState.set({ firstName: "a2" }) }, { children: "set" }), void 0)] }, void 0)] }, void 0)] }), void 0) }), void 0));
         } }, void 0));
 }

package/dist/FormStateApp.test.js

@@ -12,7 +12,7 @@ describe("FormStateApp", () => {
         expect(r.firstName_dirty()).toHaveTextContent("true");
         react_1.fireEvent.blur(r.firstName());
         expect(r.firstName_touched()).toHaveTextContent("true");
-        rtl_utils_1.click(r.save);
+        rtl_utils_1.click(r.commitChanges);
         expect(r.firstName_dirty()).toHaveTextContent("false");
         expect(r.firstName_touched()).toHaveTextContent("false");
     });
@@ -20,7 +20,7 @@ describe("FormStateApp", () => {
         const r = await rtl_utils_1.render(jsx_runtime_1.jsx(FormStateApp_1.FormStateApp, {}, void 0));
         expect(r.firstName_original()).toHaveTextContent("a1");
         rtl_utils_1.click(r.set);
-        rtl_utils_1.click(r.save);
+        rtl_utils_1.click(r.commitChanges);
         expect(r.firstName_original()).toHaveTextContent("a2");
     });
 });

package/dist/fields/listField.js

@@ -19,12 +19,19 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         },
         _focused: false,
         _readOnly: false,
+        _loading: false,
         get readOnly() {
             return this._readOnly || parentState().readOnly;
         },
         set readOnly(readOnly) {
             this._readOnly = readOnly;
         },
+        get loading() {
+            return this._loading || parentState().loading;
+        },
+        set loading(loading) {
+            this._loading = loading;
+        },
         set value(v) {
             this.set(v);
         },
@@ -177,16 +184,14 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             _tick.value++;
             maybeAutoSave();
         },
-        reset() {
+        revertChanges() {
             if (originalCopy) {
                 this.set(originalCopy, { resetting: true });
-                this.rows.forEach((r) => r.reset());
+                this.rows.forEach((r) => r.revertChanges());
             }
         },
-        save() {
-            this.rows.forEach((r) => {
-                r.save();
-            });
+        commitChanges() {
+            this.rows.forEach((r) => r.commitChanges());
             originalCopy = [...(parentInstance[key] || [])];
             _tick.value++;
         },

package/dist/fields/objectField.js

@@ -68,6 +68,7 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         },
         // private
         _readOnly: false,
+        _loading: false,
         _considerDeleted() {
             const deleteField = getFields(this).find((f) => f._isDeleteKey);
             return !!(deleteField === null || deleteField === void 0 ? void 0 : deleteField.value);
@@ -91,6 +92,12 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         set readOnly(readOnly) {
             this._readOnly = readOnly;
         },
+        get loading() {
+            return this._loading || (parentState && parentState().loading) || !!(parentListState === null || parentListState === void 0 ? void 0 : parentListState.loading);
+        },
+        set loading(loading) {
+            this._loading = loading;
+        },
         get valid() {
             return getFields(this).every((f) => f.valid);
         },
@@ -125,12 +132,12 @@ function newObjectState(config, parentState, parentListState, instance, key, may
             });
         },
         // Resets all fields back to their original values
-        reset() {
-            getFields(this).forEach((f) => f.reset());
+        revertChanges() {
+            getFields(this).forEach((f) => f.revertChanges());
         },
         // Saves all current values into _originalValue
-        save() {
-            getFields(this).forEach((f) => f.save());
+        commitChanges() {
+            getFields(this).forEach((f) => f.commitChanges());
         },
         // Create a result that is only populated with changed keys
         get changedValue() {

package/dist/fields/valueField.d.ts

@@ -16,6 +16,7 @@ export interface FieldState<T, V> {
     readonly originalValue: V;
     touched: boolean;
     readOnly: boolean;
+    loading: boolean;
     readonly required: boolean;
     readonly dirty: boolean;
     readonly valid: boolean;
@@ -32,9 +33,9 @@ export interface FieldState<T, V> {
     maybeAutoSave(): void;
     set(value: V, opts?: SetOpts): void;
     /** Reverts back to the original value and resets dirty/touched. */
-    reset(): void;
+    revertChanges(): void;
     /** Accepts the current changed value (if any) as the original and resets dirty/touched. */
-    save(): void;
+    commitChanges(): void;
 }
 /** Public options for our `set` command. */
 export interface SetOpts {

package/dist/fields/valueField.js

@@ -18,6 +18,7 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
         touched: false,
         /** Current readOnly value. */
         _readOnly: readOnly || false,
+        _loading: false,
         _focused: false,
         _isIdKey: isIdKey,
         _isDeleteKey: isDeleteKey,
@@ -40,9 +41,17 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
         get readOnly() {
             return parentState().readOnly || this._readOnly;
         },
-        /** Sets the field readOnly, but `v` will still be or-d with the parent's readOnly state. */
-        set readOnly(v) {
-            this._readOnly = v;
+        /** Sets the field readOnly, but `loading` will still be or-d with the parent's readOnly state. */
+        set readOnly(readOnly) {
+            this._readOnly = readOnly;
+        },
+        /** Returns whether this field is loading, or if our parent is loading. */
+        get loading() {
+            return parentState().loading || this._loading;
+        },
+        /** Sets the field loading, but `loading` will still be or-d with the parent's loading state. */
+        set loading(loading) {
+            this._loading = loading;
         },
         // For primitive fields, the changed value is just the value.
         get changedValue() {
@@ -109,13 +118,13 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
                 this.maybeAutoSave();
             }
         },
-        reset() {
+        revertChanges() {
             if (!computed) {
                 this.set(this.originalValue, { resetting: true });
             }
             this.touched = false;
         },
-        save() {
+        commitChanges() {
             if (is_plain_object_1.isPlainObject(this.originalValue)) {
                 this.originalValue = mobx_1.toJS(this.value);
             }

package/dist/formState.test.js

@@ -452,7 +452,7 @@ describe("formState", () => {
         a1.set({ firstName: "first" });
         expect(maybeAutoSave).toBeCalledTimes(1);
         // When we reset
-        a1.reset();
+        a1.revertChanges();
         // We don't call blur again
         expect(maybeAutoSave).toBeCalledTimes(1);
     });
@@ -541,7 +541,7 @@ describe("formState", () => {
         a1.books.add({ title: "b3" });
         expect(a1.books.touched).toEqual(true);
         expect(a1.dirty).toBeTruthy();
-        a1.reset();
+        a1.revertChanges();
         expect(a1.firstName.value).toBe("a1");
         expect(a1.firstName.touched).toBeFalsy();
         expect(a1.lastName.value).toBe("aL1");
@@ -577,7 +577,7 @@ describe("formState", () => {
         // And the "readOnly=true" operation has "beat" the reset operation
         a1.readOnly = true;
         // When we reset
-        a1.reset();
+        a1.revertChanges();
         // Then it still works
         expect(a1.firstName.value).toBe("a1");
         expect(a1.firstName.touched).toBeFalsy();
@@ -607,15 +607,15 @@ describe("formState", () => {
         a1.books.rows[1].set({ title: "bb3" });
         // verify ValueFieldState is dirty, then save, then no longer dirty.
         expect(a1.firstName.dirty).toBeTruthy();
-        a1.firstName.save();
+        a1.firstName.commitChanges();
         expect(a1.firstName.dirty).toBeFalsy();
         // verify ListFieldState is dirty, then save, then no longer dirty.
         expect(a1.books.dirty).toBeTruthy();
-        a1.books.save();
+        a1.books.commitChanges();
         expect(a1.books.dirty).toBeFalsy();
         // Verify the remaining form is still dirty
         expect(a1.dirty).toBeTruthy();
-        a1.save();
+        a1.commitChanges();
         // Verify after save the whole form is no longer dirty.
         expect(a1.dirty).toBeFalsy();
     });
@@ -696,7 +696,7 @@ describe("formState", () => {
         });
         // And it is read-only
         a1.readOnly = true;
-        // Then it's fields are read-only
+        // Then its fields are read-only
         const fields = [a1, a1.firstName, a1.books, a1.books.rows[0].title, a1.books.rows[0].classification];
         fields.forEach((f) => expect(f.readOnly).toBeTruthy());
         // And even if a specific field tries to _not_ be read-only,
@@ -715,7 +715,7 @@ describe("formState", () => {
         });
         // And the top-level form is explicitly set to read-only=false
         a1.readOnly = false;
-        // Then it's fields are not read-only
+        // Then its fields are not read-only
         const fields = [a1, a1.firstName, a1.books, a1.books.rows[0].title, a1.books.rows[0].classification];
         fields.forEach((f) => expect(f.readOnly).toBeFalsy());
         // But when one of the fields opts in to readOnly
@@ -723,6 +723,40 @@ describe("formState", () => {
         // Then the field-level rule is respected
         expect(a1.firstName.readOnly).toBeTruthy();
     });
+    it("has an object-level loading=true override field-level loading=false", () => {
+        // Given a top-level object
+        const a1 = createAuthorInputState({
+            firstName: "a1",
+            lastName: "aL1",
+            books: [{ title: "b1", classification: formStateDomain_1.dd100 }],
+        });
+        // And it is loading
+        a1.loading = true;
+        // Then its fields are read-only
+        const fields = [a1, a1.firstName, a1.books, a1.books.rows[0].title, a1.books.rows[0].classification];
+        fields.forEach((f) => expect(f.loading).toBeTruthy());
+        // And even if a specific field tries to _not_ be loading
+        a1.firstName.loading = false;
+        // Then the field-level value is ignored, and it's still treated as loading
+        expect(a1.firstName.loading).toBeTruthy();
+    });
+    it("has an field-level loading=true override object-level loading=false", () => {
+        // Given a top-level object
+        const a1 = createAuthorInputState({
+            firstName: "a1",
+            lastName: "aL1",
+            books: [{ title: "b1", classification: formStateDomain_1.dd100 }],
+        });
+        // And the top-level form is explicitly set to loading=false
+        a1.loading = false;
+        // Then its fields are not loading
+        const fields = [a1, a1.firstName, a1.books, a1.books.rows[0].title, a1.books.rows[0].classification];
+        fields.forEach((f) => expect(f.loading).toBeFalsy());
+        // But when one of the fields opts in to loading
+        a1.firstName.loading = true;
+        // Then the field-level loading is respected
+        expect(a1.firstName.loading).toBeTruthy();
+    });
     it("canSave returns dirty and touches", () => {
         const a1 = objectField_1.createObjectState({
             firstName: { type: "value", rules: [rules_1.required] },
@@ -805,7 +839,7 @@ describe("formState", () => {
         expect(a.books.rows[1].readOnly).toBeFalsy();
         expect(a.books.rows[1].title.readOnly).toBeFalsy();
         // And reset does not blow up
-        a.reset();
+        a.revertChanges();
     });
     it("can set nested values when original null", () => {
         const a = createAuthorWithAddressInputState({ address: null });
@@ -860,7 +894,7 @@ describe("formState", () => {
         expect(formState.fullName.value).toEqual("first last");
         formState.firstName.value = "change";
         expect(formState.fullName.value).toEqual("change last");
-        formState.reset();
+        formState.revertChanges();
         expect(formState.firstName.value).toEqual("first");
     });
     it("can set computeds that have setters", () => {
@@ -873,7 +907,7 @@ describe("formState", () => {
         expect(formState.firstName.value).toEqual("Bob");
         formState.fullName.set("Fred Smith");
         expect(formState.firstName.value).toEqual("Fred");
-        formState.reset();
+        formState.revertChanges();
         expect(formState.firstName.value).toEqual("first");
     });
     it("can mark fields as read only", () => {
@@ -886,7 +920,7 @@ describe("formState", () => {
         expect(formState.fullName.readOnly).toEqual(true);
         formState.firstName.value = "change";
         expect(formState.fullName.value).toEqual("change last");
-        formState.reset();
+        formState.revertChanges();
         expect(formState.firstName.value).toEqual("first");
     });
     it("lets rules validate against other fields", () => {
@@ -1266,7 +1300,7 @@ describe("formState", () => {
         // Then the list state is dirty
         expect(a1.books.dirty).toBeTruthy();
         // When saving the form state
-        a1.save();
+        a1.commitChanges();
         // Then the list is no longer dirty
         expect(a1.books.dirty).toBeFalsy();
         // When adding a new book

package/dist/useFormState.d.ts

@@ -1,5 +1,20 @@
 import { ObjectConfig } from "./config";
 import { ObjectState } from "./fields/objectField";
+export declare type Query<I> = {
+    data: I;
+    loading: boolean;
+    error?: any;
+};
+export declare type InputAndMap<T, I> = {
+    input: I;
+    map: (input: Exclude<I, null | undefined>) => T;
+    ifUndefined?: T;
+};
+export declare type QueryAndMap<T, I> = {
+    query: Query<I>;
+    map: (input: Exclude<I, null | undefined>) => T;
+    ifUndefined?: T;
+};
 export declare type UseFormStateOpts<T, I> = {
     /** The form configuration, should be a module-level const or useMemo'd. */
     config: ObjectConfig<T>;
@@ -20,11 +35,7 @@ export declare type UseFormStateOpts<T, I> = {
      * only call `init.map` if it's set, otherwise we'll use `init.ifDefined` or `{}`, saving you
      * from having to null check within your `init.map` function.
      */
-    init?: T | {
-        input: I;
-        map: (input: Exclude<I, null | undefined>) => T;
-        ifUndefined?: T;
-    };
+    init?: T | InputAndMap<T, I> | QueryAndMap<T, I>;
     /**
      * A hook to add custom, cross-field validation rules that can be difficult to setup directly in the config DSL.
      *
@@ -33,6 +44,13 @@ export declare type UseFormStateOpts<T, I> = {
     addRules?: (state: ObjectState<T>) => void;
     /** Whether the form should be read only, when changed it won't re-create the whole form. */
     readOnly?: boolean;
+    /**
+     * Whether the form is loading.
+     *
+     * Note that we also will infer loading from `init.input === undefined` or `init.query.loading`,
+     * so you only need to set this directly if you're not using either of those conventions.
+     */
+    loading?: boolean;
     /**
      * Fired when the form should auto-save, i.e. after a) blur and b) all fields are valid.
      *

package/dist/useFormState.js

@@ -16,7 +16,7 @@ let pendingAutoSave = false;
  * Creates a formState instance for editing in a form.
  */
 function useFormState(opts) {
-    const { config, init, addRules, readOnly = false, autoSave } = opts;
+    const { config, init, addRules, readOnly = false, loading, autoSave } = opts;
     // Use a ref so our memo'ized `onBlur` always see the latest value
     const autoSaveRef = react_1.useRef(autoSave);
     autoSaveRef.current = autoSave;
@@ -25,7 +25,7 @@ function useFormState(opts) {
     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 dep = utils_1.isInput(init) ? makeArray(init.input) : utils_1.isQuery(init) ? [init.query.data, init.query.loading] : [];
     const form = react_1.useMemo(() => {
         function maybeAutoSave() {
             if (isAutoSaving === "in-flight") {
@@ -62,6 +62,7 @@ function useFormState(opts) {
         const value = firstRunRef.current ? firstInitValue : utils_1.initValue(config, init);
         const form = objectField_1.createObjectState(config, value, { maybeAutoSave });
         form.readOnly = readOnly;
+        setLoading(form, opts);
         // The identity of `addRules` is not stable, but assume that it is for better UX.
         (addRules || (() => { }))(form);
         firstRunRef.current = true;
@@ -80,12 +81,34 @@ function useFormState(opts) {
             firstRunRef.current = false;
             return;
         }
+        setLoading(form, opts);
         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(() => {
         form.readOnly = readOnly;
-    }, [form, readOnly]);
+        if (loading !== undefined) {
+            form.loading = loading;
+        }
+    }, [form, readOnly, loading]);
     return form;
 }
 exports.useFormState = useFormState;
+function setLoading(form, opts) {
+    const { loading, init } = opts;
+    if (loading !== undefined) {
+        // Prefer the explicit/top-level opts.loading if it's set
+        form.loading = loading;
+    }
+    else if (utils_1.isInput(init) && !init.ifUndefined) {
+        // Otherwise, check for `init.input`
+        form.loading = init.input === undefined;
+    }
+    else if (utils_1.isQuery(init)) {
+        // Or `query.loading`
+        form.loading = init.query.loading;
+    }
+}
+function makeArray(input) {
+    return Array.isArray(input) ? input : [input];
+}

package/dist/useFormState.test.js

@@ -15,10 +15,10 @@ describe("useFormState", () => {
         function TestComponent() {
             const config = { firstName: { type: "value" } };
             // And we have query data that may or may not be defined
-            const data = Math.random() >= 0 ? { firstName: "bob" } : undefined;
-            // Then the lambda is passed the "de-undefined" data
+            const data = { firstName: "bob" };
             const form = useFormState_1.useFormState({
                 config,
+                // Then the lambda is passed the "de-undefined" data, i.e. `d.firstName` is not a compile error
                 init: { input: data, map: (d) => ({ firstName: d.firstName }) },
             });
             return jsx_runtime_1.jsx("div", { children: form.firstName.value }, void 0);
@@ -454,6 +454,51 @@ describe("useFormState", () => {
         expect(autoSaveStub).toBeCalledTimes(1);
         expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "first", lastName: "first" });
     });
+    it("sets loading if opts.loading is true", async () => {
+        const config = { firstName: { type: "value" } };
+        function TestComponent({ loading }) {
+            const form = useFormState_1.useFormState({ config, loading });
+            return jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "loading" }, { children: String(form.loading) }), void 0) }, void 0);
+        }
+        // And we initially pass in `init.query.loading: true`
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, { loading: true }, void 0));
+        // Then the form is marked as loading
+        expect(r.loading()).toHaveTextContent("true");
+        // And when the query is not loading
+        await r.rerender(jsx_runtime_1.jsx(TestComponent, { loading: false }, void 0));
+        // Then the form is marked as not loading
+        expect(r.loading()).toHaveTextContent("false");
+    });
+    it("sets loading if input.data is undefined", async () => {
+        const config = { firstName: { type: "value" } };
+        function TestComponent({ data }) {
+            const form = useFormState_1.useFormState({ config, init: { input: data, map: (d) => d } });
+            return jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "loading" }, { children: String(form.loading) }), void 0) }, void 0);
+        }
+        // And we initially pass in `init.input: undefined`
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, { data: undefined }, void 0));
+        // Then the form is marked as loading
+        expect(r.loading()).toHaveTextContent("true");
+        // And when the data is no longer undefined
+        await r.rerender(jsx_runtime_1.jsx(TestComponent, { data: { firstName: "first" } }, void 0));
+        // Then the form is marked as not loading
+        expect(r.loading()).toHaveTextContent("false");
+    });
+    it("sets loading if query.loading is true", async () => {
+        const config = { firstName: { type: "value" } };
+        function TestComponent({ loading, data }) {
+            const form = useFormState_1.useFormState({ config, init: { query: { data, loading, error: null }, map: (d) => d } });
+            return jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "loading" }, { children: String(form.loading) }), void 0) }, void 0);
+        }
+        // And we initially pass in `init.query.loading: true`
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, { loading: true, data: undefined }, void 0));
+        // Then the form is marked as loading
+        expect(r.loading()).toHaveTextContent("true");
+        // And when the query is not loading
+        await r.rerender(jsx_runtime_1.jsx(TestComponent, { loading: false, data: { firstName: "first" } }, void 0));
+        // Then the form is marked as not loading
+        expect(r.loading()).toHaveTextContent("false");
+    });
 });
 const authorConfig = {
     id: { type: "value" },

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import { ObjectConfig } from "./config";
+import { InputAndMap, QueryAndMap, UseFormStateOpts } from "./useFormState";
 export declare type Builtin = Date | Function | Uint8Array | string | number | boolean;
 export declare type Primitive = undefined | null | boolean | string | number | Function | Date | {
     toJSON(): any;
@@ -11,6 +12,8 @@ export declare function fail(message?: string): never;
 export declare function assertNever(x: never): never;
 /** Introspects the `init` prop to see if has a `map` function/etc. and returns the form value. */
 export declare function initValue<T>(config: ObjectConfig<T>, init: any): T;
+export declare function isInput<T, I>(init: UseFormStateOpts<T, I>["init"]): init is InputAndMap<T, I>;
+export declare function isQuery<T, I>(init: UseFormStateOpts<T, I>["init"]): init is QueryAndMap<T, I>;
 /**
  * Picks ony fields out of `instance` that are in the `formConfig`.
  *

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.initValue = exports.assertNever = exports.fail = void 0;
+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");
@@ -17,14 +17,27 @@ function assertNever(x) {
 exports.assertNever = assertNever;
 /** 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);
+    let value;
+    if (isInput(init)) {
+        value = init.input ? init.map(init.input) : init.ifUndefined;
+    }
+    else if (isQuery(init)) {
+        value = init.query.data ? init.map(init.query.data) : init.ifUndefined;
+    }
+    else {
+        value = init;
+    }
+    return pickFields(config, value !== null && value !== void 0 ? value : {});
 }
 exports.initValue = initValue;
+function isInput(init) {
+    return !!init && "input" in init && "map" in init;
+}
+exports.isInput = isInput;
+function isQuery(init) {
+    return !!init && "query" in init && "map" in init;
+}
+exports.isQuery = isQuery;
 /**
  * Picks ony fields out of `instance` that are in the `formConfig`.
  *

package/package.json

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