@homebound/form-state 2.19.0 → 2.20.1

package/dist/useFormState.test.js

@@ -16,32 +16,31 @@ describe("useFormState", () => {
             const config = { firstName: { type: "value" } };
             // And we have query data that may or may not be defined
             const data = { firstName: "bob" };
-            const form = useFormState_1.useFormState({
+            const form = (0, 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);
+            return (0, jsx_runtime_1.jsx)("div", { children: form.firstName.value });
         }
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         expect(r.baseElement).toHaveTextContent("bob");
     });
     it("memoizes on init.input being an array", async () => {
         const config = { firstName: { type: "value" } };
         function TestComponent() {
-            const [, setTick] = react_2.useState(0);
-            const form = useFormState_1.useFormState({
+            const [, setTick] = (0, react_2.useState)(0);
+            const form = (0, useFormState_1.useFormState)({
                 config,
                 init: { input: ["a", "b"], map: ([a, b]) => ({ firstName: a + b }) },
             });
             const onClick = () => [form.firstName.set("fred"), setTick(1)];
-            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("button", { "data-testid": "change", onClick: onClick }, void 0),
-                    jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0)] }, void 0));
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "change", onClick: onClick }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value })] }));
         }
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
-        expect(r.firstName()).toHaveTextContent("ab");
-        rtl_utils_1.click(r.change);
-        expect(r.firstName()).toHaveTextContent("fred");
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        expect(r.firstName).toHaveTextContent("ab");
+        (0, rtl_utils_1.click)(r.change);
+        expect(r.firstName).toHaveTextContent("fred");
     });
     it("uses default if init.input is undefined", async () => {
         // Given a component
@@ -49,13 +48,13 @@ describe("useFormState", () => {
             const config = { firstName: { type: "value" } };
             // And we have query data that may or may not be defined (but is actually undefined)
             const data = Math.random() >= 0 ? undefined : { firstName: "bob" };
-            const form = useFormState_1.useFormState({
+            const form = (0, useFormState_1.useFormState)({
                 config,
                 init: { input: data, map: (d) => ({ firstName: d.firstName }) },
             });
-            return jsx_runtime_1.jsx("div", { children: form.firstName.value }, void 0);
+            return (0, jsx_runtime_1.jsx)("div", { children: form.firstName.value });
         }
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         // Then we init.map wasn't called, and we used {} instead
         expect(r.baseElement.textContent).toEqual("");
     });
@@ -68,7 +67,7 @@ describe("useFormState", () => {
             };
             // And we have query data that may or may not be defined (but is actually undefined)
             const data = Math.random() >= 0 ? undefined : { firstName: "bob" };
-            const form = useFormState_1.useFormState({
+            const form = (0, useFormState_1.useFormState)({
                 config,
                 // And we pass `ifUndefined`
                 init: {
@@ -77,10 +76,9 @@ describe("useFormState", () => {
                     ifUndefined: { firstName: "default" },
                 },
             });
-            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0),
-                    jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "changedValue" }, { children: JSON.stringify(form.changedValue) }), void 0)] }, void 0));
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "changedValue", children: JSON.stringify(form.changedValue) })] }));
         }
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         // Then we use the ifUndefined value
         expect(r.firstName.textContent).toEqual("default");
         expect(r.changedValue.textContent).toEqual(JSON.stringify({ firstName: "default" }));
@@ -88,33 +86,32 @@ describe("useFormState", () => {
     it("uses init if set as a value", async () => {
         const config = { firstName: { type: "value" } };
         function TestComponent() {
-            const [, setTick] = react_2.useState(0);
-            const form = useFormState_1.useFormState({
+            const [, setTick] = (0, react_2.useState)(0);
+            const form = (0, useFormState_1.useFormState)({
                 config,
                 // That's using a raw init value
                 init: { firstName: "bob" },
             });
-            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("button", { "data-testid": "change", onClick: () => {
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "change", onClick: () => {
                             // When that value changes
                             form.firstName.set("fred");
                             // And also we re-render the component
                             setTick(1);
-                        } }, void 0),
-                    jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0)] }, void 0));
+                        } }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value })] }));
         }
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
-        expect(r.firstName()).toHaveTextContent("bob");
-        rtl_utils_1.click(r.change);
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        expect(r.firstName).toHaveTextContent("bob");
+        (0, rtl_utils_1.click)(r.change);
         // Then the change didn't get dropped due to init being unstable
