@strictly/react-form 0.0.15 → 0.0.16

package/dist/index.d.ts

@@ -73,7 +73,7 @@ declare function adapterFromPrototype<From, To, ValuePath extends string, Contex
 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>;
 declare function identityAdapter<V, ValuePath extends string, Context>(prototype: V, required?: boolean): FieldAdapterBuilder<V, V, never, ValuePath, Context>;
 declare function trimmingStringAdapter<ValuePath extends string, Context>(): FieldAdapterBuilder<string, string, never, ValuePath, Context>;
-declare function listAdapter<E, ValuePath extends string, Context>(): FieldAdapterBuilder<readonly E[], readonly E[], never, ValuePath, Context>;
+declare function listAdapter<E, ValuePath extends string = string, Context = unknown>(): FieldAdapterBuilder<readonly E[], readonly E[], never, ValuePath, Context>;
 
 type FieldAdaptersOfValues<FlattenedValues extends Readonly<Record<string, any>>, TypePathsToValuePaths extends Readonly<Record<keyof FlattenedValues, string>> = Readonly<Record<keyof FlattenedValues, any>>, Context = any> = {
     readonly [K in keyof FlattenedValues]: FieldAdapter<FlattenedValues[K], any, any, TypePathsToValuePaths[K], Context>;
@@ -119,8 +119,8 @@ type ValuePathsToAdaptersOf<TypePathsToAdapters extends Partial<Readonly<Record<
     readonly [K in keyof ValuePathsToTypePaths as unknown extends TypePathsToAdapters[ValuePathsToTypePaths[K]] ? never : K]: NonNullable<TypePathsToAdapters[ValuePathsToTypePaths[K]]>;
 } : never;
 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] | {}>;
 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;
@@ -129,8 +129,7 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     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;
@@ -154,18 +153,18 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
 }
 
 /**
- * Used to extract the supported value paths from a presenter
+ * Used to extract the supported value paths from a model
  */
 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
  */
 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
  */
@@ -286,21 +285,6 @@ declare function DefaultErrorRenderer({ error, }: InternalErrorRendererProps<any
 
 type ValueTypeOfField<F extends Field> = F extends Field<infer V> ? V : never;
 
-/**
- * Displays current value and error of a field
- */
-declare function FieldView<F extends Fields, K extends keyof F>({ fields, valuePath, children, }: {
-    fields: F;
-    valuePath: K;
-    children: (props: {
-        value: ValueTypeOfField<F[K]>;
-        error: ErrorOfField<F[K]> | undefined;
-        ErrorSink: ComponentType<{
-            error: ErrorOfField<F[K]>;
-        }>;
-    }) => JSX.Element;
-}): react_jsx_runtime.JSX.Element;
-
 type AllFieldsOfFields<F extends Fields> = {
     [K in keyof F as ValueTypeOfField<F[K]> extends any ? K : never]: F[K];
 };
@@ -353,6 +337,20 @@ type MantineFieldComponent<T, P = T, E = any> = UnsafePartialComponent<Component
 
 type SuppliedCheckboxProps = Pick<CheckboxProps, 'name' | 'checked' | 'disabled' | 'required' | 'error' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyUp'>;
 
+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;
+};
+
 type CallbackMapper<ValuePath extends string> = {
     <Cb extends (...args: any[]) => any>(cb: Cb): Parameters<Cb> extends [infer SubFormValuePath extends string, ...(infer Rest)] ? SubFormValuePath extends StringConcatOf<ValuePath, infer Postfix> ? (valuePath: `$${Postfix}`, ...rest: Rest) => ReturnType<Cb> : never : never;
 };
@@ -403,7 +401,7 @@ type SuppliedValueInputProps<V, T extends Element = Element> = Partial<{
 declare function SimpleSelect(props: SelectProps & {
     onChange?: (value: string | null) => void;
 }): react_jsx_runtime.JSX.Element;
-declare function useMantineFormFields<F extends Fields>({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }: FieldsViewProps<F>): MantineFormImpl<F>;
+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;
@@ -412,6 +410,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;
@@ -433,6 +432,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>;
 }
@@ -445,4 +445,4 @@ declare function mergeValidators<Validators1 extends Partial<Readonly<Record<Key
 
 declare function Empty(): null;
 
