@strictly/react-form 0.0.5 → 0.0.7

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

@@ -0,0 +1,10 @@
+import { type ReadonlyTypeOfType, type ValueOfType } from '@strictly/define';
+import { type FieldsViewProps } from 'core/props';
+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): {
+    model: ModelOfPresenter<P>;
+} & Omit<FieldsViewProps<ModelOfPresenter<P>['fields']>, 'fields'>;
+export {};

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

@@ -0,0 +1,47 @@
+import { useCallback, useMemo, } from 'react';
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function useDefaultMobxFormHooks(presenter, value, onValidSubmit) {
+    const model = useMemo(function () {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        return presenter.createModel(value);
+    }, [
+        presenter,
+        value,
+    ]);
+    const onFieldValueChange = useCallback(function (path, value) {
+        presenter.clearFieldError(model, path);
+        presenter.setFieldValue(model, path, value);
+    }, [
+        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) {
+        // work around potential loss of focus prior to state potentially invalidating change triggering
+        // (e.g. changing a discriminator)
+        // TODO debounce?
+        setTimeout(function () {
+            if (presenter.isValuePathActive(model, path)) {
+                presenter.validateField(model, path);
+            }
+        }, 100);
+    }, [
+        presenter,
+        model,
+    ]);
+    return {
+        model,
+        onFieldValueChange,
+        onFieldSubmit,
+        onFieldBlur,
+    };
+}

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

