@strictly/react-form 0.0.7 → 0.0.8

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

@@ -4,7 +4,11 @@ import { type FormPresenter } from './form_presenter';
 import { 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>, onValidSubmit?: <Path extends ValuePathsOfPresenter<P>>(model: ModelOfPresenter<P>, valuePath: Path) => void): {
+export declare function useDefaultMobxFormHooks<P extends FormPresenter<any, any, any, any>>(presenter: P, value: ValueOfPresenter<P>, { onValidFieldSubmit, onValidFormSubmit, }: {
+    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'>;
 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, onValidSubmit) {
+export function useDefaultMobxFormHooks(presenter, value, { onValidFieldSubmit, onValidFormSubmit, }) {
     const model = useMemo(function () {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         return presenter.createModel(value);
@@ -17,13 +17,13 @@ export function useDefaultMobxFormHooks(presenter, value, onValidSubmit) {
     ]);
     const onFieldSubmit = useCallback(function (valuePath) {
         if (presenter.validateField(model, valuePath)) {
-            onValidSubmit?.(model, valuePath);
+            onValidFieldSubmit?.(model, valuePath);
         }
         return false;
     }, [
         presenter,
         model,
-        onValidSubmit,
+        onValidFieldSubmit,
     ]);
     const onFieldBlur = useCallback(function (path) {
         // work around potential loss of focus prior to state potentially invalidating change triggering
@@ -38,10 +38,20 @@ export function useDefaultMobxFormHooks(presenter, value, onValidSubmit) {
         presenter,
         model,
     ]);
+    const onFormSubmit = useCallback(function () {
+        if (presenter.validateAll(model)) {
+            onValidFormSubmit?.(model, model.value);
+        }
+    }, [
+        presenter,
+        model,
+        onValidFormSubmit,
+    ]);
     return {
         model,
         onFieldValueChange,
         onFieldSubmit,
         onFieldBlur,
+        onFormSubmit,
     };
 }

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

@@ -1,12 +1,8 @@
-import { numberType, object, stringType, } from '@strictly/define';
+import { list, numberType, object, stringType, } from '@strictly/define';
 import { subFormFieldAdapters, } from 'core/mobx/sub_form_field_adapters';
 import { UnreliableFieldConversionType } from 'types/field_converters';
-import { mockDeep } from 'vitest-mock-extended';
+import { mockDeep, mockReset, } from 'vitest-mock-extended';
 describe('subFormFieldAdapters', () => {
-    const mockedFieldAdapter1 = mockDeep();
-    const fieldAdapter1 = mockedFieldAdapter1;
-    const mockedFieldAdapter2 = mockDeep();
-    const fieldAdapter2 = mockedFieldAdapter2;
     describe('empty value', () => {
         const adapters = subFormFieldAdapters({}, '$.a', stringType);
         it('equals expected type', () => {
@@ -17,12 +13,19 @@ describe('subFormFieldAdapters', () => {
         });
     });
     describe('single adapter', () => {
+        const mockedFieldAdapter1 = mockDeep();
+        const fieldAdapter1 = mockedFieldAdapter1;
         const type = object().field('a', stringType);
-        const adapters = subFormFieldAdapters({
+        const subAdapters = {
             $: fieldAdapter1,
-        }, '$.a', type);
+        };
+        const adapters = subFormFieldAdapters(subAdapters, '$.a', type);
+        beforeEach(() => {
+            mockReset(mockedFieldAdapter1);
+        });
         it('equals expected type', () => {
-            // TODO toEqualTypeOf (seems to be a TS error)
+            // TODO toEqualTypeOf (cannot reason about revert optionality, seems to be a TS issue as they
+            // are both optional AFAICT)
             expectTypeOf(adapters).toMatchTypeOf();
         });
         it('equals expected value', () => {
@@ -58,12 +61,20 @@ describe('subFormFieldAdapters', () => {
         });
     });
     describe('multiple adapters', () => {
+        const mockedFieldAdapter1 = mockDeep();
+        const fieldAdapter1 = mockedFieldAdapter1;
+        const mockedFieldAdapter2 = mockDeep();
+        const fieldAdapter2 = mockedFieldAdapter2;
         const type = object()
             .field('a', object().field('x', stringType).field('y', numberType));
         const adapters = subFormFieldAdapters({
             '$.x': fieldAdapter1,
             '$.y': fieldAdapter2,
         }, '$.a', type);
+        beforeEach(() => {
+            mockReset(mockedFieldAdapter1);
+            mockReset(mockedFieldAdapter2);
+        });
         it('equals expected type', () => {
             // TODO toEqualTypeOf (seems to be a TS error)
             expectTypeOf(adapters).toMatchTypeOf();
@@ -106,4 +117,40 @@ describe('subFormFieldAdapters', () => {
             });
         });
     });
+    describe('list adapter', () => {
+        const mockedFieldAdapter1 = mockDeep();
+        const fieldAdapter1 = mockedFieldAdapter1;
+        const type = list(stringType);
+        const subAdapters = {
+            $: fieldAdapter1,
+        };
+        const adapters = subFormFieldAdapters(subAdapters, '$.*', type);
+        beforeEach(() => {
+            mockReset(mockedFieldAdapter1);
+        });
+        it('equals expected type', () => {
+            // TODO toEqualTypeOf (seems to be a TS error)
+            expectTypeOf(adapters).toMatchTypeOf();
+        });
+        it('equals expected value', () => {
+            expect(adapters).toEqual({
+                '$.*': expect.anything(),
+            });
+        });
+        describe('calls convert with correct paths and values', () => {
+            const subContext = 'a';
+            const context = [subContext];
+            it('calls $.*', () => {
+                const mockedReturnedValue = {
+                    value: false,
+                    readonly: false,
+                    required: false,
+                };
+                mockedFieldAdapter1.convert.mockReturnValue(mockedReturnedValue);
+                const returnedValue = adapters['$.*'].convert('b', '$.0', context);
+                expect(fieldAdapter1.convert).toHaveBeenCalledWith('b', '$', subContext);
+                expect(returnedValue).toEqual(mockedReturnedValue);
+            });
+        });
+    });
 });

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 ErrorOfFieldAdapter, type FieldAdapter, type FromOfFieldAdapter, type ToOfFieldAdapter } from './field_adapter';
-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;
+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>, P extends string, ContextType extends Type>(subAdapters: SubAdapters, prefix: P, contextType: ContextType): SubFormFieldAdapters<SubAdapters, P, 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<ContextType>>;
 export {};

package/.out/core/mobx/sub_form_field_adapters.js

@@ -1,29 +1,32 @@
 import { flattenValuesOfType, } from '@strictly/define';
-export function subFormFieldAdapters(subAdapters, prefix, contextType) {
+export function subFormFieldAdapters(subAdapters, parentTypePath, contextType) {
+    // assume the number of '.' in the type path will correspond to the number of '.' in the value path
+    const dotCount = parentTypePath.split('.').length;
     function getSubValuePathAndContext(valuePath, context) {
-        const subValuePath = valuePath.replace(prefix, '$');
-        const subContext = flattenValuesOfType(contextType, context)[prefix];
+        const parentValuePath = valuePath.split('.').slice(0, dotCount).join('.');
+        const subValuePath = valuePath.replace(parentValuePath, '$');
+        const subContext = flattenValuesOfType(contextType, context)[parentValuePath];
         return [
             subValuePath,
             subContext,
         ];
     }
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return Object.entries(subAdapters).reduce((acc, [subKey, subValue,]) => {
-        const key = subKey.replace('$', prefix);
+    return Object.entries(subAdapters).reduce((acc, [subTypePath, subAdapter,]) => {
+        const typePath = subTypePath.replace('$', parentTypePath);
         // adapt field adapter with new path and context
         const adaptedAdapter = {
             convert: (from, valuePath, context) => {
-                return subValue.convert(from, ...getSubValuePathAndContext(valuePath, context));
+                return subAdapter.convert(from, ...getSubValuePathAndContext(valuePath, context));
             },
             create: (valuePath, context) => {
-                return subValue.create(...getSubValuePathAndContext(valuePath, context));
+                return subAdapter.create(...getSubValuePathAndContext(valuePath, context));
             },
-            revert: subValue.revert && ((from, valuePath, context) => {
-                return subValue.revert(from, ...getSubValuePathAndContext(valuePath, context));
+            revert: subAdapter.revert && ((from, valuePath, context) => {
+                return subAdapter.revert(from, ...getSubValuePathAndContext(valuePath, context));
             }),
         };
-        acc[key] = adaptedAdapter;
+        acc[typePath] = adaptedAdapter;
         return acc;
     }, {});
 }

package/.out/field_converters/nullable_to_boolean_converter.d.ts

@@ -1,12 +1,12 @@
 import { type ReadonlyTypeOfType, type Type, type ValueOfType } from '@strictly/define';
 import { type AnnotatedFieldConversion, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion } from 'types/field_converters';
-export declare class NullableToBooleanConverter<T extends Type, E, ValuePath extends string, Context, NullType extends null | undefined> implements TwoWayFieldConverterWithValueFactory<ValueOfType<ReadonlyTypeOfType<T>> | NullType, boolean, E, ValuePath, Context> {
+export declare class NullableToBooleanConverter<T extends Type, ValuePath extends string, Context, NullType extends null | undefined> implements TwoWayFieldConverterWithValueFactory<ValueOfType<ReadonlyTypeOfType<T>> | NullType, boolean, never, ValuePath, Context> {
     private readonly typeDef;
     private readonly prototype;
     private readonly nullType;
     readonly defaultValue: ValueOfType<ReadonlyTypeOfType<T>> | NullType;
     constructor(typeDef: T, prototype: ValueOfType<ReadonlyTypeOfType<T>>, nullType: NullType, defaultToNull?: boolean);
     convert(from: ValueOfType<ReadonlyTypeOfType<T>> | NullType): AnnotatedFieldConversion<boolean>;
-    revert(from: boolean): UnreliableFieldConversion<ValueOfType<ReadonlyTypeOfType<T>> | NullType, E>;
+    revert(from: boolean): UnreliableFieldConversion<ValueOfType<ReadonlyTypeOfType<T>> | NullType, never>;
     create(): ValueOfType<ReadonlyTypeOfType<T>> | NullType;
 }

package/.out/mantine/create_checkbox.js

@@ -34,5 +34,6 @@ export function createCheckbox(valuePath, Checkbox) {
             onKeyUp,
         };
     };
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return createUnsafePartialObserverComponent(Checkbox, propSource, ['ErrorRenderer']);
 }

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

@@ -4,4 +4,4 @@ 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>;
+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>;

package/.out/mantine/create_fields_view.js

@@ -31,9 +31,9 @@ export function createFieldsView(valuePath, FieldsView, observableProps) {
                 acc[toSubKey(fieldKey)] = fieldValue;
             }
             return acc;
-        }, {});
-        return (_jsx(FieldsView, { ...props, 
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            fields: subFields, onFieldBlur: onFieldBlur, onFieldFocus: onFieldFocus, onFieldSubmit: onFieldSubmit, onFieldValueChange: onFieldValueChange }));
+        }, 
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        {});
+        return (_jsx(FieldsView, { ...props, fields: subFields, onFieldBlur: onFieldBlur, onFieldFocus: onFieldFocus, onFieldSubmit: onFieldSubmit, onFieldValueChange: onFieldValueChange }));
     });
 }

package/.out/mantine/create_form.d.ts

@@ -4,4 +4,4 @@ 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 declare 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>;
+export declare 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, never>;

package/.out/mantine/create_list.d.ts

@@ -10,7 +10,7 @@ export type SuppliedListProps<Value = any, ListPath extends string = string> = {
 };
 export declare function createList<F extends Fields, K extends keyof ListFieldsOfFields<F>, Props extends SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>> & {
     children: (valuePath: `${K}.${number}`, value: ElementOfArray<ValueTypeOfField<F[K]>>, index: number) => React.ReactNode;
-}>(this: MantineForm<F>, valuePath: K, List: ComponentType<Props>): MantineFieldComponent<SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>>, Props>;
+}>(this: MantineForm<F>, valuePath: K, List: ComponentType<Props>): MantineFieldComponent<SuppliedListProps<ElementOfArray<ValueTypeOfField<F[K]>>>, Props, never>;
 export declare function DefaultList<Value, ListPath extends string>({ values, listPath, children, }: SuppliedListProps<Value, ListPath> & {
     children: (valuePath: `${ListPath}.${number}`, value: Value, index: number) => React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

package/.out/mantine/create_pill.d.ts

@@ -4,4 +4,4 @@ import { type AllFieldsOfFields } from 'types/all_fields_of_fields';
 import { type Fields } from 'types/field';
 import { type MantineFieldComponent, type MantineForm } from './types';
 export type SuppliedPillProps = Pick<PillProps, 'children' | 'disabled'>;
-export declare function createPill<F extends Fields, K extends keyof AllFieldsOfFields<F>, Props extends SuppliedPillProps>(this: MantineForm<F>, valuePath: K, Pill: ComponentType<Props>): MantineFieldComponent<SuppliedPillProps, Props>;
+export declare function createPill<F extends Fields, K extends keyof AllFieldsOfFields<F>, Props extends SuppliedPillProps>(this: MantineForm<F>, valuePath: K, Pill: ComponentType<Props>): MantineFieldComponent<SuppliedPillProps, Props, never>;

package/.out/mantine/create_radio.d.ts

@@ -5,4 +5,4 @@ import { type StringFieldsOfFields } from 'types/string_fields_of_fields';
 import { type ValueTypeOfField } from 'types/value_type_of_field';
 import { type MantineFieldComponent, type MantineForm } from './types';
 export type SuppliedRadioProps = Pick<RadioProps, 'value' | 'disabled'>;
-export declare function createRadio<F extends Fields, K extends keyof StringFieldsOfFields<F>, Props extends SuppliedRadioProps>(this: MantineForm<F>, valuePath: K, value: ValueTypeOfField<F[K]>, Radio: ComponentType<Props>): MantineFieldComponent<SuppliedRadioProps, Props>;
+export declare function createRadio<F extends Fields, K extends keyof StringFieldsOfFields<F>, Props extends SuppliedRadioProps>(this: MantineForm<F>, valuePath: K, value: ValueTypeOfField<F[K]>, Radio: ComponentType<Props>): MantineFieldComponent<SuppliedRadioProps, Props, never>;

package/.out/mantine/create_radio_group.js

@@ -31,5 +31,6 @@ export function createRadioGroup(valuePath, RadioGroup) {
             onKeyUp,
         };
     };
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return createUnsafePartialObserverComponent(RadioGroup, propSource, ['ErrorRenderer']);
 }

package/.out/mantine/create_text_input.js

@@ -19,9 +19,13 @@ export function createTextInput(valuePath, TextInput) {
         }
     };
     const propSource = ({ ErrorRenderer = DefaultErrorRenderer, }) => {
-        const { readonly, required, value, error,
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-         } = this.fields[valuePath];
+        const field = this.fields[valuePath];
+        if (field == null) {
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            throw new Error(`invalid field ${valuePath}`);
+        }
+        const { readonly, required, value, error, } = field;
         return {
             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
             name: valuePath,
@@ -35,5 +39,6 @@ export function createTextInput(valuePath, TextInput) {
             onKeyUp,
         };
     };
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return createUnsafePartialObserverComponent(TextInput, propSource, ['ErrorRenderer']);
 }

package/.out/mantine/create_value_input.js

@@ -35,5 +35,6 @@ export function createValueInput(valuePath, ValueInput) {
             onKeyUp,
         };
     };
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return createUnsafePartialObserverComponent(ValueInput, propSource, ['ErrorRenderer']);
 }

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

@@ -3,4 +3,4 @@ export type ErrorRendererProps<E> = {
     error: E;
 };
 export type ErrorRenderer<E = any> = ComponentType<ErrorRendererProps<E>>;
-export declare function DefaultErrorRenderer({ error, }: ErrorRendererProps<any>): any;
+export declare function DefaultErrorRenderer({ error, }: ErrorRendererProps<any>): string;

package/.out/mantine/error_renderer.js

@@ -1,5 +1,5 @@
 export function DefaultErrorRenderer({ error,
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
  }) {
-    return error;
+    return JSON.stringify(error);
 }

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

@@ -38,20 +38,20 @@ declare class MantineFormImpl<F extends Fields> implements MantineForm<F> {
     onFieldBlur: ((this: void, key: keyof F) => void) | undefined;
     onFieldSubmit: ((this: void, key: keyof F) => boolean | void) | undefined;
     constructor(fields: F);
-    textInput<K extends keyof StringFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedTextInputProps, TextInputProps>;
-    textInput<K extends keyof StringFieldsOfFields<F>, P extends SuppliedTextInputProps<any>>(valuePath: K, TextInput?: ComponentType<P>): MantineFieldComponent<SuppliedTextInputProps, P>;
+    textInput<K extends keyof StringFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedTextInputProps, TextInputProps, ErrorOfField<F[K]>>;
+    textInput<K extends keyof StringFieldsOfFields<F>, P extends SuppliedTextInputProps<any>>(valuePath: K, TextInput?: ComponentType<P>): MantineFieldComponent<SuppliedTextInputProps, P, ErrorOfField<F[K]>>;
     valueInput<K extends keyof AllFieldsOfFields<F>, P extends SuppliedValueInputProps<ValueTypeOfField<F[K]>, any>>(valuePath: K, ValueInput: ComponentType<P>): MantineFieldComponent<SuppliedValueInputProps<ValueTypeOfField<F[K]>>, P, ErrorOfField<F[K]>>;
     select<K extends keyof StringFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedTextInputProps, ComponentProps<typeof SimpleSelect>, ErrorOfField<F[K]>>;
-    checkbox<K extends keyof BooleanFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedCheckboxProps, CheckboxProps>;
+    checkbox<K extends keyof BooleanFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedCheckboxProps, CheckboxProps, ErrorOfField<F[K]>>;
     checkbox<K extends keyof BooleanFieldsOfFields<F>, P extends SuppliedCheckboxProps>(valuePath: K, Checkbox: ComponentType<P>): MantineFieldComponent<SuppliedCheckboxProps, P, ErrorOfField<F[K]>>;
-    radioGroup<K extends keyof StringFieldsOfFields<F>>(valuePath: K): MantineFieldComponent<SuppliedRadioGroupProps, RadioGroupProps>;
-    radioGroup<K extends keyof StringFieldsOfFields<F>, P extends SuppliedRadioGroupProps>(valuePath: K, RadioGroup: ComponentType<P>): MantineFieldComponent<SuppliedRadioGroupProps, P>;
+    radioGroup<K extends keyof StringFieldsOfFields<F>, P extends RadioGroupProps = RadioGroupProps>(valuePath: K): MantineFieldComponent<SuppliedRadioGroupProps, P, ErrorOfField<F[K]>>;
+    radioGroup<K extends keyof StringFieldsOfFields<F>, P extends SuppliedRadioGroupProps>(valuePath: K, RadioGroup: ComponentType<P>): MantineFieldComponent<SuppliedRadioGroupProps, P, ErrorOfField<F[K]>>;
     radio<K extends keyof StringFieldsOfFields<F>>(valuePath: K, value: ValueTypeOfField<F[K]>): MantineFieldComponent<SuppliedRadioProps, RadioProps, ErrorOfField<F[K]>>;
     radio<K extends keyof StringFieldsOfFields<F>, P extends SuppliedRadioProps>(valuePath: K, value: ValueTypeOfField<F[K]>, Radio: ComponentType<P>): MantineFieldComponent<SuppliedRadioProps, P, ErrorOfField<F[K]>>;
     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>>>;
-    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>;
+    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>;
+    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/specs/checkbox_hooks.stories.d.ts

@@ -1,12 +1,9 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 import { type FieldsViewProps } from 'core/props';
-import { type ErrorRenderer } from 'mantine/error_renderer';
 import { type Field } from 'types/field';
-declare function Component({ ErrorRenderer, ...props }: FieldsViewProps<{
+declare function Component({ ...props }: FieldsViewProps<{
     $: Field<boolean, string>;
-}> & {
-    ErrorRenderer?: ErrorRenderer;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta<typeof Component>;
 export default meta;
 type Story = StoryObj<typeof Component>;
@@ -15,4 +12,3 @@ export declare const On: Story;
 export declare const Required: Story;
 export declare const Disabled: Story;
 export declare const Error: Story;
-export declare const CustomError: Story;

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

@@ -2,7 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
 import { useMantineFormFields } from 'mantine/hooks';
 import { CHECKBOX_LABEL } from './checkbox_constants';
-function Component({ ErrorRenderer, ...props }) {
+function ErrorRenderer({ error }) {
+    return `Error ${error}`;
+}
+function Component({ ...props }) {
     const inputProps = useMantineFormFields(props);
     const CheckboxComponent = inputProps.checkbox('$');
     return (_jsx(CheckboxComponent, { ErrorRenderer: ErrorRenderer, label: CHECKBOX_LABEL }));
@@ -73,18 +76,3 @@ export const Error = {
         },
     },
 };
-export const CustomError = {
-    args: {
-        fields: {
-            $: {
-                readonly: false,
-                required: false,
-                value: true,
-                error: 'error',
-            },
-        },
-        ErrorRenderer: function () {
-            return 'custom error';
-        },
-    },
-};

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

@@ -12,4 +12,4 @@ export declare const Empty: Story;
 export declare const Populated: Story;
 export declare const Required: Story;
 export declare const Disabled: Story;
-export declare const CustomError: Story;
+export declare const Errors: Story;

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

@@ -3,16 +3,19 @@ import { Button, Stack, } from '@mantine/core';
 import { action } from '@storybook/addon-actions';
 import { useMantineFormFields } from 'mantine/hooks';
 const onClick = action('some button clicked');
+function ErrorRenderer({ error }) {
+    return `error ${error}`;
+}
 function SubFieldsView(props) {
     const form = useMantineFormFields(props);
     const TextInput = form.textInput('$');
-    return (_jsxs(Stack, { children: [_jsx(TextInput, { label: 'sub fields view' }), _jsx(Button, { onClick: props.onClick, children: "Bonus Button" })] }));
+    return (_jsxs(Stack, { children: [_jsx(TextInput, { ErrorRenderer: ErrorRenderer, label: 'sub fields view' }), _jsx(Button, { onClick: props.onClick, children: "Bonus Button" })] }));
 }
 function Component(props) {
     const form = useMantineFormFields(props);
     const FieldsView = form.fieldsView('$.a', SubFieldsView);
     const TextInput = form.textInput('$');
-    return (_jsxs(Stack, { children: [_jsx(TextInput, { label: 'fields view' }), _jsx(FieldsView, { onClick: onClick })] }));
+    return (_jsxs(Stack, { children: [_jsx(TextInput, { ErrorRenderer: ErrorRenderer, label: 'fields view' }), _jsx(FieldsView, { onClick: onClick })] }));
 }
 const meta = {
     component: Component,
@@ -88,7 +91,7 @@ export const Disabled = {
         },
     },
 };
-export const CustomError = {
+export const Errors = {
     args: {
         fields: {
             $: {

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

@@ -2,8 +2,8 @@ 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<{
-    $: Field<string>;
-    '$.a': Field<number>;
+    $: Field<string, string>;
+    '$.a': Field<number, string>;
 }>): import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta<typeof Component>;
 export default meta;

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

@@ -4,6 +4,9 @@ import { action } from '@storybook/addon-actions';
 import { useMantineFormFields } from 'mantine/hooks';
 import { useCallback } from 'react';
 const onCancel = action('canceled');
+function ErrorRenderer({ error }) {
+    return `error ${error}`;
+}
 function SubForm({ value, onValueChange, onCancel, }) {
     const onChange = useCallback((v) => {
         onValueChange(Number.parseInt(`${v}`));
@@ -14,7 +17,7 @@ function Component(props) {
     const form = useMantineFormFields(props);
     const Form = form.form('$.a', SubForm);
     const TextInput = form.textInput('$');
-    return (_jsxs(Stack, { children: [_jsx(TextInput, { label: 'fields view' }), _jsx(Form, { onCancel: onCancel })] }));
+    return (_jsxs(Stack, { children: [_jsx(TextInput, { ErrorRenderer: ErrorRenderer, label: 'fields view' }), _jsx(Form, { onCancel: onCancel })] }));
 }
 const meta = {
     component: Component,

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

@@ -1,13 +1,10 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 import { type FieldsViewProps } from 'core/props';
-import { type ErrorRenderer } from 'mantine/error_renderer';
 import { type Field } from 'types/field';
 import { type RadioValue } from './radio_group_constants';
-declare function Component({ ErrorRenderer, ...props }: FieldsViewProps<{
+declare function Component({ ...props }: FieldsViewProps<{
     $: Field<RadioValue | null, string>;
-}> & {
-    ErrorRenderer?: ErrorRenderer;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta<typeof Component>;
 export default meta;
 type Story = StoryObj<typeof Component>;
@@ -16,4 +13,3 @@ export declare const Populated: Story;
 export declare const Required: Story;
 export declare const Disabled: Story;
 export declare const Error: Story;
-export declare const CustomError: Story;

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

@@ -3,13 +3,16 @@ import { Stack, } from '@mantine/core';
 import { action } from '@storybook/addon-actions';
 import { useMantineFormFields } from 'mantine/hooks';
 import { RADIO_GROUP_LABEL, RADIO_LABELS, RADIO_VALUES, } from './radio_group_constants';
-function Component({ ErrorRenderer, ...props }) {
+function ErrorRenderer({ error }) {
+    return `custom error ${error}`;
+}
+function Component({ ...props }) {
     const form = useMantineFormFields(props);
     const RadioGroupComponent = form.radioGroup('$');
     return (_jsx(RadioGroupComponent, { ErrorRenderer: ErrorRenderer, label: RADIO_GROUP_LABEL, children: _jsx(Stack, { children: RADIO_VALUES.map(function (value) {
                 const label = RADIO_LABELS[value];
                 const RadioComponent = form.radio('$', value);
-                return (_jsx(RadioComponent, { label: label }, label));
+                return (_jsx(RadioComponent, { ErrorRenderer: ErrorRenderer, label: label }, label));
             }) }) }));
 }
 const meta = {
@@ -78,18 +81,3 @@ export const Error = {
         },
     },
 };
-export const CustomError = {
-    args: {
-        fields: {
-            $: {
-                readonly: false,
-                required: false,
-                value: '2',
-                error: 'error',
-            },
-        },
-        ErrorRenderer: function () {
-            return 'custom error';
-        },
-    },
-};

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

@@ -1,12 +1,9 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 import { type FieldsViewProps } from 'core/props';
-import { type ErrorRenderer } from 'mantine/error_renderer';
 import { type Field } from 'types/field';
-declare function Component({ ErrorRenderer, ...props }: FieldsViewProps<{
+declare function Component({ ...props }: FieldsViewProps<{
     $: Field<string | null, string>;
-}> & {
-    ErrorRenderer?: ErrorRenderer;
-}): import("react/jsx-runtime").JSX.Element;
+}>): import("react/jsx-runtime").JSX.Element;
 declare const meta: Meta<typeof Component>;
 export default meta;
 type Story = StoryObj<typeof Component>;
@@ -15,4 +12,3 @@ export declare const PopulatedSelect: Story;
 export declare const InvalidSelect: Story;
 export declare const RequiredSelect: Story;
 export declare const DisabledSelect: Story;
-export declare const CustomErrorSelect: Story;

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

@@ -2,7 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
 import { useMantineFormFields } from 'mantine/hooks';
 import { SELECT_LABEL } from './select_hooks_constant';
-function Component({ ErrorRenderer, ...props }) {
+function ErrorRenderer({ error }) {
+    return `Error ${error}`;
+}
+function Component({ ...props }) {
     const form = useMantineFormFields(props);
     const SelectComponent = form.select('$');
     return (_jsx(SelectComponent, { ErrorRenderer: ErrorRenderer, data: [
@@ -77,18 +80,3 @@ export const DisabledSelect = {
         },
     },
 };
-export const CustomErrorSelect = {
-    args: {
-        fields: {
-            $: {
-                readonly: false,
-                required: true,
-                value: 'c',
-                error: 'error',
-            },
-        },
-        ErrorRenderer: function () {
-            return 'custom error';
-        },
-    },
-};