@homebound/form-state 2.19.0 → 2.20.1

package/dist/useFormStates.js

@@ -6,19 +6,19 @@ const objectField_1 = require("./fields/objectField");
 const utils_1 = require("./utils");
 function useFormStates(opts) {
     const { config, autoSave, getId, map, addRules, readOnly = false } = opts;
-    const objectStateCache = react_1.useMemo(() => ({}), 
+    const objectStateCache = (0, react_1.useMemo)(() => ({}), 
     // Force resetting the cache if config changes
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [config]);
     // Keep track of ObjectStates that triggered auto-save when a save was already in progress.
-    const pendingAutoSaves = react_1.useRef(new Set());
+    const pendingAutoSaves = (0, react_1.useRef)(new Set());
     // Use a ref so our memo'ized `autoSave` always see the latest value
-    const autoSaveRef = react_1.useRef(autoSave);
+    const autoSaveRef = (0, react_1.useRef)(autoSave);
     autoSaveRef.current = autoSave;
     // Use a ref b/c we're memod
-    const readOnlyRef = react_1.useRef(readOnly);
+    const readOnlyRef = (0, react_1.useRef)(readOnly);
     readOnlyRef.current = readOnly;
-    const getFormState = react_1.useCallback((input, opts = {}) => {
+    const getFormState = (0, react_1.useCallback)((input, opts = {}) => {
         const existing = objectStateCache[getId(input)];
         let form = existing === null || existing === void 0 ? void 0 : existing[0];
         async function maybeAutoSave(form) {
@@ -54,7 +54,7 @@ function useFormStates(opts) {
         }
         // If it didn't exist, then add to the cache.
         if (!form) {
-            form = objectField_1.createObjectState(config, utils_1.initValue(config, map ? { map, input } : input), {
+            form = (0, objectField_1.createObjectState)(config, (0, utils_1.initValue)(config, map ? { map, input } : input), {
                 maybeAutoSave: () => maybeAutoSave(form),
             });
             if (addRules) {
@@ -64,7 +64,7 @@ function useFormStates(opts) {
         }
         // If the source of truth changed, then update the existing state and return it.
         if (existing && existing[1] !== input) {
-            form.set(utils_1.initValue(config, map ? { map, input } : input), { refreshing: true });
+            form.set((0, utils_1.initValue)(config, map ? { map, input } : input), { refreshing: true });
             existing[1] = input;
         }
         form.readOnly = readOnlyRef.current || !!opts.readOnly;

package/dist/useFormStates.test.js

@@ -12,45 +12,43 @@ describe("useFormStates", () => {
         const autoSave = jest.fn();
         // Given a parent and child component, where the formState is created only for the child component.
         function ChildComponent({ os }) {
-            return jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: os.firstName.value }), void 0);
+            return (0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: os.firstName.value });
         }
         function TestComponent() {
             const config = { id: { type: "value" }, firstName: { type: "value" } };
-            const { getFormState } = useFormStates_1.useFormStates({
+            const { getFormState } = (0, useFormStates_1.useFormStates)({
                 config,
                 autoSave,
                 getId: (o) => o.id,
             });
-            return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) }, void 0) }, void 0));
+            return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) }) }));
         }
-        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 child component has defined state
-        expect(r.firstName()).toHaveTextContent("Brandon");
+        expect(r.firstName).toHaveTextContent("Brandon");
     });
     it("can update existing object state from cache with new values", async () => {
         const autoSave = jest.fn();
         const config = { id: { type: "value" }, firstName: { type: "value" } };
         // Given a component using `getFormState` for lazily creating ObjectStates
         function TestComponent() {
-            const [apiData, setApiData] = react_1.useState({ id: "a:1", firstName: "Brandon" });
-            const { getFormState } = useFormStates_1.useFormStates({ config, autoSave, getId: (o) => o.id });
+            const [apiData, setApiData] = (0, react_1.useState)({ id: "a:1", firstName: "Brandon" });
+            const { getFormState } = (0, useFormStates_1.useFormStates)({ config, autoSave, getId: (o) => o.id });
             // Memoize an original for comparing the update against.
-            const originalState = react_1.useMemo(() => getFormState(apiData), [getFormState]);
+            const originalState = (0, react_1.useMemo)(() => getFormState(apiData), [getFormState]);
             const state = getFormState(apiData);
-            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: state.firstName.value }), void 0),
-                    jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "statesEqual" }, { children: JSON.stringify(state === originalState) }), void 0),
-                    jsx_runtime_1.jsx("button", { "data-testid": "updateApiData", onClick: () => setApiData((prevState) => ({ ...prevState, firstName: "Bob" })) }, void 0)] }, void 0));
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: state.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "statesEqual", children: JSON.stringify(state === originalState) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "updateApiData", onClick: () => setApiData((prevState) => ({ ...prevState, firstName: "Bob" })) })] }));
         }
