@strictly/react-form 0.0.8 → 0.0.10

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

@@ -7,6 +7,9 @@ declare class FieldAdapterBuilder<From, To, E, ValuePath extends string, Context
     constructor(convert: AnnotatedFieldConverter<From, To, ValuePath, Context>, create: FieldValueFactory<From, ValuePath, Context>, revert?: UnreliableFieldConverter<To, From, E, ValuePath, Context> | undefined);
     chain<To2, E2 = E>(converter: AnnotatedFieldConverter<To, To2, ValuePath, Context>, reverter?: UnreliableFieldConverter<To2, To, E2, ValuePath, Context>): FieldAdapterBuilder<From, To2, E | E2, ValuePath, Context>;
     withReverter(reverter: UnreliableFieldConverter<To, From, E, ValuePath, Context>): FieldAdapterBuilder<From, To, E, ValuePath, Context>;
+    nullable(): FieldAdapterBuilder<From | null, To | null, E, ValuePath, Context>;
+    optional(): FieldAdapterBuilder<From | undefined, To | undefined, E, ValuePath, Context>;
+    private or;
     withIdentity(isFrom: (from: To | From) => from is From): FieldAdapterBuilder<From, To | From, E, ValuePath, Context>;
     get narrow(): FieldAdapter<From, To, E, ValuePath, Context>;
 }
@@ -17,5 +20,6 @@ export declare function adapterFromTwoWayConverter<From, To, E, ValuePath extend
 export declare function adapterFromPrototype<From, To, ValuePath extends string, Context>(converter: AnnotatedFieldConverter<From, To, ValuePath, Context>, prototype: From): FieldAdapterBuilder<From, To, never, ValuePath, Context>;
 export declare function adapterFromPrototype<From, To, E, ValuePath extends string, Context>(converter: TwoWayFieldConverter<From, To, E, ValuePath, Context>, prototype: From): FieldAdapterBuilder<From, To, E, ValuePath, Context>;
 export declare function identityAdapter<V, ValuePath extends string, Context>(prototype: V, required?: boolean): FieldAdapterBuilder<V, V, never, ValuePath, Context>;
+export declare function trimmingStringAdapter<ValuePath extends string, Context>(): FieldAdapterBuilder<string, string, never, ValuePath, Context>;
 export declare function listAdapter<E, ValuePath extends string, Context>(): FieldAdapterBuilder<readonly E[], readonly E[], never, ValuePath, Context>;
 export {};

package/.out/core/mobx/field_adapter_builder.js

@@ -1,7 +1,9 @@
 import { chainAnnotatedFieldConverter, chainUnreliableFieldConverter, } from 'field_converters/chain_field_converter';
 import { annotatedIdentityConverter, unreliableIdentityConverter, } from 'field_converters/identity_converter';
 import { MaybeIdentityConverter } from 'field_converters/maybe_identity_converter';
+import { TrimmingStringConverter } from 'field_converters/trimming_string_converter';
 import { prototypingFieldValueFactory } from 'field_value_factories/prototyping_field_value_factory';