-export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, type ContextOf, type ContextOfFieldAdapter, DefaultErrorRenderer, Empty, type ErrorOfField, type ErrorOfFieldAdapter, type ErrorRenderer, type ErrorRendererProps, type Field, type FieldAdapter, type FieldAdaptersOfValues, type FieldValueFactory, FieldView, type Fields, type FieldsViewProps, type FlattenedAdaptersOfFields, type FlattenedConvertedFieldsOf, type FlattenedTypePathsToAdaptersOf, type FormFieldsOfFieldAdapters, type FormFieldsOfModel, FormModel, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, type ToValueOfModelValuePath, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, type ValuePathOfFieldAdapter, type ValuePathsOfModel, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, prototypingFieldValueFactory, subFormFieldAdapters, trimmingStringAdapter, useDefaultMobxFormHooks, useMantineFormFields, usePartialComponent, usePartialObserverComponent, validatingConverter };
+export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, type ContextOf, type ContextOfFieldAdapter, DefaultErrorRenderer, Empty, type ErrorOfField, type ErrorOfFieldAdapter, type ErrorRenderer, type ErrorRendererProps, type Field, type FieldAdapter, type FieldAdaptersOfValues, type FieldValueFactory, type Fields, type FieldsViewProps, type FlattenedAdaptersOfFields, type FlattenedConvertedFieldsOf, type FlattenedTypePathsToAdaptersOf, type FormFieldsOfFieldAdapters, type FormFieldsOfModel, FormModel, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, type ToValueOfModelValuePath, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, type ValuePathOfFieldAdapter, type ValuePathsOfModel, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, prototypingFieldValueFactory, subFormFieldAdapters, trimmingStringAdapter, useDefaultMobxFormHooks, useMantineFormFields, usePartialComponent, usePartialObserverComponent, validatingConverter };

package/dist/index.js

@@ -326,8 +326,8 @@ import {
   observable,
   runInAction
 } from "mobx";