-        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 initial values for the form state display
-        expect(r.firstName()).toHaveTextContent("Brandon");
-        expect(r.statesEqual()).toHaveTextContent("true");
+        expect(r.firstName).toHaveTextContent("Brandon");
+        expect(r.statesEqual).toHaveTextContent("true");
         // When updating the API data
-        await rtl_utils_1.clickAndWait(r.updateApiData());
+        await (0, rtl_utils_1.clickAndWait)(r.updateApiData);
         // Then the new value is shown in the component
-        expect(r.firstName()).toHaveTextContent("Bob");
+        expect(r.firstName).toHaveTextContent("Bob");
         // And the two states are using the same reference
-        expect(r.statesEqual()).toHaveTextContent("true");
+        expect(r.statesEqual).toHaveTextContent("true");
     });
     it("can queue up changes for auto save if a save is already in progress - works across multiple states", async () => {
         const autoSaveStub = jest.fn();
@@ -61,9 +59,9 @@ describe("useFormStates", () => {
         };
         // Given a component using `getFormState` for lazily creating ObjectStates
         function TestComponent() {
-            const [apiData, setApiData] = react_1.useState({ id: "a:1", firstName: "Tony", lastName: "Stark" });
-            const [apiData2, setApiData2] = react_1.useState({ id: "a:2", firstName: "Steve", lastName: "Rogers" });
-            const { getFormState } = useFormStates_1.useFormStates({ config, autoSave, getId: (o) => o.id });
+            const [apiData, setApiData] = (0, react_1.useState)({ id: "a:1", firstName: "Tony", lastName: "Stark" });
+            const [apiData2, setApiData2] = (0, react_1.useState)({ id: "a:2", firstName: "Steve", lastName: "Rogers" });
+            const { getFormState } = (0, useFormStates_1.useFormStates)({ config, autoSave, getId: (o) => o.id });
             const state = getFormState(apiData);
             const state2 = getFormState(apiData2);
             async function autoSave(form) {
@@ -77,30 +75,27 @@ describe("useFormStates", () => {
                 }
                 await Promise.resolve(1);
             }
-            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: state.firstName.value }), void 0),
-                    jsx_runtime_1.jsx("button", { "data-testid": "focusSetAndSaveField", onClick: () => {
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: state.firstName.value }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "focusSetAndSaveField", onClick: () => {
                             state.firstName.focus();
                             state.firstName.set("Foo");
                             state.firstName.maybeAutoSave();
-                        } }, 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),
-                    jsx_runtime_1.jsx("button", { "data-testid": "focusSetAndSaveField2", onClick: () => {
+                        } }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "focusSetAndSaveField2", onClick: () => {
                             state2.lastName.focus();
                             state2.lastName.set("Bar");
                             state2.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());
-        rtl_utils_1.click(r.focusSetAndSaveFieldLastName());
-        rtl_utils_1.click(r.focusSetAndSaveField2());
+        (0, rtl_utils_1.click)(r.focusSetAndSaveField);
+        (0, rtl_utils_1.click)(r.focusSetAndSaveFieldLastName);
+        (0, rtl_utils_1.click)(r.focusSetAndSaveField2);
         // Awaits the promises for all methods triggered above
-        await rtl_utils_1.wait();
+        await (0, rtl_utils_1.wait)();
         // Then expect the auto save to only have been called two times. Once with each set of changedValues.
         expect(autoSaveStub).toBeCalledTimes(2);
         expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "Foo", lastName: "Bar" });
@@ -117,39 +112,37 @@ describe("useFormStates", () => {
             firstName: { type: "value", rules: [rules_1.required] },
         };
         function TestComponent() {
-            const [config, setConfig] = react_1.useState(originalConfig);
-            const { getFormState } = useFormStates_1.useFormStates({ config, autoSave, getId: (o) => o.id });
+            const [config, setConfig] = (0, react_1.useState)(originalConfig);
+            const { getFormState } = (0, useFormStates_1.useFormStates)({ config, autoSave, getId: (o) => o.id });
             // Memoize an original for comparing the update against.
             // eslint-disable-next-line react-hooks/exhaustive-deps
-            const originalState = react_1.useMemo(() => getFormState(apiData), []);
+            const originalState = (0, react_1.useMemo)(() => getFormState(apiData), []);
             const state = getFormState(apiData);
-            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "statesEqual" }, { children: JSON.stringify(state === originalState) }), void 0),
-                    jsx_runtime_1.jsx("button", { "data-testid": "updateConfig", onClick: () => setConfig(updatedConfig) }, void 0)] }, void 0));
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "statesEqual", children: JSON.stringify(state === originalState) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "updateConfig", onClick: () => setConfig(updatedConfig) })] }));
         }
         // When rendered with the original configuration