+import { UnreliableFieldConversionType, } from 'types/field_converters';
 class FieldAdapterBuilder {
     convert;
     create;
@@ -17,6 +19,32 @@ class FieldAdapterBuilder {
     withReverter(reverter) {
         return new FieldAdapterBuilder(this.convert, this.create, reverter);
     }
+    nullable() {
+        return this.or(null);
+    }
+    optional() {
+        return this.or(undefined);
+    }
+    or(proto) {
+        function isFrom(v) {
+            return v !== proto;
+        }
+        function isTo(v) {
+            return v !== proto;
+        }
+        return new FieldAdapterBuilder((v, valuePath, context) => isFrom(v)
+            ? this.convert(v, valuePath, context)
+            : {
+                value: v,
+                readonly: false,
+                required: false,
+            }, this.create, (v, valuePath, context) => isTo(v) && this.revert
+            ? this.revert(v, valuePath, context)
+            : {
+                type: UnreliableFieldConversionType.Success,
+                value: proto,
+            });
+    }
     withIdentity(isFrom) {
         const identityConverter = new MaybeIdentityConverter({
             convert: this.convert,
@@ -46,6 +74,9 @@ export function adapterFromPrototype(converter, prototype) {
 export function identityAdapter(prototype, required) {
     return new FieldAdapterBuilder(annotatedIdentityConverter(required), prototypingFieldValueFactory(prototype), unreliableIdentityConverter());
 }
+export function trimmingStringAdapter() {
+    return adapterFromTwoWayConverter(new TrimmingStringConverter(), prototypingFieldValueFactory(''));
+}
 export function listAdapter() {
     return new FieldAdapterBuilder(annotatedIdentityConverter(false), prototypingFieldValueFactory([]), unreliableIdentityConverter());
 }

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

@@ -20,9 +20,9 @@ type FlattenedErrors<ValuePathsToAdapters extends Readonly<Record<string, FieldA
 export 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;
-export 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>> {
+export 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;
@@ -33,12 +33,12 @@ export declare class FormPresenter<T extends Type, ValueToTypePaths extends Read
     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>;
 }
 export 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;

package/.out/core/mobx/form_presenter.js

@@ -188,8 +188,7 @@ export class FormPresenter {
             return;
         }
         const { convert, create, } = adapter;
-        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);
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         const key = valuePath;
@@ -211,7 +210,7 @@ export class FormPresenter {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         return keys.has(valuePath);
     }
-    validateField(model, valuePath) {
+    validateField(model, valuePath, ignoreDefaultValue = false) {
         const { convert, revert, create, } = this.getAdapterForValuePath(valuePath);
         const fieldOverride = model.fieldOverrides[valuePath];
         const accessor = model.getAccessorForValuePath(valuePath);
@@ -226,6 +225,12 @@ export class FormPresenter {
             : storedValue;
         const dirty = storedValue !== value;
         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;
+            }
+        }
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         const conversion = revert(value, valuePath, model.value);
         return runInAction(function () {
@@ -293,9 +298,6 @@ export class FormPresenter {
             }, true);
         });
     }
-    createModel(value) {
-        return new FormModel(this.type, value, this.adapters);
-    }
 }
 export class FormModel {
     type;

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

@@ -1,14 +1,34 @@
 import { type ReadonlyTypeOfType, type ValueOfType } from '@strictly/define';
 import { type FieldsViewProps } from 'core/props';
+import { type ComponentType } from 'react';
+import { type UnsafePartialComponent } from 'util/partial';
 import { type FormPresenter } from './form_presenter';
-import { type ValuePathsOfPresenter } from './types';
+import { type FormFieldsOfPresenter, type ValuePathsOfPresenter } from './types';
 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']>;
-export declare function useDefaultMobxFormHooks<P extends FormPresenter<any, any, any, any>>(presenter: P, value: ValueOfPresenter<P>, { onValidFieldSubmit, onValidFormSubmit, }: {
+export 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>;
-    onFormSubmit?: (value: ValueOfPresenter<P>) => 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;
+};
+export 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>;
+    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;
+};
 export {};

package/.out/core/mobx/hooks.js

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, } from 'react';
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function useDefaultMobxFormHooks(presenter, value, { onValidFieldSubmit, onValidFormSubmit, }) {
+import { createUnsafePartialObserverComponent, } from 'util/partial';
+export function useDefaultMobxFormHooks(presenter, value, { onValidFieldSubmit, onValidFormSubmit, FormFieldsView, } = {}) {
     const model = useMemo(function () {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         return presenter.createModel(value);
@@ -31,7 +31,7 @@ export function useDefaultMobxFormHooks(presenter, value, { onValidFieldSubmit,
         // TODO debounce?
         setTimeout(function () {
             if (presenter.isValuePathActive(model, path)) {
-                presenter.validateField(model, path);
+                presenter.validateField(model, path, true);
             }
         }, 100);
     }, [
@@ -47,11 +47,32 @@ export function useDefaultMobxFormHooks(presenter, value, { onValidFieldSubmit,
         model,
         onValidFormSubmit,
     ]);
+    const FormFields = useMemo(() => {
+        if (FormFieldsView == null) {
+            return undefined;
+        }
+        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,
+        FormFields,
     };
 }

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

@@ -9,6 +9,11 @@ import { prototypingFieldValueFactory } from 'field_value_factories/prototyping_
 import { UnreliableFieldConversionType, } from 'types/field_converters';
 import { createMockedAdapter, resetMockAdapter, } from './fixtures';
 const IS_NAN_ERROR = 1;
+class TestFormPresenter extends FormPresenter {
+    createModel(value) {
+        return new FormModel(this.type, value, this.adapters);
+    }
+}
 const originalIntegerToStringAdapter = adapterFromTwoWayConverter(new IntegerToStringConverter(IS_NAN_ERROR), prototypingFieldValueFactory(0));
 const originalBooleanToBooleanAdapter = identityAdapter(false);
 describe('all', function () {
@@ -286,7 +291,7 @@ describe('all', function () {
             const adapters = {
                 $: integerToStringAdapter,
             };
-            const presenter = new FormPresenter(typeDef, adapters);
+            const presenter = new TestFormPresenter(typeDef, adapters);
             const originalValue = 2;
             let model;
             beforeEach(function () {
@@ -383,7 +388,7 @@ describe('all', function () {
             const converters = {
                 '$.*': integerToStringAdapter,
             };
-            const presenter = new FormPresenter(typeDef, converters);
+            const presenter = new TestFormPresenter(typeDef, converters);
             let originalValue;
             let model;
             beforeEach(function () {
@@ -661,7 +666,7 @@ describe('all', function () {
                     $: adapterFromTwoWayConverter(new NullableToBooleanConverter(type, [1], null)),
                     '$.*': integerToStringAdapter,
                 };
-                const presenter = new FormPresenter(type, adapters);
+                const presenter = new TestFormPresenter(type, adapters);
                 let originalValue;
                 let model;
                 beforeEach(function () {
@@ -709,7 +714,7 @@ describe('all', function () {
                     '$.x:a': identityAdapter(0).narrow,
                     '$.y:b': identityAdapter(false).narrow,
                 };
-                const presenter = new FormPresenter(type, adapters);
+                const presenter = new TestFormPresenter(type, adapters);
                 describe('isValuePathActive', function () {
                     describe('discriminator x', function () {
                         const model = presenter.createModel({
@@ -766,7 +771,7 @@ describe('all', function () {
                 $: integerToStringAdapter,
                 '$.fake': booleanToBooleanAdapter,
             };
-            const presenter = new FormPresenter(typeDef, converters);
+            const presenter = new TestFormPresenter(typeDef, converters);
             let originalValue;
             let model;
             beforeEach(function () {

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

@@ -1,9 +1,9 @@
 import { type StringConcatOf } from '@strictly/base';
-import { type Type, type ValueOfType } from '@strictly/define';
+import { type ReadonlyTypeOfType, type Type, type ValueOfType } from '@strictly/define';
 import { type ErrorOfFieldAdapter, type FieldAdapter, type FromOfFieldAdapter, type ToOfFieldAdapter, type ValuePathOfFieldAdapter } from './field_adapter';
 type SubFormFieldAdapter<F extends FieldAdapter, ValuePath extends string, Context> = FieldAdapter<FromOfFieldAdapter<F>, ToOfFieldAdapter<F>, ErrorOfFieldAdapter<F>, ValuePathOfFieldAdapter<F> extends StringConcatOf<'$', infer ValuePathSuffix> ? `${ValuePath}${ValuePathSuffix}` : string, Context>;
 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>;
 };
-export 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>>;
+export 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>>>;
 export {};

package/.out/field_converters/chain_field_converter.js

@@ -40,12 +40,12 @@ export function chainUnreliableFieldConverter(from, to) {
 }
 export function chainAnnotatedFieldConverter(from, to) {
     return function (value, valuePath, context) {
-        const { required: intermediateRequired, readonly: intermediateDisabled, value: intermediateValue, } = from(value, valuePath, context);
-        const { required: finalRequired, readonly: finalDisabled, value: finalValue, } = to(intermediateValue, valuePath, context);
+        const { required: intermediateRequired, readonly: intermediateReadonly, value: intermediateValue, } = from(value, valuePath, context);
+        const { required: finalRequired, readonly: finalReadonly, value: finalValue, } = to(intermediateValue, valuePath, context);
         return {
             value: finalValue,
             required: intermediateRequired || finalRequired,
-            readonly: intermediateDisabled || finalDisabled,
+            readonly: intermediateReadonly || finalReadonly,
         };
     };
 }

package/.out/mantine/create_fields_view.d.ts

@@ -1,7 +1,15 @@
+import { type StringConcatOf } from '@strictly/base';
 import type { FieldsViewProps } from 'core/props';
 import type { 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 { MantineFieldComponent } from './types';
-export declare function createFieldsView<F extends Fields, K extends keyof AllFieldsOfFields<F>, P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>>(valuePath: K, FieldsView: ComponentType<P>, observableProps: FieldsViewProps<F>): MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>;
+export 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;
+};
+export type FieldsView<ValuePath extends string = string, C extends ComponentType<any> = ComponentType<any>> = {
+    Component: C;
+    callbackMapper: CallbackMapper<ValuePath>;
+};
+export declare function createFieldsView<F extends Fields, K extends keyof AllFieldsOfFields<F>, P extends FieldsViewProps<Fields> = FieldsViewProps<SubFormFields<F, K>>>(valuePath: K, FieldsView: ComponentType<P>, observableProps: FieldsViewProps<F>): FieldsView<K, MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>>;

package/.out/mantine/create_fields_view.js

@@ -23,7 +23,7 @@ export function createFieldsView(valuePath, FieldsView, observableProps) {
         observableProps.onFieldSubmit?.(toKey(subKey));
     }
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return observer(function (props) {
+    const Component = observer(function (props) {
         // convert fields to sub-fields
         const subFields = Object.entries(observableProps.fields).reduce((acc, [fieldKey, fieldValue,]) => {
             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -36,4 +36,16 @@ export function createFieldsView(valuePath, FieldsView, observableProps) {
         {});
         return (_jsx(FieldsView, { ...props, fields: subFields, onFieldBlur: onFieldBlur, onFieldFocus: onFieldFocus, onFieldSubmit: onFieldSubmit, onFieldValueChange: onFieldValueChange }));
     });
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/consistent-type-assertions
+    const callbackMapper = ((callback) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return (subFormValuePath, ...args) => {
+            const valuePath = toKey(subFormValuePath);
+            return callback(valuePath, ...args);
+        };
+    });
+    return {
+        Component,
+        callbackMapper,
+    };
 }

package/.out/mantine/error_renderer.d.ts

@@ -1,6 +1,10 @@
 import { type ComponentType } from 'react';
-export type ErrorRendererProps<E> = {
+import { type ErrorOfField } from 'types/error_of_field';
+import { type Fields } from 'types/field';
+type InternalErrorRendererProps<E> = {
     error: E;
 };
-export type ErrorRenderer<E = any> = ComponentType<ErrorRendererProps<E>>;
-export declare function DefaultErrorRenderer({ error, }: ErrorRendererProps<any>): string;
+export type ErrorRendererProps<F extends Fields, K extends keyof Fields> = InternalErrorRendererProps<ErrorOfField<F[K]>>;
+export type ErrorRenderer<E = any> = ComponentType<InternalErrorRendererProps<E>>;
+export declare function DefaultErrorRenderer({ error, }: InternalErrorRendererProps<any>): string;
+export {};

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

@@ -11,6 +11,7 @@ import { type StringFieldsOfFields } from 'types/string_fields_of_fields';
 import { type SubFormFields } from 'types/sub_form_fields';
 import { type ValueTypeOfField } from 'types/value_type_of_field';
 import { type SuppliedCheckboxProps } from './create_checkbox';
+import { type FieldsView } from './create_fields_view';
 import { DefaultList, type SuppliedListProps } from './create_list';
 import { type SuppliedPillProps } from './create_pill';
 import { type SuppliedRadioProps } from './create_radio';
@@ -51,7 +52,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>;
 }
 export {};

package/.out/mantine/hooks.js

@@ -4,7 +4,7 @@ import { Cache, } from '@strictly/base';
 import { observable, runInAction, } from 'mobx';
 import { useEffect, useMemo, } from 'react';
 import { createCheckbox, } from './create_checkbox';
-import { createFieldsView } from './create_fields_view';
+import { createFieldsView, } from './create_fields_view';
 import { createForm } from './create_form';
 import { createList, DefaultList, } from './create_list';
 import { createPill, } from './create_pill';

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

@@ -0,0 +1,17 @@
+describe('createFieldsView', () => {
+    describe('CallbackMapper', () => {
+        it('maps a root paths', () => {
+            const callbackMapper = null;
+            expectTypeOf().toEqualTypeOf();
+        });
+        it('maps a simple paths', () => {
+            const callbackMapper = null;
+            expectTypeOf().toEqualTypeOf();
+        });
+        it('maps a indexed paths', () => {
+            const callbackMapper = null;
+            expectTypeOf().toEqualTypeOf();
+        });
+    });
+});
+export {};

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

@@ -1,10 +1,14 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 import { type FieldsViewProps } from 'core/props';
 import { type Field } from 'types/field';
-declare function Component(props: FieldsViewProps<{
+export declare function ParentFieldLabel(): string;
+export declare function SubFieldLabel(): string;
+declare function Component({ onClickField: onClickFieldImpl, ...props }: FieldsViewProps<{
     $: Field<string, string>;
     '$.a': Field<string, string>;
-}>): import("react/jsx-runtime").JSX.Element;
+}> & {
+    onClickField: (valuePath: '$' | '$.a') => void;
+}): import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta<typeof Component>;
 export default meta;
 type Story = StoryObj<typeof Component>;

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

@@ -1,21 +1,39 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Stack, } from '@mantine/core';
+import { Paper, Stack, Text, } from '@mantine/core';
 import { action } from '@storybook/addon-actions';
 import { useMantineFormFields } from 'mantine/hooks';
-const onClick = action('some button clicked');
+import { useCallback, useMemo, } from 'react';
+export function ParentFieldLabel() {
+    return '$';
+}
+export function SubFieldLabel() {
+    return '$ (child)';
+}
 function ErrorRenderer({ error }) {
     return `error ${error}`;
 }
-function SubFieldsView(props) {
+function SubFieldsView({ onClickField: onClickFieldImpl, ...props }) {
     const form = useMantineFormFields(props);
     const TextInput = form.textInput('$');
-    return (_jsxs(Stack, { children: [_jsx(TextInput, { ErrorRenderer: ErrorRenderer, label: 'sub fields view' }), _jsx(Button, { onClick: props.onClick, children: "Bonus Button" })] }));
+    const onClick$ = useCallback(() => {
+        onClickFieldImpl('$');
+    }, [onClickFieldImpl]);
+    return (_jsx(Stack, { children: _jsx(TextInput, { ErrorRenderer: ErrorRenderer, label: SubFieldLabel(), onClick: onClick$ }) }));
 }
-function Component(props) {
+function Component({ onClickField: onClickFieldImpl, ...props }) {
     const form = useMantineFormFields(props);
-    const FieldsView = form.fieldsView('$.a', SubFieldsView);
+    const { Component, callbackMapper, } = form.fieldsView('$.a', SubFieldsView);
     const TextInput = form.textInput('$');
-    return (_jsxs(Stack, { children: [_jsx(TextInput, { ErrorRenderer: ErrorRenderer, label: 'fields view' }), _jsx(FieldsView, { onClick: onClick })] }));
+    const onClick$ = useCallback(() => {
+        onClickFieldImpl('$');
+    }, [onClickFieldImpl]);
+    const onClickChildField = useMemo(() => {
+        return callbackMapper(onClickFieldImpl);
+    }, [
+        onClickFieldImpl,
+        callbackMapper,
+    ]);
+    return (_jsxs(Stack, { children: [_jsx(TextInput, { ErrorRenderer: ErrorRenderer, label: ParentFieldLabel(), onClick: onClick$ }), _jsxs(Paper, { p: 'sm', withBorder: true, children: [_jsx(Text, { children: "$.a" }), _jsx(Component, { onClickField: onClickChildField })] })] }));
 }
 const meta = {
     component: Component,
@@ -24,6 +42,7 @@ const meta = {
         onFieldFocus: action('onFieldFocus'),
         onFieldSubmit: action('onFieldSubmit'),
         onFieldValueChange: action('onFieldValueChange'),
+        onClickField: action('onClickField'),
     },
 };
 export default meta;

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

@@ -1,12 +1,32 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { composeStories } from '@storybook/react';
 import { toArray } from '@strictly/base';
-import { render, } from '@testing-library/react';
+import { fireEvent, render, } from '@testing-library/react';
 import * as stories from './fields_view_hooks.stories';
 const composedStories = composeStories(stories);
+const { Empty, } = composedStories;
 describe('field view hooks', function () {
     it.each(toArray(composedStories))('renders %s', function (_name, Story) {
         const wrapper = render(_jsx(Story, {}));
         expect(wrapper.container).toMatchSnapshot();
     });
+    describe('callbackMapper', () => {
+        it.each([
+            [
+                '$',
+                stories.ParentFieldLabel(),
+            ],
+            [
+                '$.a',
+                stories.SubFieldLabel(),
+            ],
+        ])('calls back with the correct paths for field at %s', async (valuePath, labelText) => {
+            const onClickField = vi.fn();
+            const wrapper = render(_jsx(Empty, { onClickField: onClickField }));
+            const element = await wrapper.findByLabelText(labelText);
+            fireEvent.click(element);
+            expect(onClickField).toHaveBeenCalledOnce();
+            expect(onClickField).toHaveBeenCalledWith(valuePath);
+        });
+    });
 });