@strictly/react-form 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -149,29 +149,17 @@ declare class FormModel<T extends Type, ValueToTypePaths extends Readonly<Record
     get accessors(): Readonly<Record<string, Accessor>>;
 }
 
-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>;
+type FieldsViewProps<F extends Fields> = {
+    fields: F;
+    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 ValuePathsOfFieldAdapters<FieldAdapters extends Readonly<Record<string, FieldAdapter>>> = {
-    [K in keyof FieldAdapters]: ValuePathOfFieldAdapter<FieldAdapters[K]>;
-}[keyof FieldAdapters];
-type TosOfFieldAdapters<FieldAdapters extends Readonly<Record<string, FieldAdapter>>> = {
-    [K in keyof FieldAdapters]: ToOfFieldAdapter<FieldAdapters[K]>;
-}[keyof FieldAdapters];
-declare function mergeFieldAdaptersWithTwoWayConverter<FieldAdapters extends Readonly<Record<string, FieldAdapter>>, E, Context>(fieldAdapters: FieldAdapters, converter: TwoWayFieldConverter<TosOfFieldAdapters<FieldAdapters>, TosOfFieldAdapters<FieldAdapters>, E, ValuePathsOfFieldAdapters<FieldAdapters>, Context>): MergedOfFieldAdaptersWithTwoWayConverter<FieldAdapters, E, Context>;
-
-type MergedOfFieldAdaptersWithValidators<FieldAdapters extends Readonly<Record<Key, FieldAdapter>>, Validators extends Partial<Readonly<Record<string, Validator>>>, Key extends keyof Validators = keyof Validators> = Simplify<{
-    readonly [K in Key]: MergedOfFieldAdapterWithValidator<FieldAdapters[K], Validators[K]>;
-} & {
-    readonly [K in Exclude<keyof FieldAdapters, Key>]: FieldAdapters[K];
-}>;
-type MergedOfFieldAdapterWithValidator<A extends FieldAdapter, V extends Validator | undefined> = undefined extends V ? A : A extends FieldAdapter<infer From, infer To, infer E1, infer P1, infer C1> ? V extends Validator<From, infer E2, infer P2, infer C2> ? FieldAdapter<From, To, E1 | E2, P1 | P2, C1 | C2> : never : never;
-declare function mergeAdaptersWithValidators<FieldAdapters extends Readonly<Record<Key, FieldAdapter>>, Validators extends Readonly<Record<string, Validator>>, Key extends keyof Validators = keyof Validators>(adapters: FieldAdapters, validators: Validators): MergedOfFieldAdaptersWithValidators<FieldAdapters, Validators, Key>;
-
-type SubFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string> = {
-    [K in keyof SubAdapters as K extends StringConcatOf<'$', infer S> ? `${P}${S}` : never]: SubAdapters[K];
+type FormProps<O> = {
+    value: O;
+    onValueChange: (value: O) => void;
 };
-declare function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string>(subAdapters: SubAdapters, prefix: P): SubFormFieldAdapters<SubAdapters, P>;
 
 /**
  * Used to extract the supported value paths from a presenter
@@ -191,17 +179,36 @@ type ToValueOfPresenterValuePath<Presenter extends FormPresenter<any, any, any,
  */
 type FormFieldsOfPresenter<Presenter extends FormPresenter<any, any, any, any>> = Presenter extends FormPresenter<infer _1, infer _2, infer _3, infer ValuePathsToAdapters> ? FlattenedConvertedFieldsOf<ValuePathsToAdapters> : never;
 
-type FormProps<F extends Fields> = {
-    fields: F;
-    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 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>, onValidSubmit?: <Path extends ValuePathsOfPresenter<P>>(model: ModelOfPresenter<P>, valuePath: Path) => void): {
+    model: ModelOfPresenter<P>;
+} & Omit<FieldsViewProps<ModelOfPresenter<P>['fields']>, 'fields'>;
+
+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>;
 };
-type EditorProps<O> = {
-    value: O;
-    onValueChange: (value: O) => void;
+type ValuePathsOfFieldAdapters<FieldAdapters extends Readonly<Record<string, FieldAdapter>>> = {
+    [K in keyof FieldAdapters]: ValuePathOfFieldAdapter<FieldAdapters[K]>;
+}[keyof FieldAdapters];
+type TosOfFieldAdapters<FieldAdapters extends Readonly<Record<string, FieldAdapter>>> = {
+    [K in keyof FieldAdapters]: ToOfFieldAdapter<FieldAdapters[K]>;
+}[keyof FieldAdapters];
+declare function mergeFieldAdaptersWithTwoWayConverter<FieldAdapters extends Readonly<Record<string, FieldAdapter>>, E, Context>(fieldAdapters: FieldAdapters, converter: TwoWayFieldConverter<TosOfFieldAdapters<FieldAdapters>, TosOfFieldAdapters<FieldAdapters>, E, ValuePathsOfFieldAdapters<FieldAdapters>, Context>): MergedOfFieldAdaptersWithTwoWayConverter<FieldAdapters, E, Context>;
+
+type MergedOfFieldAdaptersWithValidators<FieldAdapters extends Readonly<Record<Key, FieldAdapter>>, Validators extends Partial<Readonly<Record<string, Validator>>>, Key extends keyof Validators = keyof Validators> = Simplify<{
+    readonly [K in Key]: MergedOfFieldAdapterWithValidator<FieldAdapters[K], Validators[K]>;
+} & {
+    readonly [K in Exclude<keyof FieldAdapters, Key>]: FieldAdapters[K];
+}>;
+type MergedOfFieldAdapterWithValidator<A extends FieldAdapter, V extends Validator | undefined> = undefined extends V ? A : A extends FieldAdapter<infer From, infer To, infer E1, infer P1, infer C1> ? V extends Validator<From, infer E2, infer P2, infer C2> ? FieldAdapter<From, To, E1 | E2, P1 | P2, C1 | C2> : never : never;
+declare function mergeAdaptersWithValidators<FieldAdapters extends Readonly<Record<Key, FieldAdapter>>, Validators extends Readonly<Record<string, Validator>>, Key extends keyof Validators = keyof Validators>(adapters: FieldAdapters, validators: Validators): MergedOfFieldAdaptersWithValidators<FieldAdapters, Validators, Key>;
+
+type SubFormFieldAdapter<F extends FieldAdapter, P extends string, Context> = FieldAdapter<FromOfFieldAdapter<F>, ToOfFieldAdapter<F>, ErrorOfFieldAdapter<F>, P, Context>;
+type SubFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string, Context> = {
+    [K in keyof SubAdapters as K extends StringConcatOf<'$', infer S> ? `${P}${S}` : never]: K extends StringConcatOf<'$', infer S> ? SubFormFieldAdapter<SubAdapters[K], `${P}${S}`, Context> : never;
 };
+declare function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string, ContextType extends Type>(subAdapters: SubAdapters, prefix: P, contextType: ContextType): SubFormFieldAdapters<SubAdapters, P, ValueOfType<ContextType>>;
 
 declare class IntegerToStringConverter<E, ValuePath extends string, Context> implements TwoWayFieldConverter<number, string, E, ValuePath, Context> {
     private readonly isNanError;
@@ -360,7 +367,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 useMantineForm<F extends Fields>({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }: FormProps<F>): MantineFormImpl<F>;
+declare function useMantineFormFields<F extends Fields>({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }: FieldsViewProps<F>): MantineFormImpl<F>;
 declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     private readonly textInputCache;
     private readonly valueInputCache;
@@ -369,7 +376,8 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     private readonly radioCache;
     private readonly pillCache;
     private readonly listCache;
-    private readonly subFormCache;
+    private readonly fieldsViewCache;
+    private readonly formCache;
     accessor fields: F;
     onFieldValueChange: <K extends keyof F>(this: void, key: K, value: F[K]['value']) => void;
     onFieldFocus: ((this: void, key: keyof F) => void) | undefined;
@@ -389,7 +397,8 @@ 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>;
     list<K extends keyof ListFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedListProps<`${K}.${number}`>, ComponentProps<typeof DefaultList<ElementOfArray<F[K]['value']>, K>>>;
-    subForm<K extends keyof AllFieldsOfFields<F>, S extends SubFormFields<F, K>>(valuePath: K, SubForm: ComponentType<FormProps<S>>): ComponentType;
+    fieldsView<K extends keyof AllFieldsOfFields<F>, P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>>(valuePath: K, FieldsView: ComponentType<P>): MantineFieldComponent<FieldsViewProps<P['fields']>, P>;
+    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>;
 }
 
 type MergedOfValidators<Validators1 extends Partial<Readonly<Record<Keys, Validator>>>, Validators2 extends Partial<Readonly<Record<Keys, Validator>>>, Keys extends string = Extract<keyof Validators1 | keyof Validators2, string>> = Simplify<{
@@ -398,4 +407,4 @@ type MergedOfValidators<Validators1 extends Partial<Readonly<Record<Keys, Valida
 type MergedOfValidator<Validator1 extends Validator, Validator2 extends Validator> = Validator1 extends Validator<infer V, infer E1, infer P, infer C> ? Validator2 extends Validator<V, infer E2, P, C> ? Validator<V, E1 | E2, P, C> : never : never;
 declare function mergeValidators<Validators1 extends Partial<Readonly<Record<Keys, Validator>>>, Validators2 extends Partial<Readonly<Record<Keys, Validator>>>, Keys extends string = Extract<keyof Validators1 | keyof Validators2, string>>(validators1: Validators1, validators2: Validators2): MergedOfValidators<Validators1, Validators2, Keys>;
 
-export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, DefaultErrorRenderer, type EditorProps, type ErrorOfField, type ErrorOfFieldAdapter, type ErrorRenderer, type ErrorRendererProps, type Field, type FieldAdapter, type FieldAdaptersOfValues, type FieldValueFactory, type Fields, type FlattenedAdaptersOfFields, type FlattenedConvertedFieldsOf, type FlattenedTypePathsToAdaptersOf, type FormFieldsOfFieldAdapters, type FormFieldsOfPresenter, FormModel, FormPresenter, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, type ToValueOfPresenterValuePath, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, type ValuePathOfFieldAdapter, type ValuePathsOfPresenter, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, prototypingFieldValueFactory, subFormFieldAdapters, useMantineForm, usePartialComponent, usePartialObserverComponent, validatingConverter };
+export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, DefaultErrorRenderer, 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 FormFieldsOfPresenter, FormModel, FormPresenter, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, type ToValueOfPresenterValuePath, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, type ValuePathOfFieldAdapter, type ValuePathsOfPresenter, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, prototypingFieldValueFactory, subFormFieldAdapters, useDefaultMobxFormHooks, useMantineFormFields, usePartialComponent, usePartialObserverComponent, validatingConverter };

package/dist/index.js

@@ -655,6 +655,62 @@ var FormModel = class {
   }
 };
 