-        expect(r.firstName()).toHaveTextContent("fred");
+        expect(r.firstName).toHaveTextContent("fred");
     });
     it("doesn't required an init value", async () => {
         function TestComponent() {
             const config = { firstName: { type: "value" } };
-            const form = useFormState_1.useFormState({ config });
-            return jsx_runtime_1.jsx("div", { children: form.firstName.value }, void 0);
+            const form = (0, useFormState_1.useFormState)({ config });
+            return (0, jsx_runtime_1.jsx)("div", { children: form.firstName.value });
         }
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         expect(r.baseElement.textContent).toEqual("");
     });
     it("keeps local changed values when a query refreshes", async () => {
@@ -156,63 +153,53 @@ describe("useFormState", () => {
                 ],
             };
             // And we start out with data1
-            const [data, setData] = react_2.useState(data1);
-            const form = useFormState_1.useFormState({ config, init: { input: data, map: (d) => d } });
+            const [data, setData] = (0, react_2.useState)(data1);
+            const form = (0, useFormState_1.useFormState)({ config, init: { input: data, map: (d) => d } });
             function makeLocalChanges() {
                 form.firstName.value = "local";
                 form.address.street.value = "local";
                 form.books.rows[0].title.value = "local";
             }
-            return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "lastName" }, { children: form.lastName.value }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "street" }, { children: form.address.street.value }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "city" }, { children: form.address.city.value }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "title1" }, { children: form.books.rows[0].title.value }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "title2" }, { children: form.books.rows[1].title.value }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "booksLength" }, { children: form.books.rows.length }), void 0),
-                        jsx_runtime_1.jsx("button", { "data-testid": "makeLocalChanges", onClick: makeLocalChanges }, void 0),
-                        jsx_runtime_1.jsx("button", { "data-testid": "refreshData", onClick: () => setData(data2) }, void 0),
-                        jsx_runtime_1.jsx("button", { "data-testid": "saveData", onClick: () => setData(data3) }, void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "changedValue" }, { children: JSON.stringify(form.changedValue) }), void 0)] }, void 0)) }, void 0));
+            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "lastName", children: form.lastName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "street", children: form.address.street.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "city", children: form.address.city.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "title1", children: form.books.rows[0].title.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "title2", children: form.books.rows[1].title.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "booksLength", children: form.books.rows.length }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "makeLocalChanges", onClick: makeLocalChanges }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "saveData", onClick: () => setData(data3) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "changedValue", children: JSON.stringify(form.changedValue) })] })) }));
         }
         // And we start out with the initial query data
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
-        expect(r.firstName().textContent).toEqual("f1");
-        expect(r.street().textContent).toEqual("s1");
-        expect(r.title1().textContent).toEqual("a1");
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        expect(r.firstName.textContent).toEqual("f1");
+        expect(r.street.textContent).toEqual("s1");
+        expect(r.title1.textContent).toEqual("a1");
         // When we make some local changes
-        rtl_utils_1.click(r.makeLocalChanges);
+        (0, rtl_utils_1.click)(r.makeLocalChanges);
         // Then we see them