-var _accessors_dec, _knownFields_dec, _fields_dec, _context_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
-_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errors_dec = [observable.shallow], _context_dec = [computed.struct], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed];
+var _accessors_dec, _knownFields_dec, _fields_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
+_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errors_dec = [observable.shallow], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed];
 var FormModel = class {
   constructor(type, value, adapters) {
     this.type = type;
@@ -339,13 +339,13 @@ var FormModel = class {
     __publicField(this, "flattenedTypeDefs");
     this.value = mobxCopy(type, value);
     this.flattenedTypeDefs = flattenTypesOfType(type);
-    const contextValue = this.toContext(value);
     const conversions = flattenValueTo(
       type,
       this.value,
       () => {
       },
-      (_t, value2, _setter, typePath, valuePath) => {
+      (_t, fieldValue, _setter, typePath, valuePath) => {
+        const contextValue = this.toContext(value, valuePath);
         const adapter2 = this.adapters[typePath];
         if (adapter2 == null) {
           return;
@@ -357,16 +357,13 @@ var FormModel = class {
         if (revert == null) {
           return;
         }
-        return convert(value2, valuePath, contextValue);
+        return convert(fieldValue, valuePath, contextValue);
       }
     );
     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,
@@ -426,6 +423,7 @@ var FormModel = class {
     const fieldOverride = this.fieldOverrides[valuePath];
     const accessor = this.getAccessorForValuePath(valuePath);
     const fieldTypeDef = this.flattenedTypeDefs[typePath];
+    const context = this.toContext(this.value, valuePath);
     const {
       value,
       required,
@@ -434,11 +432,11 @@ var FormModel = class {
       accessor != null ? accessor.value : fieldTypeDef != null ? mobxCopy(
         fieldTypeDef,
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        create(valuePath, this.context)
-      ) : create(valuePath, this.context),
+        create(valuePath, context)
+      ) : create(valuePath, context),
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath,
-      this.context
+      context
     );
     const error = this.errors[valuePath];
     return {
@@ -496,7 +494,9 @@ var FormModel = class {
     const element = elementValue != null ? elementValue[0] : elementAdapter.create(
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       elementTypePath,
-      this.context
+      // TODO what can we use for the value path here?
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      this.toContext(this.value, valuePath)
     );
     const originalList = accessor.value;
     const newList = [
@@ -614,7 +614,7 @@ var FormModel = class {
   internalSetFieldValue(valuePath, value, displayValidation) {
     const { revert } = this.getAdapterForValuePath(valuePath);
     assertExists(revert, "setting value not supported {}", valuePath);
-    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];
@@ -654,10 +654,11 @@ var FormModel = class {
       convert,
       create
     } = adapter2;
-    const value = create(valuePath, this.context);
+    const context = this.toContext(this.value, valuePath);
+    const value = create(valuePath, context);
     const {
       value: displayValue
-    } = convert(value, valuePath, this.context);
+    } = convert(value, valuePath, context);
     const key = valuePath;
     runInAction(() => {
       this.fieldOverrides[key] = [displayValue];
@@ -683,13 +684,14 @@ var FormModel = class {
     } = 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 : create(valuePath, this.context),
+      accessor != null ? accessor.value : create(valuePath, context),
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath,
-      this.context
+      context
     );
     const value = fieldOverride != null ? fieldOverride[0] : storedValue;
     const dirty = storedValue !== value;
@@ -697,12 +699,12 @@ var FormModel = class {
     if (ignoreDefaultValue) {
       const {
         value: defaultDisplayValue
-      } = convert(create(valuePath, this.context), valuePath, this.context);
+      } = convert(create(valuePath, context), valuePath, context);
       if (defaultDisplayValue === value) {
         return true;
       }
     }
-    const conversion = revert(value, valuePath, this.context);
+    const conversion = revert(value, valuePath, context);
     return runInAction(() => {
       switch (conversion.type) {
         case 1 /* Failure */:
@@ -745,12 +747,13 @@ var FormModel = class {
             return success;
           }
           const fieldOverride = this.fieldOverrides[adapterPath];
+          const context = this.toContext(this.value, valuePath);
           const {
             value: storedValue
-          } = convert(accessor.value, valuePath, this.context);
+          } = convert(accessor.value, valuePath, context);
           const value = fieldOverride != null ? fieldOverride[0] : storedValue;
           const dirty = fieldOverride != null && fieldOverride[0] !== storedValue;
-          const conversion = revert(value, valuePath, this.context);
+          const conversion = revert(value, valuePath, context);
           switch (conversion.type) {
             case 1 /* Failure */:
               this.errors[adapterPath] = conversion.error;
@@ -780,7 +783,6 @@ _errors = new WeakMap();
 __decorateElement(_init, 4, "value", _value_dec, FormModel, _value);
 __decorateElement(_init, 4, "fieldOverrides", _fieldOverrides_dec, FormModel, _fieldOverrides);
 __decorateElement(_init, 4, "errors", _errors_dec, FormModel, _errors);
-__decorateElement(_init, 2, "context", _context_dec, FormModel);
 __decorateElement(_init, 2, "fields", _fields_dec, FormModel);
 __decorateElement(_init, 2, "knownFields", _knownFields_dec, FormModel);
 __decorateElement(_init, 2, "accessors", _accessors_dec, FormModel);
@@ -1149,34 +1151,6 @@ function DefaultErrorRenderer({
   return JSON.stringify(error);
 }
 
-// mantine/field_view.tsx
-import { Observer } from "mobx-react";
-
-// util/empty.tsx
-function Empty() {
-  return null;
-}
-
-// mantine/field_view.tsx
-import { jsx } from "react/jsx-runtime";
-function FieldView({
-  fields,
-  valuePath,
-  children
-}) {
-  return /* @__PURE__ */ jsx(Observer, { children: () => {
-    const {
-      value,
-      error
-    } = fields[valuePath];
-    return children({
-      value,
-      error,
-      ErrorSink: Empty
-    });
-  } });
-}
-
 // mantine/hooks.tsx
 import {
   Checkbox as CheckboxImpl,
@@ -1203,12 +1177,12 @@ import {
   forwardRef,
   useMemo
 } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function createSimplePartialComponent(Component, curriedProps) {
   return forwardRef(
     function(exposedProps, ref) {
       const C = Component;
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx(
         C,
         __spreadValues(__spreadValues({
           ref
@@ -1248,7 +1222,7 @@ function createPartialComponent(Component, curriedPropsSource, additionalPropKey
         ]
       );
       const curriedProps = curriedPropsSource(additionalProps);
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx(
         C,
         __spreadValues(__spreadValues({
           ref
@@ -1315,7 +1289,7 @@ function createUnsafePartialObserverComponent(Component, curriedPropsSource, add
           ]
         );
         const curriedProps = curriedPropsSource(additionalProps);
-        return /* @__PURE__ */ jsx2(
+        return /* @__PURE__ */ jsx(
           C,
           __spreadValues(__spreadValues({
             ref
@@ -1346,7 +1320,7 @@ function usePartialObserverComponent(curriedPropsSource, deps, Component, additi
 }
 
 // mantine/create_checkbox.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function createCheckbox(valuePath, Checkbox) {
   const onChange = (e) => {
     var _a;
@@ -1383,7 +1357,7 @@ function createCheckbox(valuePath, Checkbox) {
       checked: value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx3(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx2(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1397,6 +1371,80 @@ function createCheckbox(valuePath, Checkbox) {
   );
 }
 
+// mantine/create_field_view.tsx
+import { Observer } from "mobx-react";
+import {
+  useCallback as useCallback2
+} from "react";
+
+// util/empty.tsx
+function Empty() {
+  return null;
+}
+
+// mantine/create_field_view.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function FieldView({
+  valuePath,
+  form,
+  children
+}) {
+  const onFocus = useCallback2(() => {
+    var _a;
+    (_a = form.onFieldFocus) == null ? void 0 : _a.call(form, valuePath);
+  }, [
+    form,
+    valuePath
+  ]);
+  const onBlur = useCallback2(() => {
+    var _a;
+    (_a = form.onFieldBlur) == null ? void 0 : _a.call(form, valuePath);
+  }, [
+    form,
+    valuePath
+  ]);
+  const onValueChange = useCallback2((value) => {
+    var _a;
+    (_a = form.onFieldValueChange) == null ? void 0 : _a.call(form, valuePath, value);
+  }, [
+    form,
+    valuePath
+  ]);
+  const onSubmit = useCallback2(() => {
+    var _a;
+    (_a = form.onFieldSubmit) == null ? void 0 : _a.call(form, valuePath);
+  }, [
+    form,
+    valuePath
+  ]);
+  return /* @__PURE__ */ jsx3(Observer, { children: () => {
+    const {
+      value,
+      error
+    } = form.fields[valuePath];
+    return children({
+      value,
+      error,
+      ErrorSink: Empty,
+      onFocus,
+      onBlur,
+      onValueChange,
+      onSubmit
+    });
+  } });
+}
+function createFieldView(valuePath) {
+  return (props) => {
+    return /* @__PURE__ */ jsx3(
+      FieldView,
+      __spreadValues({
+        form: this,
+        valuePath
+      }, props)
+    );
+  };
+}
+
 // mantine/create_fields_view.tsx
 import {
   jsonPathPrefix,
@@ -1468,13 +1516,13 @@ function createFieldsView(valuePath, FieldsView, observableProps) {
 // mantine/create_form.tsx
 import { observer as observer3 } from "mobx-react";
 import {
-  useCallback as useCallback2
+  useCallback as useCallback3
 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function createForm(valuePath, Form, observableProps) {
   return observer3((props) => {
     const { value } = observableProps.fields[valuePath];
-    const onValueChange = useCallback2((value2) => {
+    const onValueChange = useCallback3((value2) => {
       observableProps.onFieldValueChange(valuePath, value2);
     }, []);
     return /* @__PURE__ */ jsx5(
@@ -1488,7 +1536,10 @@ function createForm(valuePath, Form, observableProps) {
 }
 
 // mantine/create_list.tsx
-import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
+import {
+  Fragment
+} from "react";
+import { Fragment as Fragment2, jsx as jsx6 } from "react/jsx-runtime";
 function createList(valuePath, List) {
   const propSource = () => {
     const values = [...this.fields[valuePath].value];
@@ -1504,9 +1555,9 @@ function DefaultList({
   listPath,
   children
 }) {
-  return /* @__PURE__ */ jsx6(Fragment, { children: values.map(function(value, index) {
+  return /* @__PURE__ */ jsx6(Fragment2, { children: values.map(function(value, index) {
     const valuePath = `${listPath}.${index}`;
-    return children(valuePath, value, index);
+    return /* @__PURE__ */ jsx6(Fragment, { children: children(valuePath, value, index) }, valuePath);
   }) });
 }
 
@@ -1705,6 +1756,7 @@ function useMantineFormFields({
   onFieldFocus,
   onFieldSubmit,
   fields
+  // should use FieldView rather than observing fields directly from here
 }) {
   const form = useMemo2(
     function() {
@@ -1773,6 +1825,9 @@ var MantineFormImpl = class {
     __publicField(this, "listCache", new Cache(
       createList.bind(this)
     ));
+    __publicField(this, "fieldViewCache", new Cache(
+      createFieldView.bind(this)
+    ));
     __publicField(this, "fieldsViewCache", new Cache(
       createFieldsView.bind(this)
     ));
@@ -1840,6 +1895,11 @@ var MantineFormImpl = class {
       DefaultList
     );
   }
+  fieldView(valuePath) {
+    return this.fieldViewCache.retrieveOrCreate(
+      valuePath
+    );
+  }
   fieldsView(valuePath, FieldsView) {
     return this.fieldsViewCache.retrieveOrCreate(
       valuePath,
@@ -1907,7 +1967,6 @@ export {
   AbstractSelectValueTypeConverter,
   DefaultErrorRenderer,
   Empty,
-  FieldView,
   FormModel,
   IntegerToStringConverter,
   NullableToBooleanConverter,

package/index.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/mantine/create_field_view.tsx

@@ -0,0 +1,94 @@
+import { Observer } from 'mobx-react'
+import {
+  type ComponentType,
+  useCallback,
+} 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 { Empty } from 'util/empty'
+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,
+}
+
+/**
+ * Displays current value and error of a field
+ */
+function FieldView<F extends Fields, K extends keyof F>({
+  valuePath,
+  form,
+  children,
+}: FieldViewProps<F, K> & {
+  valuePath: K,
+  form: MantineForm<F>,
+}) {
+  const onFocus = useCallback(() => {
+    form.onFieldFocus?.(valuePath)
+  }, [
+    form,
+    valuePath,
+  ])
+  const onBlur = useCallback(() => {
+    form.onFieldBlur?.(valuePath)
+  }, [
+    form,
+    valuePath,
+  ])
+  const onValueChange = useCallback((value: ValueTypeOfField<F[K]>) => {
+    form.onFieldValueChange?.(valuePath, value)
+  }, [
+    form,
+    valuePath,
+  ])
+  const onSubmit = useCallback(() => {
+    form.onFieldSubmit?.(valuePath)
+  }, [
+    form,
+    valuePath,
+  ])
+  return (
+    <Observer>
+      {() => {
+        const {
+          value,
+          error,
+        } = form.fields[valuePath]
+        return children({
+          value,
+          error,
+          ErrorSink: Empty,
+          onFocus,
+          onBlur,
+          onValueChange,
+          onSubmit,
+        })
+      }}
+    </Observer>
+  )
+}
+
+export function createFieldView<
+  F extends Fields,
+  K extends keyof AllFieldsOfFields<F>,
+>(this: MantineForm<F>, valuePath: K): ComponentType<FieldViewProps<F, K>> {
+  return (props: FieldViewProps<F, K>) => {
+    return (
+      <FieldView
+        form={this}
+        valuePath={valuePath}
+        {...props}
+      />
+    )
+  }
+}

package/mantine/create_list.tsx

@@ -1,5 +1,8 @@
 import { type ElementOfArray } from '@strictly/base'
-import { type ComponentType } from 'react'
+import {
+  type ComponentType,
+  Fragment,
+} from 'react'
 import { type Fields } from 'types/field'
 import { type ListFieldsOfFields } from 'types/list_fields_of_fields'
 import { type ValueTypeOfField } from 'types/value_type_of_field'
@@ -54,7 +57,11 @@ export function DefaultList<
     <>
       {values.map(function (value, index) {
         const valuePath: `${ListPath}.${number}` = `${listPath}.${index}`
-        return children(valuePath, value, index)
+        return (
+          <Fragment key={valuePath}>
+            {children(valuePath, value, index)}
+          </Fragment>
+        )
       })}
     </>
   )