+// core/mobx/hooks.ts
+import {
+  useCallback,
+  useMemo
+} from "react";
+function useDefaultMobxFormHooks(presenter, value, onValidSubmit) {
+  const model = useMemo(function() {
+    return presenter.createModel(value);
+  }, [
+    presenter,
+    value
+  ]);
+  const onFieldValueChange = useCallback(
+    function(path, value2) {
+      presenter.clearFieldError(model, path);
+      presenter.setFieldValue(model, path, value2);
+    },
+    [
+      presenter,
+      model
+    ]
+  );
+  const onFieldSubmit = useCallback(
+    function(valuePath) {
+      if (presenter.validateField(model, valuePath)) {
+        onValidSubmit?.(model, valuePath);
+      }
+      return false;
+    },
+    [
+      presenter,
+      model,
+      onValidSubmit
+    ]
+  );
+  const onFieldBlur = useCallback(
+    function(path) {
+      setTimeout(function() {
+        if (presenter.isValuePathActive(model, path)) {
+          presenter.validateField(model, path);
+        }
+      }, 100);
+    },
+    [
+      presenter,
+      model
+    ]
+  );
+  return {
+    model,
+    onFieldValueChange,
+    onFieldSubmit,
+    onFieldBlur
+  };
+}
+
 // core/mobx/merge_field_adapters_with_two_way_converter.ts
 import { map as map2 } from "@strictly/base";
 function mergeFieldAdaptersWithTwoWayConverter(fieldAdapters, converter) {
@@ -734,13 +790,35 @@ function mergeAdaptersWithValidators(adapters, validators) {
 }
 
 // core/mobx/sub_form_field_adapters.ts
-function subFormFieldAdapters(subAdapters, prefix) {
+import {
+  flattenValuesOfType as flattenValuesOfType2
+} from "@strictly/define";
+function subFormFieldAdapters(subAdapters, prefix, contextType) {
+  function getSubValuePathAndContext(valuePath, context) {
+    const subValuePath = valuePath.replace(prefix, "$");
+    const subContext = flattenValuesOfType2(contextType, context)[prefix];
+    return [
+      subValuePath,
+      subContext
+    ];
+  }
   return Object.entries(subAdapters).reduce((acc, [
     subKey,
     subValue
   ]) => {
     const key = subKey.replace("$", prefix);
-    acc[key] = subValue;
+    const adaptedAdapter = {
+      convert: (from, valuePath, context) => {
+        return subValue.convert(from, ...getSubValuePathAndContext(valuePath, context));
+      },
+      create: (valuePath, context) => {
+        return subValue.create(...getSubValuePathAndContext(valuePath, context));
+      },
+      revert: subValue.revert && ((from, valuePath, context) => {
+        return subValue.revert(from, ...getSubValuePathAndContext(valuePath, context));
+      })
+    };
+    acc[key] = adaptedAdapter;
     return acc;
   }, {});
 }
@@ -982,14 +1060,14 @@ import {
 } from "mobx";
 import {
   useEffect,
-  useMemo as useMemo2
+  useMemo as useMemo3
 } from "react";
 
 // util/partial.tsx
 import { observer } from "mobx-react";
 import {
   forwardRef,
-  useMemo
+  useMemo as useMemo2
 } from "react";
 import { jsx } from "react/jsx-runtime";
 function createSimplePartialComponent(Component, curriedProps) {
@@ -1050,7 +1128,7 @@ function createPartialComponent(Component, curriedPropsSource, additionalPropKey
   );
 }
 function usePartialComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
-  return useMemo(
+  return useMemo2(
     function() {
       return createPartialComponent(
         Component,
@@ -1120,7 +1198,7 @@ function createUnsafePartialObserverComponent(Component, curriedPropsSource, add
   );
 }
 function usePartialObserverComponent(curriedPropsSource, deps, Component, additionalPropKeys = []) {
-  return useMemo(
+  return useMemo2(
     function() {
       return createPartialObserverComponent(
         Component,
@@ -1187,8 +1265,81 @@ function createCheckbox(valuePath, Checkbox) {
   );
 }
 
+// mantine/create_fields_view.tsx
+import { observer as observer2 } from "mobx-react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function createFieldsView(valuePath, FieldsView, observableProps) {
+  function toKey(subKey) {
+    return subKey.replace("$", valuePath);
+  }
+  function toSubKey(key) {
+    return key.replace(valuePath, "$");
+  }
+  function onFieldValueChange(subKey, value) {
+    observableProps.onFieldValueChange(toKey(subKey), value);
+  }
+  function onFieldBlur(subKey) {
+    observableProps.onFieldBlur?.(toKey(subKey));
+  }
+  function onFieldFocus(subKey) {
+    observableProps.onFieldFocus?.(toKey(subKey));
+  }
+  function onFieldSubmit(subKey) {
+    observableProps.onFieldSubmit?.(toKey(subKey));
+  }
+  return observer2(function(props) {
+    const subFields = Object.entries(observableProps.fields).reduce((acc, [
+      fieldKey,
+      fieldValue
+    ]) => {
+      if (fieldKey.startsWith(valuePath)) {
+        acc[toSubKey(fieldKey)] = fieldValue;
+      }
+      return acc;
+    }, {});
+    return /* @__PURE__ */ jsx3(
+      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
+      }
+    );
+  });
+}
+
+// mantine/create_form.tsx
+import { observer as observer3 } from "mobx-react";
+import {
+  useCallback as useCallback2
+} from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function createForm(valuePath, Form, observableProps) {
+  return observer3((props) => {
+    const { value } = observableProps.fields[valuePath];
+    const onValueChange = useCallback2((value2) => {
+      observableProps.onFieldValueChange(valuePath, value2);
+    }, []);
+    return /* @__PURE__ */ jsx4(
+      Form,
+      {
+        // 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,
+        onValueChange,
+        value
+      }
+    );
+  });
+}
+
 // mantine/create_list.tsx
-import { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
 function createList(valuePath, List) {
   const propSource = () => {
     const values = [...this.fields[valuePath].value];
@@ -1204,7 +1355,7 @@ function DefaultList({
   listPath,
   children
 }) {
-  return /* @__PURE__ */ jsx3(Fragment, { children: values.map(function(value, index) {
+  return /* @__PURE__ */ jsx5(Fragment, { children: values.map(function(value, index) {
     const valuePath = `${listPath}.${index}`;
     return children(valuePath, value, index);
   }) });
@@ -1243,7 +1394,7 @@ function createRadio(valuePath, value, Radio) {
 }
 
 // mantine/create_radio_group.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function createRadioGroup(valuePath, RadioGroup) {
   const onChange = (value) => {
     this.onFieldValueChange?.(valuePath, value);
@@ -1271,7 +1422,7 @@ function createRadioGroup(valuePath, RadioGroup) {
       name: valuePath,
       value,
       required,
-      error: error && /* @__PURE__ */ jsx4(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx6(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1281,53 +1432,8 @@ function createRadioGroup(valuePath, RadioGroup) {
   return createUnsafePartialObserverComponent(RadioGroup, propSource, ["ErrorRenderer"]);
 }
 
-// mantine/create_sub_form.tsx
-import { observer as observer2 } from "mobx-react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-function createSubForm(valuePath, SubForm, observableProps) {
-  function toKey(subKey) {
-    return subKey.replace("$", valuePath);
-  }
-  function toSubKey(key) {
-    return key.replace(valuePath, "$");
-  }
-  function onFieldValueChange(subKey, value) {
-    observableProps.onFieldValueChange(toKey(subKey), value);
-  }
-  function onFieldBlur(subKey) {
-    observableProps.onFieldBlur?.(toKey(subKey));
-  }
-  function onFieldFocus(subKey) {
-    observableProps.onFieldFocus?.(toKey(subKey));
-  }
-  function onFieldSubmit(subKey) {
-    observableProps.onFieldSubmit?.(toKey(subKey));
-  }
-  return observer2(function() {
-    const subFields = Object.entries(observableProps.fields).reduce((acc, [
-      fieldKey,
-      fieldValue
-    ]) => {
-      if (fieldKey.startsWith(valuePath)) {
-        acc[toSubKey(fieldKey)] = fieldValue;
-      }
-      return acc;
-    }, {});
-    return /* @__PURE__ */ jsx5(
-      SubForm,
-      {
-        fields: subFields,
-        onFieldBlur,
-        onFieldFocus,
-        onFieldSubmit,
-        onFieldValueChange
-      }
-    );
-  });
-}
-
 // mantine/create_text_input.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function createTextInput(valuePath, TextInput) {
   const onChange = (e) => {
     this.onFieldValueChange?.(valuePath, e.target.value);
@@ -1361,7 +1467,7 @@ function createTextInput(valuePath, TextInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx6(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx7(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1376,7 +1482,7 @@ function createTextInput(valuePath, TextInput) {
 }
 
 // mantine/create_value_input.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function createValueInput(valuePath, ValueInput) {
   const onChange = (value) => {
     this.onFieldValueChange?.(valuePath, value);
@@ -1410,7 +1516,7 @@ function createValueInput(valuePath, ValueInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx7(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx8(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1425,18 +1531,18 @@ function createValueInput(valuePath, ValueInput) {
 }
 
 // mantine/hooks.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function SimpleSelect(props) {
-  return /* @__PURE__ */ jsx8(Select, { ...props });
+  return /* @__PURE__ */ jsx9(Select, { ...props });
 }
-function useMantineForm({
+function useMantineFormFields({
   onFieldValueChange,
   onFieldBlur,
   onFieldFocus,
   onFieldSubmit,
   fields
 }) {
-  const form = useMemo2(
+  const form = useMemo3(
     function() {
       return new MantineFormImpl(fields);
     },
@@ -1500,9 +1606,10 @@ var MantineFormImpl = class {
   listCache = new Cache(
     createList.bind(this)
   );
-  subFormCache = new Cache(
-    createSubForm.bind(this)
+  fieldsViewCache = new Cache(
+    createFieldsView.bind(this)
   );
+  formCache = new Cache(createForm.bind(this));
   @observable2.ref
   accessor fields;
   onFieldValueChange;
@@ -1568,13 +1675,21 @@ var MantineFormImpl = class {
       DefaultList
     );
   }
-  // TODO have the returned component take any non-overlapping props as props
-  subForm(valuePath, SubForm) {
-    return this.subFormCache.retrieveOrCreate(
+  fieldsView(valuePath, FieldsView) {
+    return this.fieldsViewCache.retrieveOrCreate(
+      valuePath,
+      // strip props from component since we lose information in the cache
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      FieldsView,
+      this
+    );
+  }
+  form(valuePath, Form) {
+    return this.formCache.retrieveOrCreate(
       valuePath,
       // strip props from component since we lose information in the cache
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      SubForm,
+      Form,
       this
     );
   }
@@ -1647,7 +1762,8 @@ export {
   mergeValidators,
   prototypingFieldValueFactory,
   subFormFieldAdapters,
-  useMantineForm,
+  useDefaultMobxFormHooks,
+  useMantineFormFields,
   usePartialComponent,
   usePartialObserverComponent,
   validatingConverter

package/index.ts

@@ -4,6 +4,7 @@ export * from './core/mobx/field_adapters_of_values'
 export * from './core/mobx/flattened_adapters_of_fields'
 export * from './core/mobx/form_fields_of_field_adapters'
 export * from './core/mobx/form_presenter'
+export * from './core/mobx/hooks'
 export * from './core/mobx/merge_field_adapters_with_two_way_converter'
 export * from './core/mobx/merge_field_adapters_with_validators'
 export * from './core/mobx/sub_form_field_adapters'

package/mantine/{create_sub_form.tsx → create_fields_view.tsx}

@@ -1,20 +1,24 @@
-import type { FormProps } from 'core/props'
+import type { FieldsViewProps } from 'core/props'
 import { observer } from 'mobx-react'
-import type { ComponentType } from 'react'
+import type {
+  ComponentProps,
+  ComponentType,
+} from 'react'
 import type { AllFieldsOfFields } from 'types/all_fields_of_fields'
 import type { Fields } from 'types/field'
 import type { SubFormFields } from 'types/sub_form_fields'
 import type { ValueTypeOfField } from 'types/value_type_of_field'
+import type { MantineFieldComponent } from './types'
 
-export function createSubForm<
+export function createFieldsView<
   F extends Fields,
   K extends keyof AllFieldsOfFields<F>,
-  S extends Fields = SubFormFields<F, K>,
+  P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>,
 >(
   valuePath: K,
-  SubForm: ComponentType<FormProps<S>>,
-  observableProps: FormProps<F>,
-) {
+  FieldsView: ComponentType<P>,
+  observableProps: FieldsViewProps<F>,
+): MantineFieldComponent<FieldsViewProps<P['fields']>, P> {
   function toKey(subKey: string | number | symbol): string {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return (subKey as string).replace('$', valuePath as string)
@@ -25,25 +29,27 @@ export function createSubForm<
     return (key as string).replace(valuePath as string, '$')
   }
 
-  function onFieldValueChange<SubK extends keyof S>(
+  function onFieldValueChange<SubK extends keyof P['fields']>(
     subKey: SubK,
-    value: ValueTypeOfField<S[SubK]>,
+    value: ValueTypeOfField<P['fields'][SubK]>,
   ) {
     // convert from subKey to key
     observableProps.onFieldValueChange(toKey(subKey), value)
   }
-  function onFieldBlur(subKey: keyof S) {
+  function onFieldBlur(subKey: keyof P['fields']) {
     observableProps.onFieldBlur?.(toKey(subKey))
   }
 
-  function onFieldFocus(subKey: keyof S) {
+  function onFieldFocus(subKey: keyof P['fields']) {
     observableProps.onFieldFocus?.(toKey(subKey))
   }
 
-  function onFieldSubmit(subKey: keyof S) {
+  function onFieldSubmit(subKey: keyof P['fields']) {
     observableProps.onFieldSubmit?.(toKey(subKey))
   }
-  return observer(function () {
+
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return observer(function (props: ComponentProps<MantineFieldComponent<FieldsViewProps<P['fields']>, P>>) {
     // convert fields to sub-fields
     const subFields = Object.entries(observableProps.fields).reduce<Record<string, unknown>>((acc, [
       fieldKey,
@@ -57,14 +63,19 @@ export function createSubForm<
     }, {})
 
     return (
-      <SubForm
+      <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 as any
+        }
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        fields={subFields as S}
+        fields={subFields as P['fields']}
         onFieldBlur={onFieldBlur}
         onFieldFocus={onFieldFocus}
         onFieldSubmit={onFieldSubmit}
         onFieldValueChange={onFieldValueChange}
       />
     )
-  })
+  }) as unknown as MantineFieldComponent<FieldsViewProps<P['fields']>, P>
 }

package/mantine/create_form.tsx

@@ -0,0 +1,43 @@
+import {
+  type FieldsViewProps,
+  type FormProps,
+} from 'core/props'
+import { observer } from 'mobx-react'
+import {
+  type ComponentProps,
+  type ComponentType,
+  useCallback,
+} from 'react'
+import { type AllFieldsOfFields } from 'types/all_fields_of_fields'
+import { type Fields } from 'types/field'
+import { type ValueTypeOfField } from 'types/value_type_of_field'
+import { type MantineFieldComponent } from './types'
+
+export function createForm<
+  F extends Fields,
+  K extends keyof AllFieldsOfFields<F>,
+  P extends FormProps<ValueTypeOfField<F[K]>> = FormProps<ValueTypeOfField<F[K]>>,
+>(
+  valuePath: K,
+  Form: ComponentType<P>,
+  observableProps: FieldsViewProps<F>,
+): MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P> {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  return observer((props: ComponentProps<MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P>>) => {
+    const { value } = observableProps.fields[valuePath]
+    const onValueChange = useCallback((value: ValueTypeOfField<F[K]>) => {
+      observableProps.onFieldValueChange(valuePath, value)
+    }, [])
+    return (
+      <Form
+        {
+          // 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 as any
+        }
+        onValueChange={onValueChange}
+        value={value}
+      />
+    )
+  }) as MantineFieldComponent<FormProps<ValueTypeOfField<F[K]>>, P>
+}