@strictly/react-form 0.0.9 → 0.0.10

package/dist/index.cjs

@@ -485,8 +485,7 @@ var FormPresenter = class {
       convert,
       create
     } = adapter2;
-    const accessor = model.accessors[valuePath];
-    const value = accessor == null ? create(valuePath, model.value) : accessor.value;
+    const value = create(valuePath, model.value);
     const {
       value: displayValue
     } = convert(value, valuePath, model.value);
@@ -507,7 +506,7 @@ var FormPresenter = class {
     const keys = new Set(Object.keys(values));
     return keys.has(valuePath);
   }
-  validateField(model, valuePath) {
+  validateField(model, valuePath, ignoreDefaultValue = false) {
     const {
       convert,
       revert,
@@ -526,6 +525,14 @@ var FormPresenter = class {
     const value = fieldOverride != null ? fieldOverride[0] : storedValue;
     const dirty = storedValue !== value;
     (0, import_base2.assertExists)(revert, "changing field directly not supported {}", valuePath);
+    if (ignoreDefaultValue) {
+      const {
+        value: defaultDisplayValue
+      } = convert(create(valuePath, model.value), valuePath, model.value);
+      if (defaultDisplayValue === value) {
+        return true;
+      }
+    }
     const conversion = revert(value, valuePath, model.value);
     return (0, import_mobx.runInAction)(function() {
       switch (conversion.type) {
@@ -596,13 +603,6 @@ var FormPresenter = class {
       );
     });
   }
-  createModel(value) {
-    return new FormModel(
-      this.type,
-      value,
-      this.adapters
-    );
-  }
 };
 var FormModel = class {
   constructor(type, value, adapters) {
@@ -740,19 +740,173 @@ var FormModel = class {
   }
 };
 
-// core/mobx/hooks.ts
+// core/mobx/hooks.tsx
+var import_react2 = require("react");
+
+// util/partial.tsx
+var import_mobx_react = require("mobx-react");
 var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function createSimplePartialComponent(Component, curriedProps) {
+  return (0, import_react.forwardRef)(
+    function(exposedProps, ref) {
+      const C = Component;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        C,
+        {
+          ref,
+          ...curriedProps,
+          ...exposedProps
+        }
+      );
+    }
+  );
+}
+function createPartialComponent(Component, curriedPropsSource, additionalPropKeys = []) {
+  return (0, import_react.forwardRef)(
+    function(props, ref) {
+      const C = Component;
+      const [
+        additionalProps,
+        exposedProps
+      ] = additionalPropKeys.reduce(
+        function([
+          additionalProps2,
+          exposedProps2
+        ], key) {
+          const value = props[
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            key
+          ];
+          delete exposedProps2[key];
+          additionalProps2[key] = value;
+          return [
+            additionalProps2,
+            exposedProps2
+          ];
+        },
+        [
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          {},
+          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+          { ...props }
+        ]
+      );
+      const curriedProps = curriedPropsSource(additionalProps);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        C,
+        {
+          ref,
+          ...curriedProps,
+          ...exposedProps
+        }
+      );
+    }
+  );
+}
+function usePartialComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
+  return (0, import_react.useMemo)(
+    function() {
+      return createPartialComponent(
+        Component,
+        curriedPropsSource,
+        additionalPropKeys
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...deps,
+      Component,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...additionalPropKeys
+    ]
+  );
+}
+function createPartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
+  return createUnsafePartialObserverComponent(
+    Component,
+    curriedPropsSource,
+    additionalPropKeys
+  );
+}
+function createUnsafePartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
+  return (0, import_mobx_react.observer)(
+    (0, import_react.forwardRef)(
+      function(props, ref) {
+        const C = Component;
+        const [
+          additionalProps,
+          exposedProps
+        ] = additionalPropKeys.reduce(
+          function([
+            additionalProps2,
+            exposedProps2
+          ], key) {
+            const value = props[
+              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+              key
+            ];
+            delete exposedProps2[key];
+            additionalProps2[key] = value;
+            return [
+              additionalProps2,
+              exposedProps2
+            ];
+          },
+          [
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            {},
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            { ...props }
+          ]
+        );
+        const curriedProps = curriedPropsSource(additionalProps);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          C,
+          {
+            ref,
+            ...curriedProps,
+            ...exposedProps
+          }
+        );
+      }
+    )
+  );
+}
+function usePartialObserverComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
+  return (0, import_react.useMemo)(
+    function() {
+      return createPartialObserverComponent(
+        Component,
+        curriedPropsSource,
+        additionalPropKeys
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...deps,
+      Component,
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      ...additionalPropKeys
+    ]
+  );
+}
+
+// core/mobx/hooks.tsx
 function useDefaultMobxFormHooks(presenter, value, {
   onValidFieldSubmit,
-  onValidFormSubmit
+  onValidFormSubmit,
+  FormFieldsView
 } = {}) {
-  const model = (0, import_react.useMemo)(function() {
+  const model = (0, import_react2.useMemo)(function() {
     return presenter.createModel(value);
   }, [
     presenter,
     value
   ]);
-  const onFieldValueChange = (0, import_react.useCallback)(
+  const onFieldValueChange = (0, import_react2.useCallback)(
     function(path, value2) {
       presenter.clearFieldError(model, path);
       presenter.setFieldValue(model, path, value2);
@@ -762,7 +916,7 @@ function useDefaultMobxFormHooks(presenter, value, {
       model
     ]
   );
-  const onFieldSubmit = (0, import_react.useCallback)(
+  const onFieldSubmit = (0, import_react2.useCallback)(
     function(valuePath) {
       if (presenter.validateField(model, valuePath)) {
         onValidFieldSubmit?.(model, valuePath);
@@ -775,11 +929,11 @@ function useDefaultMobxFormHooks(presenter, value, {
       onValidFieldSubmit
     ]
   );
-  const onFieldBlur = (0, import_react.useCallback)(
+  const onFieldBlur = (0, import_react2.useCallback)(
     function(path) {
       setTimeout(function() {
         if (presenter.isValuePathActive(model, path)) {
-          presenter.validateField(model, path);
+          presenter.validateField(model, path, true);
         }
       }, 100);
     },
@@ -788,7 +942,7 @@ function useDefaultMobxFormHooks(presenter, value, {
       model
     ]
   );
-  const onFormSubmit = (0, import_react.useCallback)(
+  const onFormSubmit = (0, import_react2.useCallback)(
     function() {
       if (presenter.validateAll(model)) {
         onValidFormSubmit?.(model, model.value);
@@ -800,12 +954,33 @@ function useDefaultMobxFormHooks(presenter, value, {
       onValidFormSubmit
     ]
   );
+  const FormFields = (0, import_react2.useMemo)(() => {
+    if (FormFieldsView == null) {
+      return void 0;
+    }
+    return createUnsafePartialObserverComponent(FormFieldsView, () => {
+      return {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        fields: model.fields,
+        onFieldBlur,
+        onFieldSubmit,
+        onFieldValueChange
+      };
+    });
+  }, [
+    model,
+    FormFieldsView,
+    onFieldBlur,
+    onFieldSubmit,
+    onFieldValueChange
+  ]);
   return {
     model,
     onFieldValueChange,
     onFieldSubmit,
     onFieldBlur,
-    onFormSubmit
+    onFormSubmit,
+    FormFields
   };
 }
 
@@ -1117,157 +1292,6 @@ var import_base6 = require("@strictly/base");
 var import_mobx2 = require("mobx");
 var import_react4 = require("react");
 
-// util/partial.tsx
-var import_mobx_react = require("mobx-react");
-var import_react2 = require("react");
-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_runtime.jsx)(
-        C,
-        {
-          ref,
-          ...curriedProps,
-          ...exposedProps
-        }
-      );
-    }
-  );
-}
-function createPartialComponent(Component, curriedPropsSource, additionalPropKeys = []) {
-  return (0, import_react2.forwardRef)(
-    function(props, ref) {
-      const C = Component;
-      const [
-        additionalProps,
-        exposedProps
-      ] = additionalPropKeys.reduce(
-        function([
-          additionalProps2,
-          exposedProps2
-        ], key) {
-          const value = props[
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            key
-          ];
-          delete exposedProps2[key];
-          additionalProps2[key] = value;
-          return [
-            additionalProps2,
-            exposedProps2
-          ];
-        },
-        [
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          {},
-          // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-          { ...props }
-        ]
-      );
-      const curriedProps = curriedPropsSource(additionalProps);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        C,
-        {
-          ref,
-          ...curriedProps,
-          ...exposedProps
-        }
-      );
-    }
-  );
-}
-function usePartialComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
-  return (0, import_react2.useMemo)(
-    function() {
-      return createPartialComponent(
-        Component,
-        curriedPropsSource,
-        additionalPropKeys
-      );
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...deps,
-      Component,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...additionalPropKeys
-    ]
-  );
-}
-function createPartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
-  return createUnsafePartialObserverComponent(
-    Component,
-    curriedPropsSource,
-    additionalPropKeys
-  );
-}
-function createUnsafePartialObserverComponent(Component, curriedPropsSource, additionalPropKeys = []) {
-  return (0, import_mobx_react.observer)(
-    (0, import_react2.forwardRef)(
-      function(props, ref) {
-        const C = Component;
-        const [
-          additionalProps,
-          exposedProps
-        ] = additionalPropKeys.reduce(
-          function([
-            additionalProps2,
-            exposedProps2
-          ], key) {
-            const value = props[
-              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-              key
-            ];
-            delete exposedProps2[key];
-            additionalProps2[key] = value;
-            return [
-              additionalProps2,
-              exposedProps2
-            ];
-          },
-          [
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            {},
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            { ...props }
-          ]
-        );
-        const curriedProps = curriedPropsSource(additionalProps);
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          C,
-          {
-            ref,
-            ...curriedProps,
-            ...exposedProps
-          }
-        );
-      }
-    )
-  );
-}
-function usePartialObserverComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
-  return (0, import_react2.useMemo)(
-    function() {
-      return createPartialObserverComponent(
-        Component,
-        curriedPropsSource,
-        additionalPropKeys
-      );
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...deps,
-      Component,
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-      ...additionalPropKeys
-    ]
-  );
-}
-
 // mantine/create_checkbox.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 function createCheckbox(valuePath, Checkbox) {
@@ -1338,34 +1362,46 @@ function createFieldsView(valuePath, FieldsView, observableProps) {
   function onFieldSubmit(subKey) {
     observableProps.onFieldSubmit?.(toKey(subKey));
   }
-  return (0, import_mobx_react2.observer)(function(props) {
-    const subFields = Object.entries(observableProps.fields).reduce(
-      (acc, [
-        fieldKey,
-        fieldValue
-      ]) => {
-        if (fieldKey.startsWith(valuePath)) {
-          acc[toSubKey(fieldKey)] = fieldValue;
+  const Component = (0, import_mobx_react2.observer)(
+    function(props) {
+      const subFields = Object.entries(observableProps.fields).reduce(
+        (acc, [
+          fieldKey,
+          fieldValue
+        ]) => {
+          if (fieldKey.startsWith(valuePath)) {
+            acc[toSubKey(fieldKey)] = fieldValue;
+          }
+          return acc;
+        },
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        {}
+      );
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        FieldsView,
+        {
+          // maybe we can do this in a more type safe way
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
+          ...props,
+          fields: subFields,
+          onFieldBlur,
+          onFieldFocus,
+          onFieldSubmit,
+          onFieldValueChange
         }
-        return acc;
-      },
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      {}
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-      FieldsView,
-      {
-        // maybe we can do this in a more type safe way
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
-        ...props,
-        fields: subFields,
-        onFieldBlur,
-        onFieldFocus,
-        onFieldSubmit,
-        onFieldValueChange
-      }
-    );
-  });
+      );
+    }
+  );
+  const callbackMapper = (callback) => {
+    return (subFormValuePath, ...args) => {
+      const valuePath2 = toKey(subFormValuePath);
+      return callback(valuePath2, ...args);
+    };
+  };
+  return {
+    Component,
+    callbackMapper
+  };
 }
 
 // mantine/create_form.tsx

package/dist/index.d.cts

@@ -1,4 +1,4 @@
-import { Maybe, ElementOfArray, StringConcatOf, StringKeyOf as StringKeyOf$1, ExhaustiveArrayOfUnion, FriendlyExhaustiveArrayOfUnion } from '@strictly/base';
+import { Maybe, ElementOfArray, FriendlyExhaustiveArrayOfUnion, StringConcatOf, StringKeyOf as StringKeyOf$1, ExhaustiveArrayOfUnion } from '@strictly/base';
 import { Type, ValueOfType, ReadonlyTypeOfType, FlattenedTypesOfType, ListTypeDef, FlattenedValuesOfType, MobxValueOfType, Accessor, Validator, UnionTypeDef, ValueTypesOfDiscriminatedUnion, LiteralTypeDef } from '@strictly/define';
 import { ValueOf, SimplifyDeep, ReadonlyDeep, StringKeyOf, Simplify } from 'type-fest';
 import { ComponentType, ComponentProps, ForwardRefExoticComponent, PropsWithoutRef, DependencyList } from 'react';
@@ -117,9 +117,9 @@ type FlattenedErrors<ValuePathsToAdapters extends Readonly<Record<string, FieldA
 type ValuePathsToAdaptersOf<TypePathsToAdapters extends Partial<Readonly<Record<string, FieldAdapter>>>, ValuePathsToTypePaths extends Readonly<Record<string, string>>> = keyof TypePathsToAdapters extends ValueOf<ValuePathsToTypePaths> ? {
     readonly [K in keyof ValuePathsToTypePaths as unknown extends TypePathsToAdapters[ValuePathsToTypePaths[K]] ? never : K]: NonNullable<TypePathsToAdapters[ValuePathsToTypePaths[K]]>;
 } : never;
-declare class FormPresenter<T extends Type, ValueToTypePaths extends Readonly<Record<string, string>>, TypePathsToAdapters extends FlattenedTypePathsToAdaptersOf<FlattenedValuesOfType<T, '*'>, ValueOfType<ReadonlyTypeOfType<T>>>, ValuePathsToAdapters extends ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths> = ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths>> {
+declare abstract class FormPresenter<T extends Type, ValueToTypePaths extends Readonly<Record<string, string>>, TypePathsToAdapters extends FlattenedTypePathsToAdaptersOf<FlattenedValuesOfType<T, '*'>, ValueOfType<ReadonlyTypeOfType<T>>>, ValuePathsToAdapters extends ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths> = ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths>> {
     readonly type: T;
-    private readonly adapters;
+    protected readonly adapters: TypePathsToAdapters;
     constructor(type: T, adapters: TypePathsToAdapters);
     private maybeGetAdapterForValuePath;
     private getAdapterForValuePath;
@@ -130,12 +130,12 @@ declare class FormPresenter<T extends Type, ValueToTypePaths extends Readonly<Re
     removeListItem<K extends keyof FlattenedListTypesOfType<T>>(model: FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>, elementValuePath: `${K}.${number}`): void;
     private internalSetFieldValue;
     clearFieldError<K extends keyof ValuePathsToAdapters>(model: FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>, valuePath: K): void;
-    clearFieldValue<K extends StringKeyOf<ValuePathsToAdapters>>(model: FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>, valuePath: K): void;
+    clearFieldValue<K extends StringKeyOf<ValueToTypePaths>>(model: FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>, valuePath: K): void;
     clearAll(model: FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>, value: ValueOfType<T>): void;
     isValuePathActive<K extends keyof ValuePathsToAdapters>(model: FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>, valuePath: K): boolean;
-    validateField<K extends keyof ValuePathsToAdapters>(model: FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>, valuePath: K): boolean;
+    validateField<K extends keyof ValuePathsToAdapters>(model: FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>, valuePath: K, ignoreDefaultValue?: boolean): boolean;
     validateAll(model: FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>): boolean;
-    createModel(value: ValueOfType<ReadonlyTypeOfType<T>>): FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>;
+    abstract createModel(value: ValueOfType<ReadonlyTypeOfType<T>>): FormModel<T, ValueToTypePaths, TypePathsToAdapters, ValuePathsToAdapters>;
 }
 declare class FormModel<T extends Type, ValueToTypePaths extends Readonly<Record<string, string>>, TypePathsToAdapters extends FlattenedTypePathsToAdaptersOf<FlattenedValuesOfType<T, '*'>, ValueOfType<ReadonlyTypeOfType<T>>>, ValuePathsToAdapters extends ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths> = ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths>> {
     private readonly type;
@@ -165,6 +165,21 @@ type FormProps<O> = {
     onValueChange: (value: O) => void;
 };
 
+type PartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps = {}> = Exclude<keyof CurriedProps, keyof ComponentProps<Component>> extends never ? UnsafePartialComponent<Component, CurriedProps, AdditionalProps> : keyof CurriedProps extends (string | number) ? `unmatched prop: ${Exclude<keyof CurriedProps, keyof ComponentProps<Component>>}` : Exclude<keyof CurriedProps, keyof ComponentProps<Component>>;
+type UnsafePartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps = {}> = ForwardRefExoticComponent<PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>>;
+declare function createSimplePartialComponent<Component extends ComponentType<any>, CurriedProps extends Partial<ComponentProps<Component>>>(Component: Component, curriedProps: CurriedProps): PartialComponent<Component, CurriedProps>;
+declare function createPartialComponent<Component extends ComponentType<any>, CurriedProps>(Component: Component, curriedPropsSource: () => CurriedProps): PartialComponent<Component, CurriedProps, {}>;
+declare function createPartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps, AllAdditionalPropKeys extends readonly (keyof AdditionalProps)[]>(Component: Component, curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps, additionalPropKeys: FriendlyExhaustiveArrayOfUnion<keyof AdditionalProps, AllAdditionalPropKeys>): PartialComponent<Component, CurriedProps, AdditionalProps>;
+declare function usePartialComponent<Component extends ComponentType<any>, CurriedProps>(curriedPropsSource: () => CurriedProps, deps: DependencyList, Component: Component): PartialComponent<Component, CurriedProps, {}>;
+declare function usePartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps, AllAdditionalPropKeys extends readonly (keyof AdditionalProps)[]>(curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps, deps: DependencyList, Component: Component, additionalPropKeys: FriendlyExhaustiveArrayOfUnion<keyof AdditionalProps, AllAdditionalPropKeys>): PartialComponent<Component, CurriedProps, AdditionalProps>;
+declare function createPartialObserverComponent<Component extends ComponentType<any>, CurriedProps>(Component: Component, curriedPropsSource: () => CurriedProps): PartialComponent<Component, CurriedProps, {}>;
+declare function createPartialObserverComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps, AllAdditionalPropKeys extends readonly (keyof AdditionalProps)[]>(Component: Component, curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps, additionalPropKeys: FriendlyExhaustiveArrayOfUnion<keyof AdditionalProps, AllAdditionalPropKeys>): PartialComponent<Component, CurriedProps, AdditionalProps>;
+declare function createUnsafePartialObserverComponent<Component extends ComponentType<any>, CurriedProps>(Component: Component, curriedPropsSource: () => CurriedProps): UnsafePartialComponent<Component, CurriedProps, {}>;
+declare function createUnsafePartialObserverComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps, AllAdditionalPropKeys extends readonly (keyof AdditionalProps)[]>(Component: Component, curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps, additionalPropKeys: FriendlyExhaustiveArrayOfUnion<keyof AdditionalProps, AllAdditionalPropKeys>): UnsafePartialComponent<Component, CurriedProps, AdditionalProps>;
+declare function usePartialObserverComponent<Component extends ComponentType<any>, CurriedProps>(curriedPropsSource: () => CurriedProps, deps: DependencyList, Component: Component): PartialComponent<Component, CurriedProps, {}>;
+declare function usePartialObserverComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps, AllAdditionalPropKeys extends readonly (keyof AdditionalProps)[]>(curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps, deps: DependencyList, Component: Component, additionalPropKeys: FriendlyExhaustiveArrayOfUnion<keyof AdditionalProps, AllAdditionalPropKeys>): PartialComponent<Component, CurriedProps, AdditionalProps>;
+type RemainingComponentProps<Component extends ComponentType, CurriedProps> = Omit<ComponentProps<Component>, keyof CurriedProps> & JSX.IntrinsicAttributes;
+
 /**
  * Used to extract the supported value paths from a presenter
  */
@@ -185,13 +200,31 @@ type FormFieldsOfPresenter<Presenter extends FormPresenter<any, any, any, any>>
 
 type ValueOfPresenter<P extends FormPresenter<any, any, any, any>> = P extends FormPresenter<infer T, any, any, any> ? ValueOfType<ReadonlyTypeOfType<T>> : never;
 type ModelOfPresenter<P extends FormPresenter<any, any, any, any>> = ReturnType<P['createModel']>;
-declare function useDefaultMobxFormHooks<P extends FormPresenter<any, any, any, any>>(presenter: P, value: ValueOfPresenter<P>, { onValidFieldSubmit, onValidFormSubmit, }?: {
+declare function useDefaultMobxFormHooks<P extends FormPresenter<any, any, any, any>, C extends ComponentType<FieldsViewProps<F>>, F extends FormFieldsOfPresenter<P> = FormFieldsOfPresenter<P>>(presenter: P, value: ValueOfPresenter<P>, options?: {
+    onValidFieldSubmit?: <Path extends ValuePathsOfPresenter<P>>(model: ModelOfPresenter<P>, valuePath: Path) => void;
+    onValidFormSubmit?: (model: ModelOfPresenter<P>, value: ValueOfPresenter<P>) => void;
+}): {
+    model: ModelOfPresenter<P>;
+    FormFields?: UnsafePartialComponent<C, FieldsViewProps<F>>;
+    onFormSubmit: () => void;
+    onFieldValueChange<K extends keyof F>(this: void, key: K, value: F[K]['value']): void;
+    onFieldFocus?(this: void, key: keyof F): void;
+    onFieldBlur?(this: void, key: keyof F): void;
+    onFieldSubmit?(this: void, key: keyof F): boolean | void;
+};
+declare function useDefaultMobxFormHooks<P extends FormPresenter<any, any, any, any>, C extends ComponentType<FieldsViewProps<F>>, F extends FormFieldsOfPresenter<P> = FormFieldsOfPresenter<P>>(presenter: P, value: ValueOfPresenter<P>, options: {
     onValidFieldSubmit?: <Path extends ValuePathsOfPresenter<P>>(model: ModelOfPresenter<P>, valuePath: Path) => void;
     onValidFormSubmit?: (model: ModelOfPresenter<P>, value: ValueOfPresenter<P>) => void;
+    FormFieldsView: C;
 }): {
     model: ModelOfPresenter<P>;
-    onFormSubmit?: () => void;
-} & Omit<FieldsViewProps<ModelOfPresenter<P>['fields']>, 'fields'>;
+    FormFields: UnsafePartialComponent<C, FieldsViewProps<F>>;
+    onFormSubmit: () => void;
+    onFieldValueChange<K extends keyof F>(this: void, key: K, value: F[K]['value']): void;
+    onFieldFocus?(this: void, key: keyof F): void;
+    onFieldBlur?(this: void, key: keyof F): void;
+    onFieldSubmit?(this: void, key: keyof F): boolean | void;
+};
 
 type MergedOfFieldAdaptersWithTwoWayConverter<FieldAdapters extends Readonly<Record<string, FieldAdapter>>, E, Context> = {
     [K in keyof FieldAdapters]: FieldAdapter<FromOfFieldAdapter<FieldAdapters[K]>, ToOfFieldAdapter<FieldAdapters[K]>, ErrorOfFieldAdapter<FieldAdapters[K]> | E, ValuePathOfFieldAdapter<FieldAdapters[K]>, Context>;
@@ -216,7 +249,7 @@ type SubFormFieldAdapter<F extends FieldAdapter, ValuePath extends string, Conte
 type SubFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, TypePath extends string, ValuePath extends string, Context> = {
     [K in keyof SubAdapters as K extends StringConcatOf<'$', infer TypePathSuffix> ? `${TypePath}${TypePathSuffix}` : never]: SubFormFieldAdapter<SubAdapters[K], ValuePath, Context>;
 };
-declare function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, TypePath extends string, TypePathsToValuePaths extends Record<TypePath, string>, ContextType extends Type>(subAdapters: SubAdapters, parentTypePath: TypePath, contextType: ContextType): SubFormFieldAdapters<SubAdapters, TypePath, TypePathsToValuePaths[TypePath], ValueOfType<ContextType>>;
+declare function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, TypePath extends string, TypePathsToValuePaths extends Record<TypePath, string>, ContextType extends Type>(subAdapters: SubAdapters, parentTypePath: TypePath, contextType: ContextType): SubFormFieldAdapters<SubAdapters, TypePath, TypePathsToValuePaths[TypePath], ValueOfType<ReadonlyTypeOfType<ContextType>>>;
 
 declare class IntegerToStringConverter<E, ValuePath extends string, Context> implements TwoWayFieldConverter<number, string, E, ValuePath, Context> {
     private readonly isNanError;
@@ -306,21 +339,6 @@ type SubFormFields<F extends Fields, P extends keyof F> = P extends string ? {
     $: F[P];
 } : never;
 
-type PartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps = {}> = Exclude<keyof CurriedProps, keyof ComponentProps<Component>> extends never ? UnsafePartialComponent<Component, CurriedProps, AdditionalProps> : keyof CurriedProps extends (string | number) ? `unmatched prop: ${Exclude<keyof CurriedProps, keyof ComponentProps<Component>>}` : Exclude<keyof CurriedProps, keyof ComponentProps<Component>>;
-type UnsafePartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps = {}> = ForwardRefExoticComponent<PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>>;
-declare function createSimplePartialComponent<Component extends ComponentType<any>, CurriedProps extends Partial<ComponentProps<Component>>>(Component: Component, curriedProps: CurriedProps): PartialComponent<Component, CurriedProps>;
-declare function createPartialComponent<Component extends ComponentType<any>, CurriedProps>(Component: Component, curriedPropsSource: () => CurriedProps): PartialComponent<Component, CurriedProps, {}>;
-declare function createPartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps, AllAdditionalPropKeys extends readonly (keyof AdditionalProps)[]>(Component: Component, curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps, additionalPropKeys: FriendlyExhaustiveArrayOfUnion<keyof AdditionalProps, AllAdditionalPropKeys>): PartialComponent<Component, CurriedProps, AdditionalProps>;
-declare function usePartialComponent<Component extends ComponentType<any>, CurriedProps>(curriedPropsSource: () => CurriedProps, deps: DependencyList, Component: Component): PartialComponent<Component, CurriedProps, {}>;
-declare function usePartialComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps, AllAdditionalPropKeys extends readonly (keyof AdditionalProps)[]>(curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps, deps: DependencyList, Component: Component, additionalPropKeys: FriendlyExhaustiveArrayOfUnion<keyof AdditionalProps, AllAdditionalPropKeys>): PartialComponent<Component, CurriedProps, AdditionalProps>;
-declare function createPartialObserverComponent<Component extends ComponentType<any>, CurriedProps>(Component: Component, curriedPropsSource: () => CurriedProps): PartialComponent<Component, CurriedProps, {}>;
-declare function createPartialObserverComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps, AllAdditionalPropKeys extends readonly (keyof AdditionalProps)[]>(Component: Component, curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps, additionalPropKeys: FriendlyExhaustiveArrayOfUnion<keyof AdditionalProps, AllAdditionalPropKeys>): PartialComponent<Component, CurriedProps, AdditionalProps>;
-declare function createUnsafePartialObserverComponent<Component extends ComponentType<any>, CurriedProps>(Component: Component, curriedPropsSource: () => CurriedProps): UnsafePartialComponent<Component, CurriedProps, {}>;
-declare function createUnsafePartialObserverComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps, AllAdditionalPropKeys extends readonly (keyof AdditionalProps)[]>(Component: Component, curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps, additionalPropKeys: FriendlyExhaustiveArrayOfUnion<keyof AdditionalProps, AllAdditionalPropKeys>): UnsafePartialComponent<Component, CurriedProps, AdditionalProps>;
-declare function usePartialObserverComponent<Component extends ComponentType<any>, CurriedProps>(curriedPropsSource: () => CurriedProps, deps: DependencyList, Component: Component): PartialComponent<Component, CurriedProps, {}>;
-declare function usePartialObserverComponent<Component extends ComponentType<any>, CurriedProps, AdditionalProps, AllAdditionalPropKeys extends readonly (keyof AdditionalProps)[]>(curriedPropsSource: (additionalProps: AdditionalProps) => CurriedProps, deps: DependencyList, Component: Component, additionalPropKeys: FriendlyExhaustiveArrayOfUnion<keyof AdditionalProps, AllAdditionalPropKeys>): PartialComponent<Component, CurriedProps, AdditionalProps>;
-type RemainingComponentProps<Component extends ComponentType, CurriedProps> = Omit<ComponentProps<Component>, keyof CurriedProps> & JSX.IntrinsicAttributes;
-
 type MantineForm<F extends Fields> = {
     fields: F;
     onFieldValueChange: (<K extends keyof F>(this: void, key: K, value: F[K]['value']) => void) | undefined;
@@ -336,6 +354,14 @@ type MantineFieldComponent<T, P = T, E = any> = UnsafePartialComponent<Component
 
 type SuppliedCheckboxProps = Pick<CheckboxProps, 'name' | 'checked' | 'disabled' | 'required' | 'error' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyUp'>;
 
+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;
+};
+type FieldsView<ValuePath extends string = string, C extends ComponentType<any> = ComponentType<any>> = {
+    Component: C;
+    callbackMapper: CallbackMapper<ValuePath>;
+};
+
 type SuppliedListProps<Value = any, ListPath extends string = string> = {
     values: readonly Value[];
     listPath: ListPath;
@@ -408,7 +434,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>;
-    fieldsView<K extends keyof AllFieldsOfFields<F>, P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>>(valuePath: K, FieldsView: ComponentType<P>): MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>;
+    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>;
 }