@@ -21,18 +21,16 @@ describe('all', function () {
     describe('FlattenedTypePathsToConvertersOf', function () {
         describe('record', function () {
             const typeDef = record(numberType);
-            let t;
             it('equals expected type', function () {
-                expectTypeOf(t).toEqualTypeOf();
+                expectTypeOf().toEqualTypeOf();
             });
         });
         describe('object', function () {
             const typeDef = object()
                 .field('x', stringType)
                 .field('y', booleanType);
-            let t;
             it('equals expected type', function () {
-                expectTypeOf(t).toEqualTypeOf();
+                expectTypeOf().toEqualTypeOf();
             });
             it('matches representative adapters', function () {
                 expectTypeOf().toMatchTypeOf();
@@ -50,9 +48,8 @@ describe('all', function () {
                 '$.b': '$.y',
                 '$.c': '$.z',
             };
-            let t;
             it('equals expected type', function () {
-                expectTypeOf(t).toEqualTypeOf();
+                expectTypeOf().toEqualTypeOf();
             });
         });
     });

package/.out/core/mobx/specs/{merge_field_adapters_with_two_way_converter.js → merge_field_adapters_with_two_way_converter.tests.js}

@@ -9,9 +9,8 @@ const error3 = Symbol();
 const error4 = Symbol();
 const context = Symbol();
 describe('MergedOfFieldAdapterWithTwoWayConverter', function () {
-    let m;
     it('merges the errors', function () {
-        expectTypeOf().toEqualTypeOf(m);
+        expectTypeOf().toEqualTypeOf();
     });
 });
 const originalIntegerAdapter = identityAdapter(0);
@@ -69,20 +68,20 @@ describe('mergeFieldAdaptersWithTwoWayConverter', function () {
                 beforeEach(function () {
                     result = merged.booleanAdapter.revert(true, 'booleanAdapter', context);
                 });
-            });
-            it('returns the same value on revert', function () {
-                expect(result).toEqual(expect.objectContaining({
-                    value: true,
-                    type: UnreliableFieldConversionType.Success,
-                }));
-            });
-            it('calls the mocked converter', function () {
-                expect(converter.revert).toHaveBeenCalledOnce();
-                expect(converter.revert).toHaveBeenCalledWith(true, 'booleanAdapter', context);
-            });
-            it('calls the mocked adapter', function () {
-                expect(booleanAdapter.revert).toHaveBeenCalledOnce();
-                expect(booleanAdapter.revert).toHaveBeenCalledWith(true, 'booleanAdapter', context);
+                it('returns the same value on revert', function () {
+                    expect(result).toEqual(expect.objectContaining({
+                        value: true,
+                        type: UnreliableFieldConversionType.Success,
+                    }));
+                });
+                it('calls the mocked converter', function () {
+                    expect(converter.revert).toHaveBeenCalledOnce();
+                    expect(converter.revert).toHaveBeenCalledWith(true, 'booleanAdapter', context);
+                });
+                it('calls the mocked adapter', function () {
+                    expect(booleanAdapter.revert).toHaveBeenCalledOnce();
+                    expect(booleanAdapter.revert).toHaveBeenCalledWith(true, 'booleanAdapter', context);
+                });
             });
         });
     });

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

@@ -1,10 +1,14 @@
+import { 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';
 describe('subFormFieldAdapters', () => {
-    const fieldAdapter1 = mockDeep();
-    const fieldAdapter2 = mockDeep();
+    const mockedFieldAdapter1 = mockDeep();
+    const fieldAdapter1 = mockedFieldAdapter1;
+    const mockedFieldAdapter2 = mockDeep();
+    const fieldAdapter2 = mockedFieldAdapter2;
     describe('empty value', () => {
-        const adapters = subFormFieldAdapters({}, '$.a');
+        const adapters = subFormFieldAdapters({}, '$.a', stringType);
         it('equals expected type', () => {
             expectTypeOf(adapters).toEqualTypeOf();
         });
@@ -13,28 +17,92 @@ describe('subFormFieldAdapters', () => {
         });
     });
     describe('single adapter', () => {
+        const type = object().field('a', stringType);
         const adapters = subFormFieldAdapters({
             $: fieldAdapter1,
-        }, '$.a');
+        }, '$.a', type);
         it('equals expected type', () => {
-            expectTypeOf(adapters).toEqualTypeOf();
+            // TODO toEqualTypeOf (seems to be a TS error)
+            expectTypeOf(adapters).toMatchTypeOf();
         });
         it('equals expected value', () => {
-            expect(adapters).toEqual({ '$.a': fieldAdapter1 });
+            expect(adapters).toEqual({ '$.a': expect.anything() });
+        });
+        it('calls convert with the correct paths and values', () => {
+            const mockedReturnedValue = {
+                value: false,
+                required: false,
+                readonly: false,
+            };
+            mockedFieldAdapter1.convert.mockReturnValue(mockedReturnedValue);
+            const returnedValue = adapters['$.a'].convert('x', '$.a', { a: 'y' });
+            expect(fieldAdapter1.convert).toHaveBeenCalledWith('x', '$', 'y');
+            expect(returnedValue).toEqual(mockedReturnedValue);
+        });
+        it('calls revert with the correct paths and values', () => {
+            const mockedReturnedValue = {
+                type: UnreliableFieldConversionType.Success,
+                value: 'ok',
+            };
+            mockedFieldAdapter1.revert.mockReturnValue(mockedReturnedValue);
+            const returnedValue = adapters['$.a'].revert?.(true, '$.a', { a: 'y' });
+            expect(fieldAdapter1.revert).toHaveBeenCalledWith(true, '$', 'y');
+            expect(returnedValue).toEqual(mockedReturnedValue);
+        });
+        it('calls create with the correct paths and values', () => {
+            const mockedReturnedValue = 'x';
+            mockedFieldAdapter1.create.mockReturnValue(mockedReturnedValue);
+            const returnedValue = adapters['$.a'].create('$.a', { a: 'y' });
+            expect(fieldAdapter1.create).toHaveBeenCalledWith('$', 'y');
+            expect(returnedValue).toEqual(mockedReturnedValue);
         });
     });
     describe('multiple adapters', () => {
+        const type = object()
+            .field('a', object().field('x', stringType).field('y', numberType));
         const adapters = subFormFieldAdapters({
             '$.x': fieldAdapter1,
             '$.y': fieldAdapter2,
-        }, '$.a');
+        }, '$.a', type);
         it('equals expected type', () => {
-            expectTypeOf(adapters).toEqualTypeOf();
+            // TODO toEqualTypeOf (seems to be a TS error)
+            expectTypeOf(adapters).toMatchTypeOf();
         });
         it('equals expected value', () => {
             expect(adapters).toEqual({
-                '$.a.x': fieldAdapter1,
-                '$.a.y': fieldAdapter2,
+                '$.a.x': expect.anything(),
+                '$.a.y': expect.anything(),
+            });
+        });
+        describe('calls convert with correct paths and values', () => {
+            const subContext = {
+                x: 'a',
+                y: 1,
+            };
+            const context = {
+                a: subContext,
+            };
+            it('calls $.a.x', () => {
+                const mockedReturnedValue = {
+                    value: true,
+                    readonly: true,
+                    required: false,
+                };
+                mockedFieldAdapter1.convert.mockReturnValue(mockedReturnedValue);
+                const returnedValue = adapters['$.a.x'].convert('b', '$.a.x', context);
+                expect(fieldAdapter1.convert).toHaveBeenCalledWith('b', '$.x', subContext);
+                expect(returnedValue).toEqual(mockedReturnedValue);
+            });
+            it('calls $.a.y', () => {
+                const mockedReturnedValue = {
+                    value: false,
+                    readonly: false,
+                    required: false,
+                };
+                mockedFieldAdapter2.convert.mockReturnValue(mockedReturnedValue);
+                const returnedValue = adapters['$.a.y'].convert(2, '$.a.y', context);
+                expect(fieldAdapter2.convert).toHaveBeenCalledWith(2, '$.y', subContext);
+                expect(returnedValue).toEqual(mockedReturnedValue);
             });
         });
     });

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