-        expect(r.firstName().textContent).toEqual("local");
-        expect(r.street().textContent).toEqual("local");
-        expect(r.title1().textContent).toEqual("local");
-        expect(JSON.parse(r.changedValue().textContent)).toEqual({
+        expect(r.firstName.textContent).toEqual("local");
+        expect(r.street.textContent).toEqual("local");
+        expect(r.title1.textContent).toEqual("local");
+        expect(JSON.parse(r.changedValue.textContent)).toEqual({
             id: "a:1",
             address: { id: "address:1", street: "local" },
             books: [{ id: "b:1", title: "local" }, { id: "b:2" }],
             firstName: "local",
         });
         // And when the new query is ran i.e. due to a cache refresh
-        rtl_utils_1.click(r.refreshData);
+        (0, rtl_utils_1.click)(r.refreshData);
         // Then we kept our local changes
-        expect(r.firstName().textContent).toEqual("local");
-        expect(r.street().textContent).toEqual("local");
-        expect(r.title1().textContent).toEqual("local");
+        expect(r.firstName.textContent).toEqual("local");
+        expect(r.street.textContent).toEqual("local");
+        expect(r.title1.textContent).toEqual("local");
         // But we also see the new data for fields we have not changed
-        expect(r.lastName().textContent).toEqual("l2");
-        expect(r.city().textContent).toEqual("c2");
-        expect(r.title2().textContent).toEqual("b2");
-        expect(r.booksLength().textContent).toEqual("3");
-        expect(JSON.parse(r.changedValue().textContent)).toEqual({
+        expect(r.lastName.textContent).toEqual("l2");
+        expect(r.city.textContent).toEqual("c2");
+        expect(r.title2.textContent).toEqual("b2");
+        expect(r.booksLength.textContent).toEqual("3");
+        expect(JSON.parse(r.changedValue.textContent)).toEqual({
             id: "a:1",
             address: { id: "address:1", street: "local" },
             books: [{ id: "b:1", title: "local" }, { id: "b:2" }, { id: "b:3" }],
             firstName: "local",
         });
         // And then when our mutation results come back
-        rtl_utils_1.click(r.saveData);
+        (0, rtl_utils_1.click)(r.saveData);
         // Then changedValue doesn't show our local changes anymore
-        expect(JSON.parse(r.changedValue().textContent)).toEqual({
+        expect(JSON.parse(r.changedValue.textContent)).toEqual({
             id: "a:1",
         });
     });
@@ -232,29 +219,26 @@ describe("useFormState", () => {
                 books: [{ title: "a2" }],
             };
             // And we start out with data1
-            const [data, setData] = react_2.useState(data1);
-            const form = useFormState_1.useFormState({
+            const [data, setData] = (0, react_2.useState)(data1);
+            const form = (0, useFormState_1.useFormState)({
                 config,
                 init: { input: data, map: (d) => d },
                 // And the form is read only
                 readOnly: true,
             });
-            return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "street" }, { children: form.address.street.value }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "title1" }, { children: form.books.rows[0].title.value }), void 0),
-                        jsx_runtime_1.jsx("button", { "data-testid": "refreshData", onClick: () => setData(data2) }, void 0)] }, void 0)) }, void 0));
+            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "street", children: form.address.street.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "title1", children: form.books.rows[0].title.value }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) })] })) }));
         }
         // And we start out with the initial query data
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
-        expect(r.firstName().textContent).toEqual("f1");
-        expect(r.street().textContent).toEqual("s1");
-        expect(r.title1().textContent).toEqual("a1");
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        expect(r.firstName.textContent).toEqual("f1");
+        expect(r.street.textContent).toEqual("s1");
+        expect(r.title1.textContent).toEqual("a1");
         // When the new query is ran i.e. due to a cache refresh
-        rtl_utils_1.click(r.refreshData);
+        (0, rtl_utils_1.click)(r.refreshData);
         // Then we see the latest data
-        expect(r.firstName().textContent).toEqual("f2");
-        expect(r.street().textContent).toEqual("s2");
-        expect(r.title1().textContent).toEqual("a2");
+        expect(r.firstName.textContent).toEqual("f2");
+        expect(r.street.textContent).toEqual("s2");
+        expect(r.title1.textContent).toEqual("a2");
     });
     it("useFormState can accept new data with computed fields", async () => {
         // Given a component
@@ -273,59 +257,54 @@ describe("useFormState", () => {
             const data1 = { firstName: "f1", lastName: "l1" };
             const data2 = { firstName: "f2", lastName: "l2" };
             // And we start out with data1
-            const [data, setData] = react_2.useState(data1);
-            const author = react_2.useMemo(() => new AuthorRow(data.firstName, data.lastName), [data]);
-            const config = react_2.useMemo(() => ({
+            const [data, setData] = (0, react_2.useState)(data1);
+            const author = (0, react_2.useMemo)(() => new AuthorRow(data.firstName, data.lastName), [data]);
+            const config = (0, react_2.useMemo)(() => ({
                 firstName: { type: "value" },
                 lastName: { type: "value" },
                 fullName: { type: "value", computed: true },
             }), []);
-            const form = useFormState_1.useFormState({ config, init: { input: author, map: (a) => a } });
-            return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: form.firstName.value }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "fullName" }, { children: form.fullName.value }), void 0),
-                        jsx_runtime_1.jsx("button", { "data-testid": "refreshData", onClick: () => setData(data2) }, void 0)] }, void 0)) }, void 0));
+            const form = (0, useFormState_1.useFormState)({ config, init: { input: author, map: (a) => a } });
+            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "fullName", children: form.fullName.value }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) })] })) }));
         }
         // And we start out with the initial query data
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
-        expect(r.firstName().textContent).toEqual("f1");
-        expect(r.fullName().textContent).toEqual("f1 l1");
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        expect(r.firstName.textContent).toEqual("f1");
+        expect(r.fullName.textContent).toEqual("f1 l1");
         // When the new query is ran i.e. due to a cache refresh
