@homebound/form-state 2.18.1 → 2.20.0

package/dist/FormStateApp.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 import { FieldState } from "./index";
-export declare function FormStateApp(): JSX.Element;
+export declare function FormStateApp(): import("react/jsx-runtime").JSX.Element;
 export declare function TextField(props: {
     field: FieldState<string | null | undefined>;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/FormStateApp.js

@@ -5,7 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const index_1 = require("./index");
 function FormStateApp() {
-    const formState = index_1.useFormState({
+    const formState = (0, index_1.useFormState)({
         config: formConfig,
         // Simulate getting the initial form state back from a server call
         init: {
@@ -24,38 +24,12 @@ function FormStateApp() {
             console.log("saving", formState.changedValue);
         },
     });
-    return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => {
             var _a;
-            return (jsx_runtime_1.jsx("div", Object.assign({ className: "App" }, { children: jsx_runtime_1.jsxs("header", Object.assign({ className: "App-header" }, { children: [jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("b", { children: "Author" }, void 0),
-                                jsx_runtime_1.jsx(TextField, { field: formState.firstName }, void 0),
-                                jsx_runtime_1.jsx(TextField, { field: formState.lastName }, void 0)] }, void 0),
-                        jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsxs("strong", { children: ["Books ", jsx_runtime_1.jsx("button", Object.assign({ onClick: () => formState.books.add({}) }, { children: "Add book" }), void 0)] }, void 0),
-                                (_a = formState.books.rows) === null || _a === void 0 ? void 0 : _a.map((row, i) => {
-                                    return (jsx_runtime_1.jsxs("div", { children: ["Book ", i,
-                                            jsx_runtime_1.jsx("button", Object.assign({ onClick: () => formState.books.remove(row.value) }, { children: "X" }), void 0),
-                                            jsx_runtime_1.jsx(TextField, { field: row.title }, void 0)] }, i));
-                                })] }, void 0),
-                        jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("strong", { children: "Rows" }, void 0),
-                                jsx_runtime_1.jsxs("table", Object.assign({ cellPadding: "4px" }, { children: [jsx_runtime_1.jsx("thead", { children: jsx_runtime_1.jsxs("tr", { children: [jsx_runtime_1.jsx("th", { children: "touched" }, void 0),
-                                                    jsx_runtime_1.jsx("th", { children: "valid" }, void 0),
-                                                    jsx_runtime_1.jsx("th", { children: "dirty" }, void 0),
-                                                    jsx_runtime_1.jsx("th", { children: "errors" }, void 0)] }, void 0) }, void 0),
-                                        jsx_runtime_1.jsx("tbody", { children: jsx_runtime_1.jsxs("tr", { children: [jsx_runtime_1.jsx("td", { children: formState.books.touched.toString() }, void 0),
-                                                    jsx_runtime_1.jsx("td", { children: formState.books.valid.toString() }, void 0),
-                                                    jsx_runtime_1.jsx("td", { children: formState.books.dirty.toString() }, void 0),
-                                                    jsx_runtime_1.jsx("td", { children: formState.books.errors }, void 0)] }, void 0) }, void 0)] }), void 0)] }, void 0),
-                        jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("strong", { children: "Form" }, void 0),
-                                jsx_runtime_1.jsxs("table", Object.assign({ cellPadding: "4px" }, { children: [jsx_runtime_1.jsx("thead", { children: jsx_runtime_1.jsxs("tr", { children: [jsx_runtime_1.jsx("th", { children: "touched" }, void 0),
-                                                    jsx_runtime_1.jsx("th", { children: "valid" }, void 0),
-                                                    jsx_runtime_1.jsx("th", { children: "dirty" }, void 0)] }, void 0) }, void 0),
-                                        jsx_runtime_1.jsx("tbody", { children: jsx_runtime_1.jsxs("tr", { children: [jsx_runtime_1.jsx("td", { children: formState.touched.toString() }, void 0),
-                                                    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": "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));
+            return ((0, jsx_runtime_1.jsx)("div", { className: "App", children: (0, jsx_runtime_1.jsxs)("header", { className: "App-header", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("b", { children: "Author" }), (0, jsx_runtime_1.jsx)(TextField, { field: formState.firstName }), (0, jsx_runtime_1.jsx)(TextField, { field: formState.lastName })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("strong", { children: ["Books ", (0, jsx_runtime_1.jsx)("button", { onClick: () => formState.books.add({}), children: "Add book" })] }), (_a = formState.books.rows) === null || _a === void 0 ? void 0 : _a.map((row, i) => {
+                                    return ((0, jsx_runtime_1.jsxs)("div", { children: ["Book ", i, (0, jsx_runtime_1.jsx)("button", { onClick: () => formState.books.remove(row.value), children: "X" }), (0, jsx_runtime_1.jsx)(TextField, { field: row.title })] }, i));
+                                })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Rows" }), (0, jsx_runtime_1.jsxs)("table", { cellPadding: "4px", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "touched" }), (0, jsx_runtime_1.jsx)("th", { children: "valid" }), (0, jsx_runtime_1.jsx)("th", { children: "dirty" }), (0, jsx_runtime_1.jsx)("th", { children: "errors" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: formState.books.touched.toString() }), (0, jsx_runtime_1.jsx)("td", { children: formState.books.valid.toString() }), (0, jsx_runtime_1.jsx)("td", { children: formState.books.dirty.toString() }), (0, jsx_runtime_1.jsx)("td", { children: formState.books.errors })] }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("strong", { children: "Form" }), (0, jsx_runtime_1.jsxs)("table", { cellPadding: "4px", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "touched" }), (0, jsx_runtime_1.jsx)("th", { children: "valid" }), (0, jsx_runtime_1.jsx)("th", { children: "dirty" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { children: formState.touched.toString() }), (0, jsx_runtime_1.jsx)("td", { children: formState.valid.toString() }), (0, jsx_runtime_1.jsx)("td", { children: formState.dirty.toString() })] }) })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "touch", onClick: () => (formState.touched = !formState.touched), children: "touch" }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "revertChanges", onClick: () => formState.revertChanges(), children: "revert" }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "commitChanges", onClick: () => formState.commitChanges(), children: "commit" }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "set", onClick: () => formState.set({ firstName: "a2" }), children: "set" })] })] })] }) }));
+        } }));
 }
 exports.FormStateApp = FormStateApp;
 // Configure the fields/behavior for AuthorInput's fields
@@ -74,21 +48,8 @@ function TextField(props) {
     const { field } = props;
     // Somewhat odd: input won't update unless we use <Observer>, even though our
     // parent uses `<Observer>`
-    return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsxs("span", { children: [field.key, ":"] }, void 0),
-                jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx("input", { "data-testid": field.key, value: field.value || "", onBlur: () => field.blur(), readOnly: field.readOnly, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("span", { children: [field.key, ":"] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("input", { "data-testid": field.key, value: field.value || "", onBlur: () => field.blur(), readOnly: field.readOnly, onChange: (e) => {
                             field.set(e.target.value);
-                        } }, void 0) }, void 0),
-                jsx_runtime_1.jsxs("table", Object.assign({ cellPadding: "4px" }, { children: [jsx_runtime_1.jsx("thead", { children: jsx_runtime_1.jsxs("tr", { children: [jsx_runtime_1.jsx("th", { children: "touched" }, void 0),
-                                    jsx_runtime_1.jsx("th", { children: "valid" }, void 0),
-                                    jsx_runtime_1.jsx("th", { children: "dirty" }, void 0),
-                                    jsx_runtime_1.jsx("th", { children: "readOnly" }, void 0),
-                                    jsx_runtime_1.jsx("th", { children: "errors" }, void 0),
-                                    jsx_runtime_1.jsx("th", { children: "original value" }, void 0)] }, void 0) }, void 0),
-                        jsx_runtime_1.jsx("tbody", { children: jsx_runtime_1.jsxs("tr", { children: [jsx_runtime_1.jsx("td", Object.assign({ "data-testid": `${field.key}_touched` }, { children: field.touched.toString() }), void 0),
-                                    jsx_runtime_1.jsx("td", Object.assign({ "data-testid": `${field.key}_valid` }, { children: field.valid.toString() }), void 0),
-                                    jsx_runtime_1.jsx("td", Object.assign({ "data-testid": `${field.key}_dirty` }, { children: field.dirty.toString() }), void 0),
-                                    jsx_runtime_1.jsx("td", Object.assign({ "data-testid": `${field.key}_readOnly` }, { children: field.readOnly.toString() }), void 0),
-                                    jsx_runtime_1.jsx("td", Object.assign({ "data-testid": `${field.key}_errors` }, { children: field.errors }), void 0),
-                                    jsx_runtime_1.jsx("td", Object.assign({ "data-testid": `${field.key}_original` }, { children: field.originalValue }), void 0)] }, void 0) }, void 0)] }), void 0)] }, void 0)) }, void 0));
+                        } }) }), (0, jsx_runtime_1.jsxs)("table", { cellPadding: "4px", children: [(0, jsx_runtime_1.jsx)("thead", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("th", { children: "touched" }), (0, jsx_runtime_1.jsx)("th", { children: "valid" }), (0, jsx_runtime_1.jsx)("th", { children: "dirty" }), (0, jsx_runtime_1.jsx)("th", { children: "readOnly" }), (0, jsx_runtime_1.jsx)("th", { children: "errors" }), (0, jsx_runtime_1.jsx)("th", { children: "original value" })] }) }), (0, jsx_runtime_1.jsx)("tbody", { children: (0, jsx_runtime_1.jsxs)("tr", { children: [(0, jsx_runtime_1.jsx)("td", { "data-testid": `${field.key}_touched`, children: field.touched.toString() }), (0, jsx_runtime_1.jsx)("td", { "data-testid": `${field.key}_valid`, children: field.valid.toString() }), (0, jsx_runtime_1.jsx)("td", { "data-testid": `${field.key}_dirty`, children: field.dirty.toString() }), (0, jsx_runtime_1.jsx)("td", { "data-testid": `${field.key}_readOnly`, children: field.readOnly.toString() }), (0, jsx_runtime_1.jsx)("td", { "data-testid": `${field.key}_errors`, children: field.errors }), (0, jsx_runtime_1.jsx)("td", { "data-testid": `${field.key}_original`, children: field.originalValue })] }) })] })] })) }));
 }
 exports.TextField = TextField;

