@strictly/react-form 0.0.15 → 0.0.16

package/dist/index.cjs

@@ -89,7 +89,6 @@ __export(index_exports, {
   AbstractSelectValueTypeConverter: () => AbstractSelectValueTypeConverter,
   DefaultErrorRenderer: () => DefaultErrorRenderer,
   Empty: () => Empty,
-  FieldView: () => FieldView,
   FormModel: () => FormModel,
   IntegerToStringConverter: () => IntegerToStringConverter,
   NullableToBooleanConverter: () => NullableToBooleanConverter,
@@ -357,8 +356,8 @@ function listAdapter() {
 var import_base2 = require("@strictly/base");
 var import_define = require("@strictly/define");
 var import_mobx = require("mobx");
-var _accessors_dec, _knownFields_dec, _fields_dec, _context_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
-_value_dec = [import_mobx.observable.ref], _fieldOverrides_dec = [import_mobx.observable.shallow], _errors_dec = [import_mobx.observable.shallow], _context_dec = [import_mobx.computed.struct], _fields_dec = [import_mobx.computed], _knownFields_dec = [import_mobx.computed], _accessors_dec = [import_mobx.computed];
+var _accessors_dec, _knownFields_dec, _fields_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
+_value_dec = [import_mobx.observable.ref], _fieldOverrides_dec = [import_mobx.observable.shallow], _errors_dec = [import_mobx.observable.shallow], _fields_dec = [import_mobx.computed], _knownFields_dec = [import_mobx.computed], _accessors_dec = [import_mobx.computed];
 var FormModel = class {
   constructor(type, value, adapters) {
     this.type = type;
@@ -370,13 +369,13 @@ var FormModel = class {
     __publicField(this, "flattenedTypeDefs");
     this.value = (0, import_define.mobxCopy)(type, value);
     this.flattenedTypeDefs = (0, import_define.flattenTypesOfType)(type);
-    const contextValue = this.toContext(value);
     const conversions = (0, import_define.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;
@@ -388,16 +387,13 @@ var FormModel = class {
         if (revert == null) {
           return;
         }
-        return convert(value2, valuePath, contextValue);
+        return convert(fieldValue, valuePath, contextValue);
       }
     );
     this.fieldOverrides = (0, import_base2.map)(conversions, function(_k, v) {
       return v && [v.value];
     });
   }
-  get context() {
-    return this.toContext(this.value);
-  }
   get fields() {
     return new Proxy(
       this.knownFields,
@@ -457,6 +453,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,
@@ -465,11 +462,11 @@ var FormModel = class {
       accessor != null ? accessor.value : fieldTypeDef != null ? (0, import_define.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 {
@@ -527,7 +524,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 = [
@@ -645,7 +644,7 @@ var FormModel = class {
   internalSetFieldValue(valuePath, value, displayValidation) {
     const { revert } = this.getAdapterForValuePath(valuePath);
     (0, import_base2.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 (0, import_mobx.runInAction)(() => {
       this.fieldOverrides[valuePath] = [value];
@@ -685,10 +684,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;
     (0, import_mobx.runInAction)(() => {
       this.fieldOverrides[key] = [displayValue];
@@ -714,13 +714,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;
@@ -728,12 +729,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 (0, import_mobx.runInAction)(() => {
       switch (conversion.type) {
         case 1 /* Failure */:
@@ -776,12 +777,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;
@@ -811,7 +813,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);
@@ -1167,49 +1168,21 @@ function DefaultErrorRenderer({
   return JSON.stringify(error);
 }
 
-// mantine/field_view.tsx
-var import_mobx_react = require("mobx-react");
-
-// util/empty.tsx
-function Empty() {
-  return null;
-}
-
-// mantine/field_view.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-function FieldView({
-  fields,
-  valuePath,
-  children
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_mobx_react.Observer, { children: () => {
-    const {
-      value,
-      error
-    } = fields[valuePath];
-    return children({
-      value,
-      error,
-      ErrorSink: Empty
-    });
-  } });
-}
-
 // mantine/hooks.tsx
 var import_core = require("@mantine/core");
 var import_base6 = require("@strictly/base");
 var import_mobx2 = require("mobx");
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // util/partial.tsx
-var import_mobx_react2 = require("mobx-react");
+var import_mobx_react = require("mobx-react");
 var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 function createSimplePartialComponent(Component, curriedProps) {
   return (0, import_react2.forwardRef)(
     function(exposedProps, ref) {
       const C = Component;
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         C,
         __spreadValues(__spreadValues({
           ref
@@ -1249,7 +1222,7 @@ function createPartialComponent(Component, curriedPropsSource, additionalPropKey
         ]
       );
       const curriedProps = curriedPropsSource(additionalProps);
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         C,
         __spreadValues(__spreadValues({
           ref
@@ -1285,7 +1258,7 @@ function createPartialObserverComponent(Component, curriedPropsSource, additiona
   );
 }
 function createUnsafePartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
-  return (0, import_mobx_react2.observer)(
+  return (0, import_mobx_react.observer)(
     (0, import_react2.forwardRef)(
       function(props, ref) {
         const C = Component;
@@ -1316,7 +1289,7 @@ function createUnsafePartialObserverComponent(Component, curriedPropsSource, add
           ]
         );
         const curriedProps = curriedPropsSource(additionalProps);
-        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           C,
           __spreadValues(__spreadValues({
             ref
@@ -1347,7 +1320,7 @@ function usePartialObserverComponent(curriedPropsSource, deps, Component, additi
 }
 
 // mantine/create_checkbox.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function createCheckbox(valuePath, Checkbox) {
   const onChange = (e) => {
     var _a;
@@ -1384,7 +1357,7 @@ function createCheckbox(valuePath, Checkbox) {
       checked: value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1398,6 +1371,78 @@ function createCheckbox(valuePath, Checkbox) {
   );
 }
 
+// mantine/create_field_view.tsx
+var import_mobx_react2 = require("mobx-react");
+var import_react3 = require("react");
+
+// util/empty.tsx
+function Empty() {
+  return null;
+}
+
+// mantine/create_field_view.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function FieldView({
+  valuePath,
+  form,
+  children
+}) {
+  const onFocus = (0, import_react3.useCallback)(() => {
+    var _a;
+    (_a = form.onFieldFocus) == null ? void 0 : _a.call(form, valuePath);
+  }, [
+    form,
+    valuePath
+  ]);
+  const onBlur = (0, import_react3.useCallback)(() => {
+    var _a;
+    (_a = form.onFieldBlur) == null ? void 0 : _a.call(form, valuePath);
+  }, [
+    form,
+    valuePath
+  ]);
+  const onValueChange = (0, import_react3.useCallback)((value) => {
+    var _a;
+    (_a = form.onFieldValueChange) == null ? void 0 : _a.call(form, valuePath, value);
+  }, [
+    form,
+    valuePath
+  ]);
+  const onSubmit = (0, import_react3.useCallback)(() => {
+    var _a;
+    (_a = form.onFieldSubmit) == null ? void 0 : _a.call(form, valuePath);
+  }, [
+    form,
+    valuePath
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_mobx_react2.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__ */ (0, import_jsx_runtime3.jsx)(
+      FieldView,
+      __spreadValues({
+        form: this,
+        valuePath
+      }, props)
+    );
+  };
+}
+
 // mantine/create_fields_view.tsx
 var import_define6 = require("@strictly/define");
 var import_mobx_react3 = require("mobx-react");
@@ -1465,12 +1510,12 @@ function createFieldsView(valuePath, FieldsView, observableProps) {
 
 // mantine/create_form.tsx
 var import_mobx_react4 = require("mobx-react");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function createForm(valuePath, Form, observableProps) {
   return (0, import_mobx_react4.observer)((props) => {
     const { value } = observableProps.fields[valuePath];
-    const onValueChange = (0, import_react3.useCallback)((value2) => {
+    const onValueChange = (0, import_react4.useCallback)((value2) => {
       observableProps.onFieldValueChange(valuePath, value2);
     }, []);
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
@@ -1484,6 +1529,7 @@ function createForm(valuePath, Form, observableProps) {
 }
 
 // mantine/create_list.tsx
+var import_react5 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function createList(valuePath, List) {
   const propSource = () => {
@@ -1502,7 +1548,7 @@ function DefaultList({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: values.map(function(value, index) {
     const valuePath = `${listPath}.${index}`;
-    return children(valuePath, value, index);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react5.Fragment, { children: children(valuePath, value, index) }, valuePath);
   }) });
 }
 
@@ -1701,8 +1747,9 @@ function useMantineFormFields({
   onFieldFocus,
   onFieldSubmit,
   fields
+  // should use FieldView rather than observing fields directly from here
 }) {
-  const form = (0, import_react4.useMemo)(
+  const form = (0, import_react6.useMemo)(
     function() {
       return new MantineFormImpl(fields);
     },
@@ -1710,7 +1757,7 @@ function useMantineFormFields({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  (0, import_react4.useEffect)(function() {
+  (0, import_react6.useEffect)(function() {
     (0, import_mobx2.runInAction)(function() {
       form.fields = fields;
     });
@@ -1718,25 +1765,25 @@ function useMantineFormFields({
     form,
     fields
   ]);
-  (0, import_react4.useEffect)(function() {
+  (0, import_react6.useEffect)(function() {
     form.onFieldValueChange = onFieldValueChange;
   }, [
     form,
     onFieldValueChange
   ]);
-  (0, import_react4.useEffect)(function() {
+  (0, import_react6.useEffect)(function() {
     form.onFieldBlur = onFieldBlur;
   }, [
     form,
     onFieldBlur
   ]);
-  (0, import_react4.useEffect)(function() {
+  (0, import_react6.useEffect)(function() {
     form.onFieldFocus = onFieldFocus;
   }, [
     form,
     onFieldFocus
   ]);
-  (0, import_react4.useEffect)(function() {
+  (0, import_react6.useEffect)(function() {
     form.onFieldSubmit = onFieldSubmit;
   }, [
     form,
@@ -1769,6 +1816,9 @@ var MantineFormImpl = class {
     __publicField(this, "listCache", new import_base6.Cache(
       createList.bind(this)
     ));
+    __publicField(this, "fieldViewCache", new import_base6.Cache(
+      createFieldView.bind(this)
+    ));
     __publicField(this, "fieldsViewCache", new import_base6.Cache(
       createFieldsView.bind(this)
     ));
@@ -1836,6 +1886,11 @@ var MantineFormImpl = class {
       DefaultList
     );
   }
+  fieldView(valuePath) {
+    return this.fieldViewCache.retrieveOrCreate(
+      valuePath
+    );
+  }
   fieldsView(valuePath, FieldsView) {
     return this.fieldsViewCache.retrieveOrCreate(
       valuePath,
@@ -1901,7 +1956,6 @@ function mergeValidators(validators1, validators2) {
   AbstractSelectValueTypeConverter,
   DefaultErrorRenderer,
   Empty,
-  FieldView,
   FormModel,
   IntegerToStringConverter,
   NullableToBooleanConverter,

package/dist/index.d.cts

@@ -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 };