-        rtl_utils_1.click(r.refreshData);
-        expect(r.firstName().textContent).toEqual("f2");
-        expect(r.fullName().textContent).toEqual("f2 l2");
+        (0, rtl_utils_1.click)(r.refreshData);
+        expect(r.firstName.textContent).toEqual("f2");
+        expect(r.fullName.textContent).toEqual("f2 l2");
     });
     it("can trigger auto save for fields in list that were initially undefined", async () => {
         const autoSave = jest.fn();
         // Given a component
         function TestComponent() {
             // When the data is initially undefined
-            const [data, setData] = react_2.useState();
+            const [data, setData] = (0, react_2.useState)();
             const data2 = { books: [{ title: "Title 1" }] };
-            const form = useFormState_1.useFormState({
+            const form = (0, useFormState_1.useFormState)({
                 config: authorWithBooksConfig,
                 init: { input: data, map: (d) => d, ifUndefined: { books: [] } },
                 autoSave,
             });
-            return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("button", { "data-testid": "refreshData", onClick: () => setData(data2) }, void 0),
-                        jsx_runtime_1.jsx("button", { "data-testid": "add", onClick: () => form.books.add({ title: "New Book" }) }, void 0),
-                        jsx_runtime_1.jsx("button", { "data-testid": "blurBookOne", onClick: () => focusAndBlur(form.books.rows[0].title) }, void 0),
-                        jsx_runtime_1.jsx("button", { "data-testid": "blurBookTwo", onClick: () => focusAndBlur(form.books.rows[1].title) }, void 0)] }, void 0)) }, void 0));
+            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "add", onClick: () => form.books.add({ title: "New Book" }) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "blurBookOne", onClick: () => focusAndBlur(form.books.rows[0].title) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "blurBookTwo", onClick: () => focusAndBlur(form.books.rows[1].title) })] })) }));
         }
         // Given a formState with `onBlur` set
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         // When the data/child is now available
-        rtl_utils_1.click(r.refreshData);
+        (0, rtl_utils_1.click)(r.refreshData);
         // And the field is blurred
-        await rtl_utils_1.clickAndWait(r.blurBookOne);
+        await (0, rtl_utils_1.clickAndWait)(r.blurBookOne);
         // Then we don't auto-save because nothing has changed
         expect(autoSave).toBeCalledTimes(0);
         // And when adding a new book
-        await rtl_utils_1.clickAndWait(r.add);
+        await (0, rtl_utils_1.clickAndWait)(r.add);
         // We autoSave the new row right away (because we don't have any validation rules
         // that say the new row can't be empty)
         expect(autoSave).toBeCalledTimes(1);
         // And the new book is blurred
-        await rtl_utils_1.clickAndWait(r.blurBookTwo);
+        await (0, rtl_utils_1.clickAndWait)(r.blurBookTwo);
         // Then we auto save again
         expect(autoSave).toBeCalledTimes(2);
     });