package/dist/FormStateApp.test.js

@@ -6,21 +6,21 @@ const react_1 = require("@testing-library/react");
 const FormStateApp_1 = require("./FormStateApp");
 describe("FormStateApp", () => {
     it("save resets dirty reactively", async () => {
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(FormStateApp_1.FormStateApp, {}, void 0));
-        expect(r.firstName_dirty()).toHaveTextContent("false");
-        rtl_utils_1.type(r.firstName, "changed");
-        expect(r.firstName_dirty()).toHaveTextContent("true");
-        react_1.fireEvent.blur(r.firstName());
-        expect(r.firstName_touched()).toHaveTextContent("true");
-        rtl_utils_1.click(r.commitChanges);
-        expect(r.firstName_dirty()).toHaveTextContent("false");
-        expect(r.firstName_touched()).toHaveTextContent("false");
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(FormStateApp_1.FormStateApp, {}));
+        expect(r.firstName_dirty).toHaveTextContent("false");
+        (0, rtl_utils_1.type)(r.firstName, "changed");
+        expect(r.firstName_dirty).toHaveTextContent("true");
+        react_1.fireEvent.blur(r.firstName);
+        expect(r.firstName_touched).toHaveTextContent("true");
+        (0, rtl_utils_1.click)(r.commitChanges);
+        expect(r.firstName_dirty).toHaveTextContent("false");
+        expect(r.firstName_touched).toHaveTextContent("false");
     });
     it("originalValue is reactive", async () => {
-        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.commitChanges);
-        expect(r.firstName_original()).toHaveTextContent("a2");
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(FormStateApp_1.FormStateApp, {}));
+        expect(r.firstName_original).toHaveTextContent("a1");
+        (0, rtl_utils_1.click)(r.set);
+        (0, rtl_utils_1.click)(r.commitChanges);
+        expect(r.firstName_original).toHaveTextContent("a2");
     });
 });