@@ -1,7 +1,9 @@
 import { type StringConcatOf } from '@strictly/base';
-import { type FieldAdapter } from './field_adapter';
-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];
+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;
 };
-export declare function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, P extends string>(subAdapters: SubAdapters, prefix: P): SubFormFieldAdapters<SubAdapters, P>;
+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 {};

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

@@ -1,8 +1,29 @@
-export function subFormFieldAdapters(subAdapters, prefix) {
+import { flattenValuesOfType, } from '@strictly/define';
+export function subFormFieldAdapters(subAdapters, prefix, contextType) {
+    function getSubValuePathAndContext(valuePath, context) {
+        const subValuePath = valuePath.replace(prefix, '$');
+        const subContext = flattenValuesOfType(contextType, context)[prefix];
+        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);
-        acc[key] = subValue;
+        // adapt field adapter with new path and context
+        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;
     }, {});
 }

package/.out/core/props.d.ts

@@ -1,12 +1,12 @@
 import { type Fields } from 'types/field';
-export type FormProps<F extends Fields> = {
+export 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;
 };
-export type EditorProps<O> = {
+export type FormProps<O> = {
     value: O;
     onValueChange: (value: O) => void;
 };

package/.out/index.d.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/.out/index.js

@@ -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/.out/mantine/create_fields_view.d.ts

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

package/.out/mantine/{create_sub_form.js → create_fields_view.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { observer } from 'mobx-react';
-export function createSubForm(valuePath, SubForm, observableProps) {
+export function createFieldsView(valuePath, FieldsView, observableProps) {
     function toKey(subKey) {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         return subKey.replace('$', valuePath);
@@ -22,7 +22,8 @@ export function createSubForm(valuePath, SubForm, observableProps) {
     function onFieldSubmit(subKey) {
         observableProps.onFieldSubmit?.(toKey(subKey));
     }
-    return observer(function () {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return 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
@@ -31,9 +32,7 @@ export function createSubForm(valuePath, SubForm, observableProps) {
             }
             return acc;
         }, {});
-        return (_jsx(SubForm
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        , { 
+        return (_jsx(FieldsView, { ...props, 
             // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
             fields: subFields, onFieldBlur: onFieldBlur, onFieldFocus: onFieldFocus, onFieldSubmit: onFieldSubmit, onFieldValueChange: onFieldValueChange }));
     });

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

@@ -0,0 +1,7 @@
+import { type FieldsViewProps, type FormProps } 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 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>;

package/.out/mantine/create_form.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react';
+import { useCallback, } from 'react';
+export function createForm(valuePath, Form, observableProps) {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    return observer((props) => {
+        const { value } = observableProps.fields[valuePath];
+        const onValueChange = useCallback((value) => {
+            observableProps.onFieldValueChange(valuePath, value);
+        }, []);
+        return (_jsx(Form, { ...props, onValueChange: onValueChange, value: value }));
+    });
+}

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

@@ -1,6 +1,6 @@
 import { type CheckboxProps, type PillProps, type RadioGroupProps, type RadioProps, type SelectProps, type TextInputProps } from '@mantine/core';
 import { type ElementOfArray } from '@strictly/base';
-import { type FormProps } from 'core/props';
+import { type FieldsViewProps, type FormProps } from 'core/props';
 import { type ComponentProps, type ComponentType } from 'react';
 import { type AllFieldsOfFields } from 'types/all_fields_of_fields';
 import { type BooleanFieldsOfFields } from 'types/boolean_fields_of_fields';
@@ -21,7 +21,7 @@ import { type MantineFieldComponent, type MantineForm } from './types';
 declare function SimpleSelect(props: SelectProps & {
     onChange?: (value: string | null) => void;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function useMantineForm<F extends Fields>({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }: FormProps<F>): MantineFormImpl<F>;
+export 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;
@@ -30,7 +30,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;
@@ -50,6 +51,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>;
     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>;
 }
 export {};

package/.out/mantine/hooks.js

@@ -4,17 +4,18 @@ 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 { createForm } from './create_form';
 import { createList, DefaultList, } from './create_list';
 import { createPill, } from './create_pill';
 import { createRadio, } from './create_radio';
 import { createRadioGroup, } from './create_radio_group';
-import { createSubForm } from './create_sub_form';
 import { createTextInput, } from './create_text_input';
 import { createValueInput, } from './create_value_input';
 function SimpleSelect(props) {
     return _jsx(Select, { ...props });
 }
-export function useMantineForm({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }) {
+export function useMantineFormFields({ onFieldValueChange, onFieldBlur, onFieldFocus, onFieldSubmit, fields, }) {
     const form = useMemo(function () {
         return new MantineFormImpl(fields);
     }, 
@@ -63,7 +64,8 @@ class MantineFormImpl {
     radioCache = new Cache(createRadio.bind(this));
     pillCache = new Cache(createPill.bind(this));
     listCache = new Cache(createList.bind(this));
-    subFormCache = new Cache(createSubForm.bind(this));
+    fieldsViewCache = new Cache(createFieldsView.bind(this));
+    formCache = new Cache(createForm.bind(this));
     @observable.ref
     accessor fields;
     onFieldValueChange;
@@ -129,11 +131,19 @@ class MantineFormImpl {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         return this.listCache.retrieveOrCreate(valuePath, DefaultList);
     }
-    // TODO have the returned component take any non-overlapping props as props
-    subForm(valuePath, SubForm) {
-        return this.subFormCache.retrieveOrCreate(valuePath, 
+    fieldsView(valuePath, FieldsView) {
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        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) {
+        // strip props from component since we lose information in the cache
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        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, this);
+        Form, this);
     }
 }

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

@@ -1,8 +1,8 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { type FormProps } from 'core/props';
+import { type FieldsViewProps } from 'core/props';
 import { type ErrorRenderer } from 'mantine/error_renderer';
 import { type Field } from 'types/field';
-declare function Component({ ErrorRenderer, ...props }: FormProps<{
+declare function Component({ ErrorRenderer, ...props }: FieldsViewProps<{
     $: Field<boolean, string>;
 }> & {
     ErrorRenderer?: ErrorRenderer;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { action } from '@storybook/addon-actions';
-import { useMantineForm } from 'mantine/hooks';
+import { useMantineFormFields } from 'mantine/hooks';
 import { CHECKBOX_LABEL } from './checkbox_constants';
 function Component({ ErrorRenderer, ...props }) {
-    const inputProps = useMantineForm(props);
+    const inputProps = useMantineFormFields(props);
     const CheckboxComponent = inputProps.checkbox('$');
     return (_jsx(CheckboxComponent, { ErrorRenderer: ErrorRenderer, label: CHECKBOX_LABEL }));
 }

package/.out/mantine/specs/{sub_form_hooks.stories.d.ts → fields_view_hooks.stories.d.ts}

@@ -1,7 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { type FormProps } from 'core/props';
+import { type FieldsViewProps } from 'core/props';
 import { type Field } from 'types/field';
-declare function Component(props: FormProps<{
+declare function Component(props: FieldsViewProps<{
     $: Field<string, string>;
     '$.a': Field<string, string>;
 }>): import("react/jsx-runtime").JSX.Element;

package/.out/mantine/specs/{sub_form_hooks.stories.js → fields_view_hooks.stories.js}

@@ -1,17 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, } from '@mantine/core';
+import { Button, Stack, } from '@mantine/core';
 import { action } from '@storybook/addon-actions';
-import { useMantineForm } from 'mantine/hooks';
-function SubFormImpl(props) {
-    const form = useMantineForm(props);
+import { useMantineFormFields } from 'mantine/hooks';
+const onClick = action('some button clicked');
+function SubFieldsView(props) {
+    const form = useMantineFormFields(props);
     const TextInput = form.textInput('$');
-    return _jsx(TextInput, { label: 'sub form' });
+    return (_jsxs(Stack, { children: [_jsx(TextInput, { label: 'sub fields view' }), _jsx(Button, { onClick: props.onClick, children: "Bonus Button" })] }));
 }
 function Component(props) {
-    const form = useMantineForm(props);
-    const SubForm = form.subForm('$.a', SubFormImpl);
+    const form = useMantineFormFields(props);
+    const FieldsView = form.fieldsView('$.a', SubFieldsView);
     const TextInput = form.textInput('$');
-    return (_jsxs(Stack, { children: [_jsx(TextInput, { label: 'form' }), _jsx(SubForm, {})] }));
+    return (_jsxs(Stack, { children: [_jsx(TextInput, { label: 'fields view' }), _jsx(FieldsView, { onClick: onClick })] }));
 }
 const meta = {
     component: Component,

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,12 @@
+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 * as stories from './fields_view_hooks.stories';
+const composedStories = composeStories(stories);
+describe('field view hooks', function () {
+    it.each(toArray(composedStories))('renders %s', function (_name, Story) {
+        const wrapper = render(_jsx(Story, {}));
+        expect(wrapper.container).toMatchSnapshot();
+    });
+});

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

@@ -0,0 +1,12 @@
+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>;
+}>): import("react/jsx-runtime").JSX.Element;
+declare const meta: Meta<typeof Component>;
+export default meta;
+type Story = StoryObj<typeof Component>;
+export declare const Empty: Story;
+export declare const Populated: Story;