@@ -335,7 +314,7 @@ describe("useFormState", () => {
         function TestComponent() {
             const config = authorConfig;
             const data = { firstName: "f1", lastName: "f1" };
-            const form = useFormState_1.useFormState({
+            const form = (0, useFormState_1.useFormState)({
                 config,
                 init: data,
                 // And there is reactive business logic in the `autoSave` method
@@ -344,11 +323,11 @@ describe("useFormState", () => {
                     autoSaves++;
                 },
             });
-            return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx("button", { "data-testid": "setFirst", onClick: () => form.firstName.set("f2") }, void 0) }, void 0));
+            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { "data-testid": "setFirst", onClick: () => form.firstName.set("f2") }) }));
         }
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         // When we change firstName
-        await rtl_utils_1.clickAndWait(r.setFirst);
+        await (0, rtl_utils_1.clickAndWait)(r.setFirst);
         // When autoSave didn't infinite loop
         expect(autoSaves).toEqual(1);
     });
@@ -358,20 +337,20 @@ describe("useFormState", () => {
         function TestComponent() {
             const config = authorConfig;
             const data = { firstName: "f1", lastName: "f1" };
-            const form = useFormState_1.useFormState({
+            const form = (0, useFormState_1.useFormState)({
                 config,
                 init: data,
                 autoSave: (form) => autoSave(form.changedValue),
             });
-            return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx("button", { "data-testid": "set", onClick: () => {
+            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", { "data-testid": "set", onClick: () => {
                         // And it sets two fields in a single callback
                         form.firstName.set("f2");
                         form.lastName.set("l2");
-                    } }, void 0) }, void 0));
+                    } }) }));
         }
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         // When we change both
-        await rtl_utils_1.clickAndWait(r.set);
+        await (0, rtl_utils_1.clickAndWait)(r.set);
         // Then we only call autoSave once
         expect(autoSave).toBeCalledTimes(1);
         expect(autoSave).toBeCalledWith({ firstName: "f2", lastName: "l2" });
@@ -385,8 +364,8 @@ describe("useFormState", () => {
         };
         // Given a component using `getObjectState` for lazily creating ObjectStates
         function TestComponent() {
-            const [apiData, setApiData] = react_2.useState({ id: "a:1", firstName: "Brandon", lastName: "Dow" });
-            const state = useFormState_1.useFormState({ config, autoSave, init: { input: apiData, map: (v) => v } });
+            const [apiData, setApiData] = (0, react_2.useState)({ id: "a:1", firstName: "Brandon", lastName: "Dow" });
+            const state = (0, useFormState_1.useFormState)({ config, autoSave, init: { input: apiData, map: (v) => v } });
             async function autoSave(form) {
                 autoSaveStub(form.changedValue);
                 const changed = form.changedValue;
@@ -394,34 +373,32 @@ describe("useFormState", () => {
                 await Promise.resolve(1);
                 setApiData((prevState) => ({ ...prevState, ...changed }));
             }
-            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsxs("div", Object.assign({ "data-testid": "name" }, { children: [apiData.firstName, " ", apiData.lastName] }), void 0),
-                    jsx_runtime_1.jsx("button", { "data-testid": "focusSetAndSaveField", onClick: () => {
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { "data-testid": "name", children: [apiData.firstName, " ", apiData.lastName] }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "focusSetAndSaveField", onClick: () => {
                             state.firstName.focus();
                             state.firstName.set("Foo");
                             state.firstName.maybeAutoSave();
                             state.firstName.blur();
-                        } }, void 0),
-                    jsx_runtime_1.jsx("button", { "data-testid": "focusSetAndSaveFieldLastName", onClick: () => {
+                        } }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "focusSetAndSaveFieldLastName", onClick: () => {
                             state.lastName.focus();
                             state.lastName.set("Bar");
                             state.lastName.maybeAutoSave();
-                        } }, void 0)] }, void 0));
+                        } })] }));
         }
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         // And triggering the auto save behavior before awaiting the initial promise to
         // resolve so we have pending changes.
-        rtl_utils_1.click(r.focusSetAndSaveField(), { allowAsync: true });
+        (0, rtl_utils_1.click)(r.focusSetAndSaveField, { allowAsync: true });
         // Let the initial autoSave be called
-        react_1.act(() => {
+        (0, react_1.act)(() => {
             jest.runOnlyPendingTimers();
         });
-        expect(r.name()).toHaveTextContent("Brandon Dow");
+        expect(r.name).toHaveTextContent("Brandon Dow");
         expect(autoSaveStub).toBeCalledTimes(1);
         expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "Foo" });
         // And while that is in flight, trigger another user action