package/dist/config.d.ts

@@ -7,18 +7,18 @@ import { Builtin } from "./utils";
  * Basically every field is either a value/primitive or a list, and this `ObjectConfig` lets
  * the caller define field-specific behavior, i.e. validation rules.
  */
-export declare type ObjectConfig<T> = {
+export type ObjectConfig<T> = {
     [P in keyof OmitIf<T, Function>]: T[P] extends Fragment<infer V> ? FragmentFieldConfig : T[P] extends Array<infer U> | null | undefined ? U extends Builtin ? ValueFieldConfig<T, T[P]> : ListFieldConfig<T, U> : ValueFieldConfig<T, T[P]> | ObjectFieldConfig<T[P]>;
 };
-declare type OmitIf<Base, Condition> = Pick<Base, {
+type OmitIf<Base, Condition> = Pick<Base, {
     [Key in keyof Base]: Base[Key] extends Condition ? never : Key;
 }[keyof Base]>;
 /** Field configuration for an opaque value that we don't actually want to include. */
-export declare type FragmentFieldConfig = {
+export type FragmentFieldConfig = {
     type: "fragment";
 };
 /** Field configuration for primitive values, i.e. strings/numbers/Dates/user-defined types. */
-export declare type ValueFieldConfig<T, V> = {
+export type ValueFieldConfig<T, V> = {
     type: "value";
     rules?: Rule<V | null | undefined>[];
     /**
@@ -45,7 +45,7 @@ export declare type ValueFieldConfig<T, V> = {
     strictOrder?: false;
 };
 /** Field configuration for list values, i.e. `U` is `Book` in a form with `books: Book[]`. */
-export declare type ListFieldConfig<T, U> = {
+export type ListFieldConfig<T, U> = {
     type: "list";
     /** Rules that can run on the full list of children. */
     rules?: Rule<readonly ObjectState<U>[]>[];
@@ -66,7 +66,7 @@ export declare type ListFieldConfig<T, U> = {
     /** Set to not consider the order of the list when evaluating changed/dirty states. */
     strictOrder?: false;
 };
-export declare type ObjectFieldConfig<U> = {
+export type ObjectFieldConfig<U> = {
     type: "object";
     /** Config for the child's form state, i.e. each book. */
     config: ObjectConfig<U>;

package/dist/fields/fragmentField.js

@@ -6,14 +6,14 @@ const utils_1 = require("../utils");
 function newFragmentField(parentInstance, key) {
     // We always return the same `instance` field from our `value` method, but
     // we want to pretend that it's observable, so use a tick to force it.
-    const _tick = mobx_1.observable({ value: 1 });
+    const _tick = (0, mobx_1.observable)({ value: 1 });
     // We steal the fragment from our parent, so that it doesn't
     // accidentally end up on the wire
     let value = parentInstance[key];
     delete parentInstance[key];
     const obj = {
         get value() {
-            _tick.value > 0 || utils_1.fail();
+            _tick.value > 0 || (0, utils_1.fail)();
             return value;
         },
         set value(v) {
@@ -21,6 +21,6 @@ function newFragmentField(parentInstance, key) {
             _tick.value++;
         },
     };
-    return mobx_1.makeAutoObservable(obj, { value: false });
+    return (0, mobx_1.makeAutoObservable)(obj, { value: false });
 }
 exports.newFragmentField = newFragmentField;

package/dist/fields/listField.js

@@ -8,15 +8,15 @@ const utils_1 = require("../utils");
 function newListFieldState(parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeAutoSave) {
     // Keep a map of "item in the parent list" -> "that item's ObjectState"
     const rowMap = new Map();
-    const _tick = mobx_1.observable({ value: 1 });
-    const _childTick = mobx_1.observable({ value: 1 });
+    const _tick = (0, mobx_1.observable)({ value: 1 });
+    const _childTick = (0, mobx_1.observable)({ value: 1 });
     // this is for dirty checking, not object identity
     let originalCopy = [...(parentInstance[key] || [])];
     const list = {
         key: key,
         // Our fundamental state of wrapped Us
         get value() {
-            return _tick.value > 0 && _childTick.value > 0 ? parentInstance[key] : utils_1.fail();
+            return _tick.value > 0 && _childTick.value > 0 ? parentInstance[key] : (0, utils_1.fail)();
         },
         _focused: false,
         _readOnly: false,
@@ -68,14 +68,14 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             // It's unclear why we need to access _tick.value here, b/c calling `this.value` should
             // transitively register us as a dependency on it
             if (_tick.value < 0)
-                utils_1.fail();
+                (0, utils_1.fail)();
             // Avoid using `this.value` to avoid registering `_childTick` as a dependency
             const value = parentInstance[key];
             return (value || []).map((child) => {
                 // Because we're reading from this.value, child will be the proxy version
                 let childState = rowMap.get(child);
                 if (!childState) {
-                    childState = objectField_1.newObjectState(config, parentState, list, child, undefined, maybeAutoSave);
+                    childState = (0, objectField_1.newObjectState)(config, parentState, list, child, undefined, maybeAutoSave);
                     rowMap.set(child, childState);
                 }
                 return childState;
@@ -99,7 +99,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         },
         get errors() {
             if (_tick.value < 0)
-                utils_1.fail();
+                (0, utils_1.fail)();
             const opts = { value: this.rows, key: key, originalValue: originalCopy || [], object: parentState() };
             return this.rules.map((r) => r(opts)).filter(utils_1.isNotUndefined);
         },
@@ -138,7 +138,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         },
         set(values, opts = {}) {
             if (this.readOnly && !opts.resetting && !opts.refreshing) {
-                throw new Error(`${key} is currently readOnly`);
+                throw new Error(`${String(key)} is currently readOnly`);
             }
             // We should be passed values that are non-proxies.
             parentInstance[key] = values.map((value) => {
@@ -153,7 +153,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
                         }
                     }
                     // If we didn't have an existing child, just make a new object state
-                    childState = objectField_1.createObjectState(config, value, { maybeAutoSave });
+                    childState = (0, objectField_1.createObjectState)(config, value, { maybeAutoSave });
                     rowMap.set(value, childState);
                 }
                 // Return the already-observable'd value so that our `parent.value[key] = values` doesn't re-proxy things
@@ -167,7 +167,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         },
         add(value, spliceIndex) {
             // This is called by the user, so value should be a non-proxy value we should keep
-            const childState = objectField_1.createObjectState(config, value, { maybeAutoSave });
+            const childState = (0, objectField_1.createObjectState)(config, value, { maybeAutoSave });
             rowMap.set(value, childState);
             this.ensureSet();
             this.value.splice(typeof spliceIndex === "number" ? spliceIndex : this.value.length, 0, childState.value);
@@ -206,13 +206,13 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             _tick.value++;
         },
     };
-    const proxy = mobx_1.makeAutoObservable(list, {
+    const proxy = (0, mobx_1.makeAutoObservable)(list, {
         // See other makeAutoObservable comment
-        value: mobx_1.computed({ equals: () => false }),
+        value: (0, mobx_1.computed)({ equals: () => false }),
     });
     // Any time a row's value changes, percolate that to our `.value` (so the callers to our
     // `.value` will rerun given the value they saw has deeply changed.)
-    mobx_1.reaction(() => proxy.rows.map((r) => r.value), () => _childTick.value++);
+    (0, mobx_1.reaction)(() => proxy.rows.map((r) => r.value), () => _childTick.value++);
     return proxy;
 }
 exports.newListFieldState = newListFieldState;

package/dist/fields/objectField.d.ts

@@ -28,22 +28,22 @@ import { Builtin } from "../utils";
  *       - title: FieldState
  * ```
  */
-export declare type ObjectState<T> = FieldStates<T> & FieldState<T> & {
+export type ObjectState<T> = FieldStates<T> & FieldState<T> & {
     /** Sets the state of fields in `state`. */
     set(state: Partial<T>, opts?: SetOpts): void;
     /** Returns whether the object can be saved, i.e. is valid, but also as a side-effect marks touched. */
     canSave(): boolean;
 };
-export declare type ObjectStateInternal<T> = ObjectState<T> & {
+export type ObjectStateInternal<T> = ObjectState<T> & {
     set(value: T, opts?: InternalSetOpts): void;
 };
 declare const fragmentSym: unique symbol;
-export declare type Fragment<V> = V & {
+export type Fragment<V> = V & {
     [fragmentSym]: true;
 };
 export declare function fragment<V>(value: V): Fragment<V>;
 /** For a given input type `T`, decorate each field into the "field state" type that holds our form-relevant state, i.e. valid/touched/etc. */
-declare type FieldStates<T> = {
+type FieldStates<T> = {
     [K in keyof T]-?: T[K] extends Fragment<infer V> ? FragmentField<V> : T[K] extends Array<infer U> | null | undefined ? [U] extends [Builtin] ? FieldState<T[K]> : ListFieldState<U> : T[K] extends Builtin | null | undefined ? FieldState<T[K]> : ObjectState<T[K]>;
 };
 /**

package/dist/fields/objectField.js

@@ -41,13 +41,13 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         const config = _config;
         let field;
         if (config.type === "value") {
-            field = valueField_1.newValueFieldState(instance, getObjectState, key, config.rules || [], config.isIdKey ||
+            field = (0, valueField_1.newValueFieldState)(instance, getObjectState, key, config.rules || [], config.isIdKey ||
                 // Default the id key to "id" unless some other field has isIdKey set
                 (key === "id" &&
                     !Object.entries(objectConfig).some(([other, c]) => other !== key && c.isIdKey)), config.isDeleteKey || false, config.isReadOnlyKey || false, config.computed || false, config.readOnly || false, (_a = config.strictOrder) !== null && _a !== void 0 ? _a : true, maybeAutoSave);
         }
         else if (config.type === "list") {
-            field = listField_1.newListFieldState(instance, getObjectState, key, config.rules || [], config, config.config, (_b = config.strictOrder) !== null && _b !== void 0 ? _b : true, maybeAutoSave);
+            field = (0, listField_1.newListFieldState)(instance, getObjectState, key, config.rules || [], config, config.config, (_b = config.strictOrder) !== null && _b !== void 0 ? _b : true, maybeAutoSave);
         }
         else if (config.type === "object") {
             if (!instance[key]) {
@@ -56,7 +56,7 @@ function newObjectState(config, parentState, parentListState, instance, key, may
             field = newObjectState(config.config, getObjectState, undefined, instance[key], key, maybeAutoSave);
         }
         else if (config.type === "fragment") {
-            field = fragmentField_1.newFragmentField(instance, key);
+            field = (0, fragmentField_1.newFragmentField)(instance, key);
         }
         else {
             throw new Error("Unsupported");
@@ -65,7 +65,7 @@ function newObjectState(config, parentState, parentListState, instance, key, may
     });
     // We always return the same `instance` field from our `value` method, but
     // we want to pretend that it's observable, so use a tick to force it.
-    const _tick = mobx_1.observable({ value: 1 });
+    const _tick = (0, mobx_1.observable)({ value: 1 });
     const fieldNames = Object.keys(config);
     function getFields(proxyThis) {
         return fieldNames.map((name) => proxyThis[name]);
@@ -74,7 +74,7 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         ...Object.fromEntries(fieldStates),
         key,
         get value() {
-            _tick.value > 0 || utils_1.fail();
+            _tick.value > 0 || (0, utils_1.fail)();
             return instance;
         },
         set value(value) {
@@ -137,10 +137,10 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         // Accepts new values in bulk, i.e. when setting the form initial state from the backend.
         set(value, opts = {}) {
             if (this.readOnly && !opts.resetting && !opts.refreshing) {
-                throw new Error(`${key || "formState"} is currently readOnly`);
+                throw new Error(`${String(key) || "formState"} is currently readOnly`);
             }
             getFields(this).forEach((field) => {
-                if (field.key in value) {
+                if (value && typeof value === "object" && field.key in value) {
                     field.set(value[field.key], opts);
                 }
             });
@@ -187,15 +187,15 @@ function newObjectState(config, parentState, parentListState, instance, key, may
             return this[idField.key].value === other[idField.key];
         },
     };
-    proxy = mobx_1.makeAutoObservable(obj, {
+    proxy = (0, mobx_1.makeAutoObservable)(obj, {
         // Use custom equality on `value` that is _never_ equals. This sounds weird, but
         // because our `value` is always the same `instance` that was passed to `newObjectState`,
         // to mobx this looks like the value never changes, and it will never invoke observers
         // even with our tick-based hacks.
-        value: mobx_1.computed({ equals: () => false }),
+        value: (0, mobx_1.computed)({ equals: () => false }),
     });
     // Any time a field changes, percolate that change up to us
-    mobx_1.reaction(() => getFields(proxy).map((f) => f.value), () => _tick.value++);
+    (0, mobx_1.reaction)(() => getFields(proxy).map((f) => f.value), () => _tick.value++);
     return proxy;
 }
 exports.newObjectState = newObjectState;

package/dist/fields/valueField.d.ts

@@ -36,6 +36,19 @@ export interface FieldState<V> {
     revertChanges(): void;
     /** Accepts the current changed value (if any) as the original and resets dirty/touched. */
     commitChanges(): void;
+    /** Creates a new FieldState with a transformation of the value, i.e. string to int, or feet to inches. */
+    adapt<V2>(adapter: ValueAdapter<V, V2>): FieldState<V2>;
+}
+/**
+ * Allows changing a type in the formState (like a string) to a different type in the UI (like a number).
+ *
+ * Or doing unit of measure conversions within the same type, like from meters to feet.
+ */
+export interface ValueAdapter<V, V2 = V> {
+    /** Converts the original FieldState's value `V` into new `V2` type. */
+    toValue(value: V): V2;
+    /** Converts the adapted FieldState's value `V2` back into the original `V` type. */
+    fromValue(value: V2): V;
 }
 /** Public options for our `set` command. */
 export interface SetOpts {

package/dist/fields/valueField.js

@@ -3,18 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.newValueFieldState = void 0;
 const is_plain_object_1 = require("is-plain-object");
 const mobx_1 = require("mobx");
+const proxies_1 = require("../proxies");
 const rules_1 = require("../rules");
 const utils_1 = require("../utils");
 function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, isDeleteKey, isReadOnlyKey, computed, readOnly, strictOrder, maybeAutoSave) {
     // keep a copy here for reference equality
     const value = parentInstance[key];
-    let _originalValue = value === null ? undefined : is_plain_object_1.isPlainObject(value) ? mobx_1.toJS(value) : value;
+    let _originalValue = value === null ? undefined : (0, is_plain_object_1.isPlainObject)(value) ? (0, mobx_1.toJS)(value) : value;
     // Because we read/write the value directly back into parentInstance[key],
     // which itself is not a proxy, we use this as our "value changed" trigger.
-    const _tick = mobx_1.observable({ value: 1 });
-    const _originalValueTick = mobx_1.observable({ value: 1 });
+    const _tick = (0, mobx_1.observable)({ value: 1 });
+    const _originalValueTick = (0, mobx_1.observable)({ value: 1 });
     const field = {
-        key,
+        key: key,
         touched: false,
         /** Current readOnly value. */
         _readOnly: readOnly || false,
@@ -25,17 +26,18 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
         _isReadOnlyKey: isReadOnlyKey,
         rules,
         get value() {
-            const value = _tick.value > 0 ? parentInstance[key] : utils_1.fail();
+            // If we're wrapping a mobx store, then we'll get reactivity from parentInstance[key]
+            const value = _tick.value > 0 ? parentInstance[key] : (0, utils_1.fail)();
             // Re-create the `keepNull` logic on sets but for our initial read where our
             // originalValue is null (empty) but we want to expose it as undefined for
             // consistency of "empty-ness" to our UI components.
-            return value === null && utils_1.isEmpty(_originalValue) ? undefined : value;
+            return value === null && (0, utils_1.isEmpty)(_originalValue) ? undefined : value;
         },
         set value(v) {
             this.set(v);
         },
         get dirty() {
-            return !utils_1.areEqual(this.originalValue, this.value, strictOrder);
+            return !(0, utils_1.areEqual)(this.originalValue, this.value, strictOrder);
         },
         /** Returns whether this field is readOnly, although if our parent is readOnly then it trumps. */
         get readOnly() {
@@ -87,7 +89,7 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
         },
         set(value, opts = {}) {
             if (this.readOnly && !opts.resetting && !opts.refreshing) {
-                throw new Error(`${key} is currently readOnly`);
+                throw new Error(`${String(key)} is currently readOnly`);
             }
             if (opts.refreshing && this.dirty && this.value !== value) {
                 // Ignore incoming values if we have changes (this.dirty) unless our latest change (this.value)
@@ -101,12 +103,12 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             }
             // If the user has deleted/emptied a value that was originally set, keep it as `null`
             // so that our partial update to the backend correctly unsets it.
-            const keepNull = !utils_1.isEmpty(this.originalValue) && utils_1.isEmpty(value) && !opts.refreshing;
+            const keepNull = !(0, utils_1.isEmpty)(this.originalValue) && (0, utils_1.isEmpty)(value) && !opts.refreshing;
             // If a list of primitives was originally undefined, coerce `[]` to `undefined`
-            const coerceEmptyList = value && value instanceof Array && value.length === 0 && utils_1.isEmpty(this.originalValue);
-            const newValue = keepNull ? null : utils_1.isEmpty(value) || coerceEmptyList ? undefined : value;
+            const coerceEmptyList = value && value instanceof Array && value.length === 0 && (0, utils_1.isEmpty)(this.originalValue);
+            const newValue = keepNull ? null : (0, utils_1.isEmpty)(value) || coerceEmptyList ? undefined : value;
             // Set the value on our parent object
-            const changed = !utils_1.areEqual(newValue, this.value, strictOrder);
+            const changed = !(0, utils_1.areEqual)(newValue, this.value, strictOrder);
             parentInstance[key] = newValue;
             _tick.value++;
             if (opts.refreshing) {
@@ -118,6 +120,9 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
                 this.maybeAutoSave();
             }
         },
+        adapt(adapter) {
+            return adapt(this, adapter);
+        },
         revertChanges() {
             if (!computed) {
                 this.set(this.originalValue, { resetting: true });
@@ -125,8 +130,8 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             this.touched = false;
         },
         commitChanges() {
-            if (is_plain_object_1.isPlainObject(this.originalValue)) {
-                this.originalValue = mobx_1.toJS(this.value);
+            if ((0, is_plain_object_1.isPlainObject)(this.originalValue)) {
+                this.originalValue = (0, mobx_1.toJS)(this.value);
             }
             else {
                 this.originalValue = this.value;
@@ -158,3 +163,33 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
     return field;
 }
 exports.newValueFieldState = newValueFieldState;
+/**
+ * Returns a proxy that looks exactly like the original `field`, in terms of valid/touched/errors/etc., but
+ * has any methods that use `V` overridden to use be `V2`.
+ *
+ * Note that `V2` can be a new type, like string -> number, or just a transformation on the same
+ * type, i.e. feet -> inches where both are `number`s.
+ */
+function adapt(field, adapter) {
+    return (0, proxies_1.newDelegateProxy)(field, {
+        rules: [],
+        get value() {
+            return adapter.toValue(field.value);
+        },
+        set value(v) {
+            field.value = adapter.fromValue(v);
+        },
+        set: (v) => {
+            field.value = adapter.fromValue(v);
+        },
+        get changedValue() {
+            return this.value;
+        },
+        adapt(adapter) {
+            return adapt(this, adapter);
+        },
+        get originalValue() {
+            return adapter.toValue(field.originalValue);
+        },
+    });
+}

package/dist/formState.stories.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-import { Meta } from "@storybook/react";
-declare const _default: Meta<import("@storybook/react").Args>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
 export default _default;
-export declare function AppExample(): JSX.Element;
+export declare function AppExample(): import("react/jsx-runtime").JSX.Element;

package/dist/formState.stories.js

@@ -8,6 +8,6 @@ exports.default = {
     title: "Components/Form State",
 };
 function AppExample() {
-    return jsx_runtime_1.jsx(FormStateApp_1.FormStateApp, {}, void 0);
+    return (0, jsx_runtime_1.jsx)(FormStateApp_1.FormStateApp, {});
 }
 exports.AppExample = AppExample;