@strictly/react-form 0.0.15 → 0.0.16

package/.out/core/mobx/field_adapter_builder.d.ts

@@ -21,5 +21,5 @@ export declare function adapterFromPrototype<From, To, ValuePath extends string,
 export declare function adapterFromPrototype<From, To, E, ValuePath extends string, Context>(converter: TwoWayFieldConverter<From, To, E, ValuePath, Context>, prototype: From): FieldAdapterBuilder<From, To, E, ValuePath, Context>;
 export declare function identityAdapter<V, ValuePath extends string, Context>(prototype: V, required?: boolean): FieldAdapterBuilder<V, V, never, ValuePath, Context>;
 export declare function trimmingStringAdapter<ValuePath extends string, Context>(): FieldAdapterBuilder<string, string, never, ValuePath, Context>;
-export declare function listAdapter<E, ValuePath extends string, Context>(): FieldAdapterBuilder<readonly E[], readonly E[], never, ValuePath, Context>;
+export declare function listAdapter<E, ValuePath extends string = string, Context = unknown>(): FieldAdapterBuilder<readonly E[], readonly E[], never, ValuePath, Context>;
 export {};

package/.out/core/mobx/form_model.d.ts

@@ -21,8 +21,8 @@ export type ValuePathsToAdaptersOf<TypePathsToAdapters extends Partial<Readonly<
     readonly [K in keyof ValuePathsToTypePaths as unknown extends TypePathsToAdapters[ValuePathsToTypePaths[K]] ? never : K]: NonNullable<TypePathsToAdapters[ValuePathsToTypePaths[K]]>;
 } : never;
 export type ContextOf<TypePathsToAdapters extends Partial<Readonly<Record<string, FieldAdapter>>>> = UnionToIntersection<{
-    readonly [K in keyof TypePathsToAdapters]: TypePathsToAdapters[K] extends undefined ? undefined : ContextOfFieldAdapter<NonNullable<TypePathsToAdapters[K]>>;
-}[keyof TypePathsToAdapters]>;
+    readonly [K in keyof TypePathsToAdapters]: TypePathsToAdapters[K] extends undefined ? undefined : unknown extends ContextOfFieldAdapter<NonNullable<TypePathsToAdapters[K]>> ? never : ContextOfFieldAdapter<NonNullable<TypePathsToAdapters[K]>>;
+}[keyof TypePathsToAdapters] | {}>;
 export declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readonly<Record<string, string>>, TypePathsToAdapters extends FlattenedTypePathsToAdaptersOf<FlattenedValuesOfType<T, '*'>, ContextType>, ContextType = ContextOf<TypePathsToAdapters>, ValuePathsToAdapters extends ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths> = ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths>> {
     readonly type: T;
     protected readonly adapters: TypePathsToAdapters;
@@ -31,8 +31,7 @@ export declare abstract class FormModel<T extends Type, ValueToTypePaths extends
     accessor errors: FlattenedErrors<ValuePathsToAdapters>;
     private readonly flattenedTypeDefs;
     constructor(type: T, value: ValueOfType<ReadonlyTypeOfType<T>>, adapters: TypePathsToAdapters);
-    get context(): ContextType;
-    protected abstract toContext(value: ValueOfType<ReadonlyTypeOfType<T>>): ContextType;
+    protected abstract toContext(value: ValueOfType<ReadonlyTypeOfType<T>>, valuePath: keyof ValuePathsToAdapters): ContextType;
     get fields(): SimplifyDeep<FlattenedConvertedFieldsOf<ValuePathsToAdapters>>;
     private get knownFields();
     private maybeSynthesizeFieldByValuePath;

package/.out/core/mobx/form_model.js

@@ -49,7 +49,7 @@ import { computed, observable, runInAction, } from 'mobx';
 import { UnreliableFieldConversionType, } from 'types/field_converters';
 let FormModel = (() => {
     var _a, _FormModel_value_accessor_storage, _FormModel_fieldOverrides_accessor_storage, _FormModel_errors_accessor_storage;
-    var _b, _c, _d, _e;
+    var _b, _c, _d;
     let _instanceExtraInitializers = [];
     let _value_decorators;
     let _value_initializers = [];
@@ -60,7 +60,6 @@ let FormModel = (() => {
     let _errors_decorators;
     let _errors_initializers = [];
     let _errors_extraInitializers = [];
-    let _get_context_decorators;
     let _get_fields_decorators;
     let _get_knownFields_decorators;
     let _get_accessors_decorators;
@@ -95,10 +94,11 @@ let FormModel = (() => {
                 });
                 this.value = mobxCopy(type, value);
                 this.flattenedTypeDefs = flattenTypesOfType(type);
-                const contextValue = this.toContext(value);
                 // pre-populate field overrides for consistent behavior when default information is overwritten
                 // then returned to
-                const conversions = flattenValueTo(type, this.value, () => { }, (_t, value, _setter, typePath, valuePath) => {
+                const conversions = flattenValueTo(type, this.value, () => { }, (_t, fieldValue, _setter, typePath, valuePath) => {
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                    const contextValue = this.toContext(value, valuePath);
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                     const adapter = this.adapters[typePath];
                     if (adapter == null) {
@@ -110,16 +110,13 @@ let FormModel = (() => {
                         return;
                     }
                     // cannot call this.context yet as the "this" pointer has not been fully created
-                    return convert(value, valuePath, contextValue);
+                    return convert(fieldValue, valuePath, contextValue);
                 });
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 this.fieldOverrides = map(conversions, function (_k, v) {
                     return v && [v.value];
                 });
             }
-            get context() {
-                return this.toContext(this.value);
-            }
             get fields() {
                 return new Proxy(this.knownFields, {
                     get: (target, prop) => {
@@ -173,17 +170,18 @@ let FormModel = (() => {
                 const accessor = this.getAccessorForValuePath(valuePath);
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 const fieldTypeDef = this.flattenedTypeDefs[typePath];
+                const context = this.toContext(this.value, valuePath);
                 const { value, required, readonly, } = convert(accessor != null
                     ? accessor.value
                     : fieldTypeDef != null
                         ? mobxCopy(fieldTypeDef, 
                         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                        create(valuePath, this.context))
+                        create(valuePath, context))
                         // fake values can't be copied
                         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                        : create(valuePath, this.context), 
+                        : create(valuePath, context), 
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                valuePath, this.context);
+                valuePath, context);
                 const error = this.errors[valuePath];
                 return {
                     value: fieldOverride != null ? fieldOverride[0] : value,
@@ -235,7 +233,10 @@ let FormModel = (() => {
                     ? elementValue[0]
                     : elementAdapter.create(
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                    elementTypePath, this.context);
+                    elementTypePath, 
+                    // TODO what can we use for the value path here?
+                    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                    this.toContext(this.value, valuePath));
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
                 const originalList = accessor.value;
                 const newList = [
@@ -346,7 +347,7 @@ let FormModel = (() => {
                 const { revert } = this.getAdapterForValuePath(valuePath);
                 assertExists(revert, 'setting value not supported {}', valuePath);
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions, @typescript-eslint/no-explicit-any
-                const conversion = revert(value, valuePath, this.context);
+                const conversion = revert(value, valuePath, this.toContext(this.value, valuePath));
                 const accessor = this.getAccessorForValuePath(valuePath);
                 return runInAction(() => {
                     this.fieldOverrides[valuePath] = [value];
@@ -384,8 +385,10 @@ let FormModel = (() => {
                     return;
                 }
                 const { convert, create, } = adapter;
-                const value = create(valuePath, this.context);
-                const { value: displayValue, } = convert(value, valuePath, this.context);
+                // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                const context = this.toContext(this.value, valuePath);
+                const value = create(valuePath, context);
+                const { value: displayValue, } = convert(value, valuePath, context);
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 const key = valuePath;
                 runInAction(() => {
@@ -410,25 +413,26 @@ let FormModel = (() => {
                 const { convert, revert, create, } = this.getAdapterForValuePath(valuePath);
                 const fieldOverride = this.fieldOverrides[valuePath];
                 const accessor = this.getAccessorForValuePath(valuePath);
+                const context = this.toContext(this.value, valuePath);
                 const { value: storedValue, } = convert(accessor != null
                     ? accessor.value
                     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                    : create(valuePath, this.context), 
+                    : create(valuePath, context), 
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                valuePath, this.context);
+                valuePath, context);
                 const value = fieldOverride != null
                     ? fieldOverride[0]
                     : storedValue;
                 const dirty = storedValue !== value;
                 assertExists(revert, 'changing field directly not supported {}', valuePath);
                 if (ignoreDefaultValue) {
-                    const { value: defaultDisplayValue, } = convert(create(valuePath, this.context), valuePath, this.context);
+                    const { value: defaultDisplayValue, } = convert(create(valuePath, context), valuePath, context);
                     if (defaultDisplayValue === value) {
                         return true;
                     }
                 }
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-                const conversion = revert(value, valuePath, this.context);
+                const conversion = revert(value, valuePath, context);
                 return runInAction(() => {
                     switch (conversion.type) {
                         case UnreliableFieldConversionType.Failure:
@@ -468,13 +472,15 @@ let FormModel = (() => {
                             return success;
                         }
                         const fieldOverride = this.fieldOverrides[adapterPath];
-                        const { value: storedValue, } = convert(accessor.value, valuePath, this.context);
+                        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+                        const context = this.toContext(this.value, valuePath);
+                        const { value: storedValue, } = convert(accessor.value, valuePath, context);
                         const value = fieldOverride != null
                             ? fieldOverride[0]
                             : storedValue;
                         // TODO more nuanced comparison
                         const dirty = fieldOverride != null && fieldOverride[0] !== storedValue;
-                        const conversion = revert(value, valuePath, this.context);
+                        const conversion = revert(value, valuePath, context);
                         switch (conversion.type) {
                             case UnreliableFieldConversionType.Failure:
                                 this.errors[adapterPath] = conversion.error;
@@ -503,14 +509,12 @@ let FormModel = (() => {
             _value_decorators = [(_b = observable).ref.bind(_b)];
             _fieldOverrides_decorators = [(_c = observable).shallow.bind(_c)];
             _errors_decorators = [(_d = observable).shallow.bind(_d)];
-            _get_context_decorators = [(_e = computed).struct.bind(_e)];
             _get_fields_decorators = [computed];
             _get_knownFields_decorators = [computed];
             _get_accessors_decorators = [computed];
             __esDecorate(_a, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
             __esDecorate(_a, null, _fieldOverrides_decorators, { kind: "accessor", name: "fieldOverrides", static: false, private: false, access: { has: obj => "fieldOverrides" in obj, get: obj => obj.fieldOverrides, set: (obj, value) => { obj.fieldOverrides = value; } }, metadata: _metadata }, _fieldOverrides_initializers, _fieldOverrides_extraInitializers);
             __esDecorate(_a, null, _errors_decorators, { kind: "accessor", name: "errors", static: false, private: false, access: { has: obj => "errors" in obj, get: obj => obj.errors, set: (obj, value) => { obj.errors = value; } }, metadata: _metadata }, _errors_initializers, _errors_extraInitializers);
-            __esDecorate(_a, null, _get_context_decorators, { kind: "getter", name: "context", static: false, private: false, access: { has: obj => "context" in obj, get: obj => obj.context }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_fields_decorators, { kind: "getter", name: "fields", static: false, private: false, access: { has: obj => "fields" in obj, get: obj => obj.fields }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_knownFields_decorators, { kind: "getter", name: "knownFields", static: false, private: false, access: { has: obj => "knownFields" in obj, get: obj => obj.knownFields }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_accessors_decorators, { kind: "getter", name: "accessors", static: false, private: false, access: { has: obj => "accessors" in obj, get: obj => obj.accessors }, metadata: _metadata }, null, _instanceExtraInitializers);

package/.out/core/mobx/specs/form_model.tests.js

@@ -12,9 +12,10 @@ const IS_NAN_ERROR = 1;
 const originalIntegerToStringAdapter = adapterFromTwoWayConverter(new IntegerToStringConverter(IS_NAN_ERROR), prototypingFieldValueFactory(0));
 const originalBooleanToBooleanAdapter = identityAdapter(false);
 class TestFormModel extends FormModel {
-    toContext() {
+    toContext(value, valuePath) {
         return {
-            ctx: true,
+            value,
+            valuePath,
         };
     }
 }
@@ -493,23 +494,32 @@ describe('all', function () {
                 let contextCopy;
                 beforeEach(function () {
                     integerToStringAdapter.revert.mockImplementationOnce(function (_value, _path, context) {
-                        contextCopy = Object.assign({}, context);
+                        contextCopy = JSON.stringify(context);
                         return {
                             type: UnreliableFieldConversionType.Success,
                             value: 1,
                         };
                     });
                 });
-                it('supplies the full, previous context when converting', function () {
+                it('supplies the context when converting', function () {
                     model.setFieldValueAndValidate('$.2', '4');
                     expect(integerToStringAdapter.revert).toHaveBeenCalledOnce();
                     expect(integerToStringAdapter.revert).toHaveBeenCalledWith('4', '$.2', {
-                        ctx: true,
+                        // the supplied value isn't a copy, so it will be the model value, even
+                        // if the value has since changed
+                        value: model.value,
+                        valuePath: '$.2',
                     });
                 });
-                it('supplies the context', function () {
-                    expect(contextCopy).toEqual({
-                        ctx: true,
+                it('supplies the correct context value at the time it is being checked', function () {
+                    // the copy will show the supplied value however
+                    expect(JSON.parse(contextCopy)).toEqual({
+                        value: [
+                            1,
+                            3,
+                            7,
+                        ],
+                        valuePath: '$.2',
                     });
                 });
             });

package/.out/core/mobx/types.d.ts

@@ -1,18 +1,18 @@
 import { type ToOfFieldAdapter } from './field_adapter';
 import { type FlattenedConvertedFieldsOf, type FormModel } from './form_model';
 /**
- * Used to extract the supported value paths from a presenter
+ * Used to extract the supported value paths from a model
  */
 export type ValuePathsOfModel<Model extends FormModel<any, any, any, any, any>> = Model extends FormModel<infer _1, infer _2, infer _3, infer _4, infer ValuePathsToAdapters> ? keyof ValuePathsToAdapters : never;
 /**
  * Used to extract the render type (so the value that is passed to the view) of a given value path
- * from a presenter
+ * from a model
  */
 export type ToValueOfModelValuePath<Model extends FormModel<any, any, any, any, any>, K extends ValuePathsOfModel<Model>> = Model extends FormModel<infer _1, infer _2, infer _3, infer _4, infer ValuePathsToAdapters> ? ToOfFieldAdapter<ValuePathsToAdapters[K]> : never;
 /**
- * Extracts the form fields from the presenter. The recommended way is to
+ * Extracts the form fields from a form model. The recommended way is to
  * define the form fields explicitly and use that type to enforce the types
- * of your converters, but generating the FormFields from your presenter
+ * of your converters, but generating the FormFields from your model
  * is less typing, albeit at the cost of potentially getting type errors
  * reported a long way away from the source
  */

package/.out/index.d.ts

@@ -17,7 +17,6 @@ export * from './field_converters/trimming_string_converter';
 export * from './field_converters/validating_converter';
 export * from './field_value_factories/prototyping_field_value_factory';
 export * from './mantine/error_renderer';
-export * from './mantine/field_view';
 export * from './mantine/hooks';
 export * from './types/error_of_field';
 export * from './types/field';

package/.out/index.js

@@ -17,7 +17,6 @@ export * from './field_converters/trimming_string_converter';
 export * from './field_converters/validating_converter';
 export * from './field_value_factories/prototyping_field_value_factory';
 export * from './mantine/error_renderer';
-export * from './mantine/field_view';
 export * from './mantine/hooks';
 export * from './types/error_of_field';
 export * from './types/field';

package/.out/mantine/create_field_view.d.ts

@@ -0,0 +1,20 @@
+import { type ComponentType } from 'react';
+import { type AllFieldsOfFields } from 'types/all_fields_of_fields';
+import { type ErrorOfField } from 'types/error_of_field';
+import { type Fields } from 'types/field';
+import { type ValueTypeOfField } from 'types/value_type_of_field';
+import { type MantineForm } from './types';
+export type FieldViewProps<F extends Fields, K extends keyof F> = {
+    children: (props: {
+        value: ValueTypeOfField<F[K]>;
+        error: ErrorOfField<F[K]> | undefined;
+        ErrorSink: ComponentType<{
+            error: ErrorOfField<F[K]>;
+        }>;
+        onFocus: () => void;
+        onBlur: () => void;
+        onValueChange: (v: ValueTypeOfField<F[K]>) => void;
+        onSubmit: () => void;
+    }) => JSX.Element;
+};
+export declare function createFieldView<F extends Fields, K extends keyof AllFieldsOfFields<F>>(this: MantineForm<F>, valuePath: K): ComponentType<FieldViewProps<F, K>>;

package/.out/mantine/create_field_view.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Observer } from 'mobx-react';
+import { useCallback, } from 'react';
+import { Empty } from 'util/empty';
+/**
+ * Displays current value and error of a field
+ */
+function FieldView({ valuePath, form, children, }) {
+    const onFocus = useCallback(() => {
+        var _a;
+        (_a = form.onFieldFocus) === null || _a === void 0 ? void 0 : _a.call(form, valuePath);
+    }, [
+        form,
+        valuePath,
+    ]);
+    const onBlur = useCallback(() => {
+        var _a;
+        (_a = form.onFieldBlur) === null || _a === void 0 ? void 0 : _a.call(form, valuePath);
+    }, [
+        form,
+        valuePath,
+    ]);
+    const onValueChange = useCallback((value) => {
+        var _a;
+        (_a = form.onFieldValueChange) === null || _a === void 0 ? void 0 : _a.call(form, valuePath, value);
+    }, [
+        form,
+        valuePath,
+    ]);
+    const onSubmit = useCallback(() => {
+        var _a;
+        (_a = form.onFieldSubmit) === null || _a === void 0 ? void 0 : _a.call(form, valuePath);
+    }, [
+        form,
+        valuePath,
+    ]);
+    return (_jsx(Observer, { children: () => {
+            const { value, error, } = form.fields[valuePath];
+            return children({
+                value,
+                error,
+                ErrorSink: Empty,
+                onFocus,
+                onBlur,
+                onValueChange,
+                onSubmit,
+            });
+        } }));
+}
+export function createFieldView(valuePath) {
+    return (props) => {
+        return (_jsx(FieldView, Object.assign({ form: this, valuePath: valuePath }, props)));
+    };
+}

package/.out/mantine/create_list.js

@@ -1,4 +1,5 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, } from 'react';
 import { createUnsafePartialObserverComponent } from 'util/partial';
 export function createList(valuePath, List) {
     const propSource = () => {
@@ -13,6 +14,6 @@ export function createList(valuePath, List) {
 export function DefaultList({ values, listPath, children, }) {
     return (_jsx(_Fragment, { children: values.map(function (value, index) {
             const valuePath = `${listPath}.${index}`;
-            return children(valuePath, value, index);
+            return (_jsx(Fragment, { children: children(valuePath, value, index) }, valuePath));
         }) }));
 }

package/.out/mantine/hooks.d.ts

@@ -11,6 +11,7 @@ import { type StringFieldsOfFields } from 'types/string_fields_of_fields';
 import { type SubFormFields } from 'types/sub_form_fields';
 import { type ValueTypeOfField } from 'types/value_type_of_field';
 import { type SuppliedCheckboxProps } from './create_checkbox';
+import { type FieldViewProps } from './create_field_view';
 import { type FieldsView } from './create_fields_view';
 import { DefaultList, type SuppliedListProps } from './create_list';
 import { type SuppliedPillProps } from './create_pill';
@@ -22,7 +23,7 @@ import { type MantineFieldComponent, type MantineForm } from './types';
 declare function SimpleSelect(props: SelectProps & {
     onChange?: (value: string | null) => void;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function useMantineFormFields<F extends Fields>({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }: FieldsViewProps<F>): MantineFormImpl<F>;
+export declare function useMantineFormFields<F extends Fields>({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }: FieldsViewProps<F>): Omit<MantineFormImpl<F>, 'fields'>;
 declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     private readonly textInputCache;
     private readonly valueInputCache;
@@ -31,6 +32,7 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     private readonly radioCache;
     private readonly pillCache;
     private readonly listCache;
+    private readonly fieldViewCache;
     private readonly fieldsViewCache;
     private readonly formCache;
     accessor fields: F;
@@ -52,6 +54,7 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     pill<K extends keyof AllFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedPillProps, PillProps, ErrorOfField<F[K]>>;
     pill<K extends keyof AllFieldsOfFields<F>, P extends SuppliedPillProps>(valuePath: K, Pill: ComponentType<P>): MantineFieldComponent<SuppliedPillProps, P, ErrorOfField<F[K]>>;
     list<K extends keyof ListFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedListProps<`${K}.${number}`>, ComponentProps<typeof DefaultList<ElementOfArray<F[K]['value']>, K>>, never>;
+    fieldView<K extends keyof AllFieldsOfFields<F>>(valuePath: K): ComponentType<FieldViewProps<F, K>>;
     fieldsView<K extends keyof AllFieldsOfFields<F>, P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>>(valuePath: K, FieldsView: ComponentType<P>): FieldsView<K, MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>>;
     form<K extends keyof AllFieldsOfFields<F>, P extends FormProps<ValueTypeOfField<F[K]>> = FormProps<ValueTypeOfField<F[K]>>>(valuePath: K, Form: ComponentType<P>): MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P, never>;
 }

package/.out/mantine/hooks.js

@@ -49,6 +49,7 @@ import { Cache, } from '@strictly/base';
 import { observable, runInAction, } from 'mobx';
 import { useEffect, useMemo, } from 'react';
 import { createCheckbox, } from './create_checkbox';
+import { createFieldView, } from './create_field_view';
 import { createFieldsView, } from './create_fields_view';
 import { createForm } from './create_form';
 import { createList, DefaultList, } from './create_list';
@@ -60,7 +61,9 @@ import { createValueInput, } from './create_value_input';
 function SimpleSelect(props) {
     return _jsx(Select, Object.assign({}, props));
 }
-export function useMantineFormFields({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }) {
+export function useMantineFormFields({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields,
+// should use FieldView rather than observing fields directly from here
+ }) {
     const form = useMemo(function () {
         return new MantineFormImpl(fields);
     }, 
@@ -153,6 +156,12 @@ let MantineFormImpl = (() => {
                     writable: true,
                     value: new Cache(createList.bind(this))
                 });
+                Object.defineProperty(this, "fieldViewCache", {
+                    enumerable: true,
+                    configurable: true,
+                    writable: true,
+                    value: new Cache(createFieldView.bind(this))
+                });
                 Object.defineProperty(this, "fieldsViewCache", {
                     enumerable: true,
                     configurable: true,
@@ -248,6 +257,9 @@ let MantineFormImpl = (() => {
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 return this.listCache.retrieveOrCreate(valuePath, DefaultList);
             }
+            fieldView(valuePath) {
+                return this.fieldViewCache.retrieveOrCreate(valuePath);
+            }
             fieldsView(valuePath, FieldsView) {
                 // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
                 return this.fieldsViewCache.retrieveOrCreate(valuePath, 

package/.out/mantine/specs/field_view_hooks.stories.d.ts

@@ -0,0 +1,12 @@
+import { type Meta, type StoryObj } from '@storybook/react';
+import { type FieldsViewProps } from 'core/props';
+import { type Field } from 'types/field';
+declare function Component(props: FieldsViewProps<{
+    $: Field<string, string>;
+}>): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof Component>;
+export default meta;
+type Story = StoryObj<typeof Component>;
+export declare const Empty: Story;
+export declare const Populated: Story;
+export declare const Error: Story;

package/.out/mantine/specs/field_view_hooks.stories.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Group, TextInput, } from '@mantine/core';
+import { action } from '@storybook/addon-actions';
+import { useMantineFormFields } from 'mantine/hooks';
+import { useCallback, } from 'react';
+function Component(props) {
+    const form = useMantineFormFields(props);
+    const FieldView = form.fieldView('$');
+    return (_jsx(FieldView, { children: ({ error, value, onBlur, onFocus, onSubmit, onValueChange, }) => {
+            // this *is* a component eslint
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            const onChange = useCallback(({ target: { value } }) => {
+                onValueChange(value);
+            }, [onValueChange]);
+            return (_jsxs(Group, { align: 'start', flex: 1, children: [_jsx(TextInput, { error: error, flex: 1, onBlur: onBlur, onChange: onChange, onFocus: onFocus, value: value }), _jsx(Button, { onClick: onSubmit, children: "Submit Field" })] }));
+        } }));
+}
+const meta = {
+    component: Component,
+    args: {
+        onFieldBlur: action('onFieldBlur'),
+        onFieldFocus: action('onFieldFocus'),
+        onFieldSubmit: action('onFieldSubmit'),
+        onFieldValueChange: action('onFieldValueChange'),
+    },
+};
+export default meta;
+export const Empty = {
+    args: {
+        fields: {
+            $: {
+                readonly: false,
+                required: false,
+                value: '',
+            },
+        },
+    },
+};
+export const Populated = {
+    args: {
+        fields: {
+            $: {
+                readonly: false,
+                required: false,
+                value: 'hello',
+            },
+        },
+    },
+};
+export const Error = {
+    args: {
+        fields: {
+            $: {
+                readonly: false,
+                required: false,
+                value: 'hello',
+                error: 'no hellos allowed',
+            },
+        },
+    },
+};

package/.out/mantine/specs/field_view_hooks.tests.d.ts

@@ -0,0 +1 @@
+export {};

package/.out/mantine/specs/field_view_hooks.tests.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { composeStories } from '@storybook/react';
+import { toArray } from '@strictly/base';
+import { render, } from '@testing-library/react';
+import * as stories from './field_view_hooks.stories';
+const composedStories = composeStories(stories);
+describe('field view hooks', function () {
+    it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+        const wrapper = render(_jsx(Story, {}));
+        expect(wrapper.container).toMatchSnapshot();
+    });
+});