-        rtl_utils_1.click(r.focusSetAndSaveFieldLastName(), { allowAsync: true });
+        (0, rtl_utils_1.click)(r.focusSetAndSaveFieldLastName, { allowAsync: true });
         // (Use `wait` so that our timer flushes before the Promise.resolve(1) is ran)
-        await rtl_utils_1.wait();
+        await (0, rtl_utils_1.wait)();
         // Then expect the auto save to only have been called twice. Once with each changedValues.
         expect(autoSaveStub).toBeCalledTimes(2);
         expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "Foo" });
@@ -436,20 +413,20 @@ describe("useFormState", () => {
         };
         // Given a component that is using autoSave
         function TestComponent() {
-            const fs = useFormState_1.useFormState({
+            const fs = (0, useFormState_1.useFormState)({
                 config,
                 addRules(fs) {
                     // And also has calculated values
-                    mobx_1.reaction(() => fs.firstName.value, (curr) => (fs.lastName.value = curr));
+                    (0, mobx_1.reaction)(() => fs.firstName.value, (curr) => (fs.lastName.value = curr));
                 },
                 autoSave: (fs) => autoSaveStub(fs.changedValue),
                 init: { id: "a:1" },
             });
-            return jsx_runtime_1.jsx(FormStateApp_1.TextField, { field: fs.firstName }, void 0);
+            return (0, jsx_runtime_1.jsx)(FormStateApp_1.TextField, { field: fs.firstName });
         }
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         // When the user sets one field
-        await rtl_utils_1.typeAndWait(r.firstName, "first");
+        await (0, rtl_utils_1.typeAndWait)(r.firstName, "first");
         // Then we only called autoSave once
         expect(autoSaveStub).toBeCalledTimes(1);
         expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "first", lastName: "first" });
@@ -457,82 +434,77 @@ describe("useFormState", () => {
     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);
+            const form = (0, useFormState_1.useFormState)({ config, loading });
+            return (0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => (0, jsx_runtime_1.jsx)("div", { "data-testid": "loading", children: String(form.loading) }) });
         }
         // 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));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { loading: true }));
         // Then the form is marked as loading
-        expect(r.loading()).toHaveTextContent("true");
+        expect(r.loading).toHaveTextContent("true");
         // And when the query is not loading
-        await r.rerender(jsx_runtime_1.jsx(TestComponent, { loading: false }, void 0));
+        await r.rerender((0, jsx_runtime_1.jsx)(TestComponent, { loading: false }));
         // Then the form is marked as not loading
-        expect(r.loading()).toHaveTextContent("false");
+        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);
+            const form = (0, useFormState_1.useFormState)({ config, init: { input: data, map: (d) => d } });
+            return (0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => (0, jsx_runtime_1.jsx)("div", { "data-testid": "loading", children: String(form.loading) }) });
         }
         // And we initially pass in `init.input: undefined`
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, { data: undefined }, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { data: undefined }));
         // Then the form is marked as loading
-        expect(r.loading()).toHaveTextContent("true");
+        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));
+        await r.rerender((0, jsx_runtime_1.jsx)(TestComponent, { data: { firstName: "first" } }));
         // Then the form is marked as not loading
-        expect(r.loading()).toHaveTextContent("false");
+        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);
+            const form = (0, useFormState_1.useFormState)({ config, init: { query: { data, loading, error: null }, map: (d) => d } });
+            return (0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => (0, jsx_runtime_1.jsx)("div", { "data-testid": "loading", children: String(form.loading) }) });
         }
         // 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));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { loading: true, data: undefined }));
         // Then the form is marked as loading
-        expect(r.loading()).toHaveTextContent("true");
+        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));
+        await r.rerender((0, jsx_runtime_1.jsx)(TestComponent, { loading: false, data: { firstName: "first" } }));
         // Then the form is marked as not loading