-        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 the two form-states generated are equal
-        expect(r.statesEqual()).toHaveTextContent("true");
+        expect(r.statesEqual).toHaveTextContent("true");
         // When updating the configuration object
-        rtl_utils_1.click(r.updateConfig);
+        (0, rtl_utils_1.click)(r.updateConfig);
         // Then the two form-states are no longer equal.
-        expect(r.statesEqual()).toHaveTextContent("false");
+        expect(r.statesEqual).toHaveTextContent("false");
     });
     it("calls addRules once per form state", async () => {
         // Given a user wants to use addRules
         const addRules = jest.fn();
         function TestComponent() {
             const config = { id: { type: "value" }, firstName: { type: "value" } };
-            const { getFormState } = useFormStates_1.useFormStates({
+            const { getFormState } = (0, useFormStates_1.useFormStates)({
                 config,
                 addRules,
                 getId: (o) => o.id,
             });
-            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) }, void 0),
-                    jsx_runtime_1.jsx(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) }, void 0)] }, void 0));
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) }), (0, jsx_runtime_1.jsx)(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) })] }));
         }
         // When we render
-        await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         // Then addRules was only called once
         expect(addRules).toHaveBeenCalledTimes(1);
     });
@@ -157,12 +150,12 @@ describe("useFormStates", () => {
         // Given a user wants to use auto save
         const autoSave = jest.fn();
         function TestComponent() {
-            const { getFormState } = useFormStates_1.useFormStates({
+            const { getFormState } = (0, useFormStates_1.useFormStates)({
                 config,
                 getId: (o) => o.id,
                 addRules(fs) {
                     // And they have a reactive true that calculates last name
-                    mobx_1.reaction(() => fs.firstName.value, (curr) => {
+                    (0, mobx_1.reaction)(() => fs.firstName.value, (curr) => {
                         fs.lastName.set(curr);
                     });
                 },
@@ -170,12 +163,12 @@ describe("useFormStates", () => {
                     autoSave(fs.changedValue);
                 },
             });
-            return jsx_runtime_1.jsx(FormStateApp_1.TextField, { field: getFormState({ id: "a:1", firstName: "Brandon" }).firstName }, void 0);
+            return (0, jsx_runtime_1.jsx)(FormStateApp_1.TextField, { field: getFormState({ id: "a:1", firstName: "Brandon" }).firstName });
         }
         // When we render
-        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 update the firstName
-        await rtl_utils_1.typeAndWait(r.firstName(), "first");
+        await (0, rtl_utils_1.typeAndWait)(r.firstName, "first");
         // Then autoSave was called once with both input+calc'd values
         expect(autoSave).toHaveBeenCalledTimes(1);
         expect(autoSave).toHaveBeenCalledWith({ id: "a:1", firstName: "first", lastName: "first" });
@@ -183,41 +176,41 @@ describe("useFormStates", () => {
     it("can set readOnly via the hook opt", async () => {
         // Given a test component
         function TestComponent({ readOnly }) {
-            const { getFormState } = useFormStates_1.useFormStates({
+            const { getFormState } = (0, useFormStates_1.useFormStates)({
                 config,
                 getId: (o) => o.id,
                 // And it passes readOnly directly to useFormStates
                 readOnly,
             });
-            return jsx_runtime_1.jsx(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) }, void 0);
+            return (0, jsx_runtime_1.jsx)(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) });
         }
         // When we render
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, { readOnly: true }, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { readOnly: true }));
         // Then it's read only
-        expect(r.firstName()).toHaveAttribute("data-readonly", "true");
+        expect(r.firstName).toHaveAttribute("data-readonly", "true");
         // And when we rerender
-        await r.rerender(jsx_runtime_1.jsx(TestComponent, { readOnly: false }, void 0));
+        await r.rerender((0, jsx_runtime_1.jsx)(TestComponent, { readOnly: false }));
         // Then it's not read only
-        expect(r.firstName()).toHaveAttribute("data-readonly", "false");
+        expect(r.firstName).toHaveAttribute("data-readonly", "false");
     });
     it("can set readOnly via the getFormState function", async () => {
         // Given a test component
         function TestComponent({ readOnly }) {
-            const { getFormState } = useFormStates_1.useFormStates({
+            const { getFormState } = (0, useFormStates_1.useFormStates)({
                 config,
                 getId: (o) => o.id,
             });
             // And it passes readOnly directly to getFormState
-            return jsx_runtime_1.jsx(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }, { readOnly }) }, void 0);
+            return (0, jsx_runtime_1.jsx)(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }, { readOnly }) });
         }
         // When we render
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, { readOnly: true }, void 0));
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, { readOnly: true }));
         // Then it's read only