-        expect(r.loading()).toHaveTextContent("false");
+        expect(r.loading).toHaveTextContent("false");
     });
     it("treats the id changing as a whole new entity instead of a delete", async () => {
         const config = { firstName: { type: "value" } };
         function TestComponent() {
             // Given an initial author a1
-            const [author, setAuthor] = react_2.useState({ id: "a:1", firstName: "a1" });
-            const form = useFormState_1.useFormState({ config, init: { input: author, map: (a) => a } });
-            return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "value" }, { children: String(form.firstName.value) }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "dirty" }, { children: String(form.firstName.dirty) }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "originalValue" }, { children: String(form.firstName.originalValue) }), void 0),
-                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "objectValue" }, { children: String(form.value.firstName) }), void 0),
-                        jsx_runtime_1.jsx("div", { "data-testid": "a1", onClick: () => setAuthor({ id: "a:1", firstName: "a1" }) }, void 0),
-                        jsx_runtime_1.jsx("div", { "data-testid": "a2", onClick: () => setAuthor({ id: "a:2", firstName: undefined }) }, void 0)] }, void 0)) }, void 0));
+            const [author, setAuthor] = (0, react_2.useState)({ id: "a:1", firstName: "a1" });
+            const form = (0, useFormState_1.useFormState)({ config, init: { input: author, map: (a) => a } });
+            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "value", children: String(form.firstName.value) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "dirty", children: String(form.firstName.dirty) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "originalValue", children: String(form.firstName.originalValue) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "objectValue", children: String(form.value.firstName) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "a1", onClick: () => setAuthor({ id: "a:1", firstName: "a1" }) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "a2", onClick: () => setAuthor({ id: "a:2", firstName: undefined }) })] })) }));
         }
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         // And the value is initially a1/and not dirty
-        expect(r.value()).toHaveTextContent("a1");
-        expect(r.dirty()).toHaveTextContent("false");
-        expect(r.originalValue()).toHaveTextContent("a1");
-        expect(r.objectValue()).toHaveTextContent("a1");
+        expect(r.value).toHaveTextContent("a1");
+        expect(r.dirty).toHaveTextContent("false");
+        expect(r.originalValue).toHaveTextContent("a1");
+        expect(r.objectValue).toHaveTextContent("a1");
         // When we switch to a completely separate author
-        rtl_utils_1.click(r.a2);
+        (0, rtl_utils_1.click)(r.a2);
         // Then it switches to the next author
-        expect(r.value()).toHaveTextContent("undefined");
+        expect(r.value).toHaveTextContent("undefined");
         // And the field is not dirty (which had been the case before this bug fix)
-        expect(r.dirty()).toHaveTextContent("false");
-        expect(r.originalValue()).toHaveTextContent("undefined");
-        expect(r.objectValue()).toHaveTextContent("undefined");
+        expect(r.dirty).toHaveTextContent("false");
+        expect(r.originalValue).toHaveTextContent("undefined");
+        expect(r.objectValue).toHaveTextContent("undefined");
         // And when we switch back to the original author
-        rtl_utils_1.click(r.a1);
+        (0, rtl_utils_1.click)(r.a1);
         // It again restores the value and does not think an edit was WIP
-        expect(r.value()).toHaveTextContent("a1");
-        expect(r.dirty()).toHaveTextContent("false");
-        expect(r.originalValue()).toHaveTextContent("a1");
-        expect(r.objectValue()).toHaveTextContent("a1");
+        expect(r.value).toHaveTextContent("a1");
+        expect(r.dirty).toHaveTextContent("false");
+        expect(r.originalValue).toHaveTextContent("a1");
+        expect(r.objectValue).toHaveTextContent("a1");
     });
 });
 const authorConfig = {

package/dist/useFormStates.d.ts

@@ -1,7 +1,7 @@
 import { ObjectConfig } from "./config";
 import { ObjectState } from "./fields/objectField";
-export declare type ObjectStateCache<T, I> = Record<string, [ObjectState<T>, I]>;
-declare type UseFormStatesOpts<T, I> = {
+export type ObjectStateCache<T, I> = Record<string, [ObjectState<T>, I]>;
+type UseFormStatesOpts<T, I> = {
     /**
      * The config to use for each form state.
      *
@@ -40,7 +40,7 @@ declare type UseFormStatesOpts<T, I> = {
      */
     readOnly?: boolean;
 };
-declare type UseFormStatesHook<T, I> = {
+type UseFormStatesHook<T, I> = {
     getFormState: (input: I, opts?: {
         readOnly?: boolean;
     }) => ObjectState<T>;