-        expect(r.firstName()).toHaveAttribute("data-readonly", "true");
+        expect(r.firstName).toHaveAttribute("data-readonly", "true");
         // And when we rerender
-        await r.rerender(jsx_runtime_1.jsx(TestComponent, { readOnly: false }, void 0));
+        await r.rerender((0, jsx_runtime_1.jsx)(TestComponent, { readOnly: false }));
         // Then it's not read only
-        expect(r.firstName()).toHaveAttribute("data-readonly", "false");
+        expect(r.firstName).toHaveAttribute("data-readonly", "false");
     });
 });
 const config = {
@@ -226,5 +219,5 @@ const config = {
     lastName: { type: "value" },
 };
 function ChildComponent({ os }) {
-    return (jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName", "data-readonly": os.firstName.readOnly }, { children: os.firstName.value }), void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", "data-readonly": os.firstName.readOnly, children: os.firstName.value }));
 }

package/dist/utils.d.ts

@@ -1,11 +1,11 @@
 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 | {
+export type Builtin = Date | Function | Uint8Array | string | number | boolean;
+export type Primitive = undefined | null | boolean | string | number | Function | Date | {
     toJSON(): any;
 };
 /** Makes the keys in `T` required while keeping the values undefined. */
-export declare type DeepRequired<T> = T extends Primitive ? T : {
+export type DeepRequired<T> = T extends Primitive ? T : {
     [P in keyof Required<T>]: T[P] extends Array<infer U> ? Array<DeepRequired<U>> : T[P] extends ReadonlyArray<infer U2> ? ReadonlyArray<DeepRequired<U2>> : DeepRequired<T[P]>;
 };
 export declare function fail(message?: string): never;

package/dist/utils.js

@@ -31,11 +31,11 @@ function initValue(config, init) {
 }
 exports.initValue = initValue;
 function isInput(init) {
-    return !!init && "input" in init && "map" in init;
+    return !!init && typeof init === "object" && "input" in init && "map" in init;
 }
 exports.isInput = isInput;
 function isQuery(init) {
-    return !!init && "query" in init && "map" in init;
+    return !!init && typeof init === "object" && "query" in init && "map" in init;
 }
 exports.isQuery = isQuery;
 /**
@@ -49,7 +49,7 @@ exports.isQuery = isQuery;
  */
 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)) {
+    if (!(0, is_plain_object_1.isPlainObject)(instance)) {
         return instance;
     }
     return Object.fromEntries(Object.entries(formConfig).map(([key, _keyConfig]) => {
@@ -64,7 +64,7 @@ function pickFields(formConfig, instance) {
             }
         }
         else if (keyConfig.type === "list") {
-            if (mobx_1.isObservable(value)) {
+            if ((0, 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];
@@ -103,17 +103,17 @@ exports.isEmpty = isEmpty;
  * - arrays
  */
 function areEqual(a, b, strictOrder) {
-    if (is_plain_object_1.isPlainObject(a)) {
-        return fast_deep_equal_1.default(mobx_1.toJS(a), mobx_1.toJS(b));
+    if ((0, is_plain_object_1.isPlainObject)(a)) {
+        return (0, fast_deep_equal_1.default)((0, mobx_1.toJS)(a), (0, mobx_1.toJS)(b));
     }
     if (hasToJSON(a) || hasToJSON(b)) {
         const a1 = hasToJSON(a) ? a.toJSON() : a;
         const b1 = hasToJSON(b) ? b.toJSON() : b;
-        return fast_deep_equal_1.default(a1, b1);
+        return (0, fast_deep_equal_1.default)(a1, b1);
     }
     if (a && b && a instanceof Array && b instanceof Array) {
         if (strictOrder !== false) {
-            return fast_deep_equal_1.default(a, b);
+            return (0, fast_deep_equal_1.default)(a, b);
         }
         if (a.length !== b.length)
             return false;

package/dist/utils.test.js

@@ -6,72 +6,72 @@ const utils_1 = require("./utils");
 describe("utils", () => {
     describe("pickFields", () => {
         it("can pick a value field", () => {
-            const a = utils_1.pickFields(
+            const a = (0, utils_1.pickFields)(
             //
             { firstName: { type: "value" } }, { firstName: "a", b: "ignored" });
             expect(a).toMatchInlineSnapshot(`
-      Object {
-        "firstName": "a",
-      }
-    `);
+        {
+          "firstName": "a",
+        }
+      `);
         });
         it("can pick an unset object fields", () => {
-            const a = utils_1.pickFields(authorWithAddressConfig, { firstName: "a", b: "ignored" });
+            const a = (0, utils_1.pickFields)(authorWithAddressConfig, { firstName: "a", b: "ignored" });
             expect(a).toMatchInlineSnapshot(`
-      Object {
-        "address": undefined,
-        "firstName": "a",
-        "id": undefined,
-        "lastName": undefined,
-      }
-    `);
+        {
+          "address": undefined,
+          "firstName": "a",
+          "id": undefined,
+          "lastName": undefined,
+        }
+      `);
         });
         it("can pick a set object field", () => {
-            const a = utils_1.pickFields(authorWithAddressConfig, { firstName: "a", b: "ignored", address: {} });
+            const a = (0, utils_1.pickFields)(authorWithAddressConfig, { firstName: "a", b: "ignored", address: {} });
             expect(a).toMatchInlineSnapshot(`
-      Object {
-        "address": Object {
-          "city": undefined,
-          "street": undefined,
-        },
-        "firstName": "a",
-        "id": undefined,
-        "lastName": undefined,
-      }
-    `);
+        {
+          "address": {
+            "city": undefined,
+            "street": undefined,
+          },
+          "firstName": "a",
+          "id": undefined,
+          "lastName": undefined,
+        }
+      `);
         });
         it("can pick an unset list field", () => {
-            const a = utils_1.pickFields(authorWithBooksConfig, { firstName: "a", b: "ignored" });
+            const a = (0, utils_1.pickFields)(authorWithBooksConfig, { firstName: "a", b: "ignored" });
             expect(a).toMatchInlineSnapshot(`
-      Object {
-        "books": undefined,
-        "firstName": "a",
-        "id": undefined,
-        "lastName": undefined,
-      }
-    `);
+        {
+          "books": undefined,
+          "firstName": "a",
+          "id": undefined,
+          "lastName": undefined,
+        }
+      `);
         });
         it("can pick a set list field", () => {
-            const a = utils_1.pickFields(authorWithBooksConfig, { firstName: "a", b: "ignored", books: [{}] });
+            const a = (0, utils_1.pickFields)(authorWithBooksConfig, { firstName: "a", b: "ignored", books: [{}] });
             expect(a).toMatchInlineSnapshot(`
-      Object {
-        "books": Array [
-          Object {
-            "classification": undefined,
-            "id": undefined,
-            "title": undefined,
-          },
-        ],
-        "firstName": "a",
-        "id": undefined,
-        "lastName": undefined,
-      }
-    `);
+        {
+          "books": [
+            {
+              "classification": undefined,
+              "id": undefined,
+              "title": undefined,
+            },
+          ],
+          "firstName": "a",
+          "id": undefined,
+          "lastName": undefined,
+        }
+      `);
         });
         it("can pick a set observable list field", () => {
-            const books = mobx_1.observable([]);
-            const a = utils_1.pickFields(authorWithBooksConfig, { firstName: "a", b: "ignored", books });
-            expect(mobx_1.isObservable(a.books)).toEqual(true);
+            const books = (0, mobx_1.observable)([]);
+            const a = (0, utils_1.pickFields)(authorWithBooksConfig, { firstName: "a", b: "ignored", books });
+            expect((0, mobx_1.isObservable)(a.books)).toEqual(true);
         });
     });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/form-state",
-  "version": "2.19.0",
+  "version": "2.20.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -13,11 +13,11 @@
     "dist"
   ],
   "scripts": {
-    "build": "ttsc",
-    "build:storybook": "build-storybook",
+    "build": "tspc",
+    "build:storybook": "storybook build",
     "test": "jest",
     "lint": "eslint . --cache --fix --ext .js,.ts,.tsx",
-    "storybook": "start-storybook -p 9000",
+    "storybook": "storybook dev -p 9000",
     "format": "prettier --loglevel warn --write \"**/*.{ts,tsx,css,md}\"",
     "semantic-release": "semantic-release"
   },
@@ -31,31 +31,32 @@
   },
   "dependencies": {
     "fast-deep-equal": "^3.1.3",
-    "is-plain-object": "^5.0.0",
-    "mobx": "^6.3.2",
-    "mobx-react": "^7.2.0"
+    "is-plain-object": "^5.0.0"
   },
   "peerDependencies": {
+    "mobx": ">=6",
     "react": ">=16"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",
-    "@homebound/rtl-utils": "^2.59.2",
-    "@semantic-release/exec": "^5.0.0",
-    "@semantic-release/git": "^9.0.0",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-info": "^5.3.21",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/react": "^6.2.9",
-    "@testing-library/dom": "^8.11.3",
-    "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^8.0.0",
-    "@tsconfig/recommended": "^1.0.1",
-    "@types/jest": "^26.0.20",
-    "@types/react": "^16.14.5",
-    "@types/react-dom": "^16.9.11",
+    "@babel/preset-env": "^7.22.15",
+    "@babel/preset-react": "^7.22.15",
+    "@babel/preset-typescript": "^7.22.15",
+    "@homebound/rtl-utils": "2.65.0",
+    "@semantic-release/exec": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@storybook/addon-essentials": "^7.4.0",
+    "@storybook/addon-links": "^7.4.0",
+    "@storybook/addons": "^7.4.0",
+    "@storybook/react": "^7.4.0",
+    "@storybook/react-webpack5": "^7.4.0",
+    "@testing-library/dom": "^9.3.1",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@tsconfig/recommended": "^1.0.2",
+    "@types/jest": "^29.5.4",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^4.17.0",
     "@typescript-eslint/parser": "^4.17.0",
     "babel-eslint": "^10.1.0",
@@ -69,21 +70,24 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^3.0.9",
-    "jest": "^27.0.2",
-    "lint-staged": "^10.1.2",
-    "mobx": "^6.3.2",
-    "mobx-react": "^7.2.0",
-    "prettier": "^2.2.1",
-    "prettier-plugin-organize-imports": "^1.1.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "semantic-release": "^17.4.0",
-    "ts-jest": "^27.0.1",
-    "ts-node": "^9.1.1",
-    "tslib": "^2.1.0",
-    "ttypescript": "^1.5.12",
-    "typescript": "^4.3.2",
-    "typescript-transform-paths": "^2.0.1"
-  }
+    "husky": "^3.1.0",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
+    "lint-staged": "^14.0.1",
+    "mobx": "^6.10.2",
+    "mobx-react": "^9.0.1",
+    "prettier": "2.8.8",
+    "prettier-plugin-organize-imports": "^3.2.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "semantic-release": "^21.1.1",
+    "storybook": "^7.4.0",
+    "ts-jest": "^29.1.1",
+    "ts-node": "^10.9.1",
+    "ts-patch": "^3.0.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2",
+    "typescript-transform-paths": "^3.4.6"
+  },
+  "packageManager": "yarn@3.6.3"
 }