@strictly/react-form 0.0.12 → 0.0.14

package/dist/index.d.ts

@@ -50,6 +50,7 @@ type FromOfFieldAdapter<C extends FieldAdapter> = C extends FieldAdapter<infer F
 type ToOfFieldAdapter<C extends FieldAdapter> = C extends FieldAdapter<infer _F, infer To> ? To : never;
 type ErrorOfFieldAdapter<C extends FieldAdapter> = C extends FieldAdapter<infer _From, infer _To, infer E> ? NonNullable<E> : never;
 type ValuePathOfFieldAdapter<C extends FieldAdapter> = C extends FieldAdapter<infer _From, infer _To, infer _E, infer ValuePath> ? ValuePath : never;
+type ContextOfFieldAdapter<F extends FieldAdapter> = F extends FieldAdapter<infer _From, infer _To, infer _E, infer _P, infer Context> ? Context : never;
 
 declare class FieldAdapterBuilder<From, To, E, ValuePath extends string, Context> {
     readonly convert: AnnotatedFieldConverter<From, To, ValuePath, Context>;
@@ -117,7 +118,7 @@ type FlattenedErrors<ValuePathsToAdapters extends Readonly<Record<string, FieldA
 type ValuePathsToAdaptersOf<TypePathsToAdapters extends Partial<Readonly<Record<string, FieldAdapter>>>, ValuePathsToTypePaths extends Readonly<Record<string, string>>> = keyof TypePathsToAdapters extends ValueOf<ValuePathsToTypePaths> ? {
     readonly [K in keyof ValuePathsToTypePaths as unknown extends TypePathsToAdapters[ValuePathsToTypePaths[K]] ? never : K]: NonNullable<TypePathsToAdapters[ValuePathsToTypePaths[K]]>;
 } : never;
-declare class 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>> {
+declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readonly<Record<string, string>>, TypePathsToAdapters extends FlattenedTypePathsToAdaptersOf<FlattenedValuesOfType<T, '*'>, ContextType>, ContextType = {}, ValuePathsToAdapters extends ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths> = ValuePathsToAdaptersOf<TypePathsToAdapters, ValueToTypePaths>> {
     readonly type: T;
     protected readonly adapters: TypePathsToAdapters;
     accessor value: MobxValueOfType<T>;
@@ -125,6 +126,8 @@ declare class FormModel<T extends Type, ValueToTypePaths extends Readonly<Record
     accessor errors: FlattenedErrors<ValuePathsToAdapters>;
     private readonly flattenedTypeDefs;
     constructor(type: T, value: ValueOfType<ReadonlyTypeOfType<T>>, adapters: TypePathsToAdapters);
+    get context(): ContextType;
+    protected abstract toContext(value: ValueOfType<ReadonlyTypeOfType<T>>): ContextType;
     get fields(): SimplifyDeep<FlattenedConvertedFieldsOf<ValuePathsToAdapters>>;
     private get knownFields();
     private maybeSynthesizeFieldByValuePath;
@@ -150,12 +153,12 @@ declare class FormModel<T extends Type, ValueToTypePaths extends Readonly<Record
 /**
  * Used to extract the supported value paths from a presenter
  */
-type ValuePathsOfModel<Presenter extends FormModel<any, any, any, any>> = Presenter extends FormModel<infer _1, infer _2, infer _3, infer ValuePathsToAdapters> ? keyof ValuePathsToAdapters : never;
+type ValuePathsOfModel<Model extends FormModel<any, any, any, any, any>> = Model extends FormModel<infer _1, infer _2, infer _3, infer _4, infer ValuePathsToAdapters> ? keyof ValuePathsToAdapters : never;
 /**
  * Used to extract the render type (so the value that is passed to the view) of a given value path
  * from a presenter
  */
-type ToValueOfModelValuePath<Presenter extends FormModel<any, any, any, any>, K extends ValuePathsOfModel<Presenter>> = Presenter extends FormModel<infer _1, infer _2, infer _3, infer ValuePathsToAdapters> ? ToOfFieldAdapter<ValuePathsToAdapters[K]> : never;
+type ToValueOfModelValuePath<Model extends FormModel<any, any, any, any, any>, K extends ValuePathsOfModel<Model>> = Model extends FormModel<infer _1, infer _2, infer _3, infer _4, infer ValuePathsToAdapters> ? ToOfFieldAdapter<ValuePathsToAdapters[K]> : never;
 /**
  * Extracts the form fields from the presenter. The recommended way is to
  * define the form fields explicitly and use that type to enforce the types
@@ -163,10 +166,10 @@ type ToValueOfModelValuePath<Presenter extends FormModel<any, any, any, any>, K
  * is less typing, albeit at the cost of potentially getting type errors
  * reported a long way away from the source
  */
-type FormFieldsOfModel<Presenter extends FormModel<any, any, any, any>> = Presenter extends FormModel<infer _1, infer _2, infer _3, infer ValuePathsToAdapters> ? FlattenedConvertedFieldsOf<ValuePathsToAdapters> : never;
+type FormFieldsOfModel<Model extends FormModel<any, any, any, any, any>> = Model extends FormModel<infer _1, infer _2, infer _3, infer _4, infer ValuePathsToAdapters> ? FlattenedConvertedFieldsOf<ValuePathsToAdapters> : never;
 
-type ValueOfModel<M extends FormModel<any, any, any, any>> = M extends FormModel<infer T, any, any, any> ? ValueOfType<ReadonlyTypeOfType<T>> : never;
-declare function useDefaultMobxFormHooks<M extends FormModel<any, any, any, any>, F extends FormFieldsOfModel<M> = FormFieldsOfModel<M>>(model: M, { onValidFieldSubmit, onValidFormSubmit, }?: {
+type ValueOfModel<M extends FormModel<any, any, any, any, any>> = M extends FormModel<infer T, any, any, any, any> ? ValueOfType<ReadonlyTypeOfType<T>> : never;
+declare function useDefaultMobxFormHooks<M extends FormModel<any, any, any, any, any>, F extends FormFieldsOfModel<M> = FormFieldsOfModel<M>>(model: M, { onValidFieldSubmit, onValidFormSubmit, }?: {
     onValidFieldSubmit?: <Path extends ValuePathsOfModel<M>>(valuePath: Path) => void;
     onValidFormSubmit?: (value: ValueOfModel<M>) => void;
 }): {
@@ -178,7 +181,7 @@ declare function useDefaultMobxFormHooks<M extends FormModel<any, any, any, any>
 };
 
 type MergedOfFieldAdaptersWithTwoWayConverter<FieldAdapters extends Readonly<Record<string, FieldAdapter>>, E, Context> = {
-    [K in keyof FieldAdapters]: FieldAdapter<FromOfFieldAdapter<FieldAdapters[K]>, ToOfFieldAdapter<FieldAdapters[K]>, ErrorOfFieldAdapter<FieldAdapters[K]> | E, ValuePathOfFieldAdapter<FieldAdapters[K]>, Context>;
+    [K in keyof FieldAdapters]: FieldAdapter<FromOfFieldAdapter<FieldAdapters[K]>, ToOfFieldAdapter<FieldAdapters[K]>, ErrorOfFieldAdapter<FieldAdapters[K]> | E, ValuePathOfFieldAdapter<FieldAdapters[K]>, ContextOfFieldAdapter<FieldAdapters[K]> & Context>;
 };
 type ValuePathsOfFieldAdapters<FieldAdapters extends Readonly<Record<string, FieldAdapter>>> = {
     [K in keyof FieldAdapters]: ValuePathOfFieldAdapter<FieldAdapters[K]>;
@@ -196,11 +199,11 @@ type MergedOfFieldAdaptersWithValidators<FieldAdapters extends Readonly<Record<K
 type MergedOfFieldAdapterWithValidator<A extends FieldAdapter, V extends Validator | undefined> = undefined extends V ? A : A extends FieldAdapter<infer From, infer To, infer E1, infer P1, infer C1> ? V extends Validator<From, infer E2, infer P2, infer C2> ? FieldAdapter<From, To, E1 | E2, P1 | P2, C1 | C2> : never : never;
 declare function mergeAdaptersWithValidators<FieldAdapters extends Readonly<Record<Key, FieldAdapter>>, Validators extends Readonly<Record<string, Validator>>, Key extends keyof Validators = keyof Validators>(adapters: FieldAdapters, validators: Validators): MergedOfFieldAdaptersWithValidators<FieldAdapters, Validators, Key>;
 
-type SubFormFieldAdapter<F extends FieldAdapter, 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>;
+type SubFormFieldAdapter<F extends FieldAdapter, ValuePath extends string> = FieldAdapter<FromOfFieldAdapter<F>, ToOfFieldAdapter<F>, ErrorOfFieldAdapter<F>, ValuePathOfFieldAdapter<F> extends StringConcatOf<'$', infer ValuePathSuffix> ? `${ValuePath}${ValuePathSuffix}` : string, ContextOfFieldAdapter<F>>;
+type SubFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, TypePath extends string, ValuePath extends string> = {
+    [K in keyof SubAdapters as K extends StringConcatOf<'$', infer TypePathSuffix> ? `${TypePath}${TypePathSuffix}` : never]: SubFormFieldAdapter<SubAdapters[K], ValuePath>;
 };
-declare function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, TypePath extends string, TypePathsToValuePaths extends Record<TypePath, string>, ContextType extends Type>(subAdapters: SubAdapters, parentTypePath: TypePath, contextType: ContextType): SubFormFieldAdapters<SubAdapters, TypePath, TypePathsToValuePaths[TypePath], ValueOfType<ReadonlyTypeOfType<ContextType>>>;
+declare function subFormFieldAdapters<SubAdapters extends Record<string, FieldAdapter>, TypePath extends string, TypePathsToValuePaths extends Record<TypePath, string>>(subAdapters: SubAdapters, parentTypePath: TypePath): SubFormFieldAdapters<SubAdapters, TypePath, TypePathsToValuePaths[TypePath]>;
 
 type FieldsViewProps<F extends Fields> = {
     fields: F;
@@ -280,6 +283,21 @@ declare function DefaultErrorRenderer({ error, }: InternalErrorRendererProps<any
 
 type ValueTypeOfField<F extends Field> = F extends Field<infer V> ? V : never;
 
+/**
+ * Displays current value and error of a field
+ */
+declare function FieldView<F extends Fields, K extends keyof F>({ fields, valuePath, children, }: {
+    fields: F;
+    valuePath: K;
+    children: (props: {
+        value: ValueTypeOfField<F[K]>;
+        error: ErrorOfField<F[K]> | undefined;
+        ErrorSink: ComponentType<{
+            error: ErrorOfField<F[K]>;
+        }>;
+    }) => JSX.Element;
+}): react_jsx_runtime.JSX.Element;
+
 type AllFieldsOfFields<F extends Fields> = {
     [K in keyof F as ValueTypeOfField<F[K]> extends any ? K : never]: F[K];
 };
@@ -422,4 +440,6 @@ type MergedOfValidators<Validators1 extends Partial<Readonly<Record<Keys, Valida
 type MergedOfValidator<Validator1 extends Validator, Validator2 extends Validator> = Validator1 extends Validator<infer V, infer E1, infer P, infer C> ? Validator2 extends Validator<V, infer E2, P, C> ? Validator<V, E1 | E2, P, C> : never : never;
 declare function mergeValidators<Validators1 extends Partial<Readonly<Record<Keys, Validator>>>, Validators2 extends Partial<Readonly<Record<Keys, Validator>>>, Keys extends string = Extract<keyof Validators1 | keyof Validators2, string>>(validators1: Validators1, validators2: Validators2): MergedOfValidators<Validators1, Validators2, Keys>;
 
-export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, DefaultErrorRenderer, type ErrorOfField, type ErrorOfFieldAdapter, type ErrorRenderer, type ErrorRendererProps, type Field, type FieldAdapter, type FieldAdaptersOfValues, type FieldValueFactory, type Fields, type FieldsViewProps, type FlattenedAdaptersOfFields, type FlattenedConvertedFieldsOf, type FlattenedTypePathsToAdaptersOf, type FormFieldsOfFieldAdapters, type FormFieldsOfModel, FormModel, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, type ToValueOfModelValuePath, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, type ValuePathOfFieldAdapter, type ValuePathsOfModel, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, prototypingFieldValueFactory, subFormFieldAdapters, trimmingStringAdapter, useDefaultMobxFormHooks, useMantineFormFields, usePartialComponent, usePartialObserverComponent, validatingConverter };
+declare function Empty(): null;
+
+export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, type ContextOfFieldAdapter, DefaultErrorRenderer, Empty, type ErrorOfField, type ErrorOfFieldAdapter, type ErrorRenderer, type ErrorRendererProps, type Field, type FieldAdapter, type FieldAdaptersOfValues, type FieldValueFactory, FieldView, type Fields, type FieldsViewProps, type FlattenedAdaptersOfFields, type FlattenedConvertedFieldsOf, type FlattenedTypePathsToAdaptersOf, type FormFieldsOfFieldAdapters, type FormFieldsOfModel, FormModel, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, type ToValueOfModelValuePath, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, type ValuePathOfFieldAdapter, type ValuePathsOfModel, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, prototypingFieldValueFactory, subFormFieldAdapters, trimmingStringAdapter, useDefaultMobxFormHooks, useMantineFormFields, usePartialComponent, usePartialObserverComponent, validatingConverter };

package/dist/index.js

@@ -326,8 +326,8 @@ import {
   observable,
   runInAction
 } from "mobx";
-var _accessors_dec, _knownFields_dec, _fields_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
-_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errors_dec = [observable.shallow], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed];
+var _accessors_dec, _knownFields_dec, _fields_dec, _context_dec, _errors_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errors;
+_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errors_dec = [observable.shallow], _context_dec = [computed.struct], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed];
 var FormModel = class {
   constructor(type, value, adapters) {
     this.type = type;
@@ -339,6 +339,7 @@ var FormModel = class {
     __publicField(this, "flattenedTypeDefs");
     this.value = mobxCopy(type, value);
     this.flattenedTypeDefs = flattenTypesOfType(type);
+    const contextValue = this.toContext(value);
     const conversions = flattenValueTo(
       type,
       this.value,
@@ -356,13 +357,16 @@ var FormModel = class {
         if (revert == null) {
           return;
         }
-        return convert(value2, valuePath, this.value);
+        return convert(value2, valuePath, contextValue);
       }
     );
     this.fieldOverrides = map(conversions, function(_k, v) {
       return v && [v.value];
     });
   }
+  get context() {
+    return this.toContext(this.value);
+  }
   get fields() {
     return new Proxy(
       this.knownFields,
@@ -430,11 +434,11 @@ var FormModel = class {
       accessor != null ? accessor.value : fieldTypeDef != null ? mobxCopy(
         fieldTypeDef,
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        create(valuePath, this.value)
-      ) : create(valuePath, this.value),
+        create(valuePath, this.context)
+      ) : create(valuePath, this.context),
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath,
-      this.value
+      this.context
     );
     const error = this.errors[valuePath];
     return {
@@ -492,7 +496,7 @@ var FormModel = class {
     const element = elementValue != null ? elementValue[0] : elementAdapter.create(
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       elementTypePath,
-      this.value
+      this.context
     );
     const originalList = accessor.value;
     const newList = [
@@ -610,7 +614,7 @@ var FormModel = class {
   internalSetFieldValue(valuePath, value, displayValidation) {
     const { revert } = this.getAdapterForValuePath(valuePath);
     assertExists(revert, "setting value not supported {}", valuePath);
-    const conversion = revert(value, valuePath, this.value);
+    const conversion = revert(value, valuePath, this.context);
     const accessor = this.getAccessorForValuePath(valuePath);
     return runInAction(() => {
       this.fieldOverrides[valuePath] = [value];
@@ -650,10 +654,10 @@ var FormModel = class {
       convert,
       create
     } = adapter2;
-    const value = create(valuePath, this.value);
+    const value = create(valuePath, this.context);
     const {
       value: displayValue
-    } = convert(value, valuePath, this.value);
+    } = convert(value, valuePath, this.context);
     const key = valuePath;
     runInAction(() => {
       this.fieldOverrides[key] = [displayValue];
@@ -682,10 +686,10 @@ var FormModel = class {
     const {
       value: storedValue
     } = convert(
-      accessor != null ? accessor.value : create(valuePath, this.value),
+      accessor != null ? accessor.value : create(valuePath, this.context),
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath,
-      this.value
+      this.context
     );
     const value = fieldOverride != null ? fieldOverride[0] : storedValue;
     const dirty = storedValue !== value;
@@ -693,12 +697,12 @@ var FormModel = class {
     if (ignoreDefaultValue) {
       const {
         value: defaultDisplayValue
-      } = convert(create(valuePath, this.value), valuePath, this.value);
+      } = convert(create(valuePath, this.context), valuePath, this.context);
       if (defaultDisplayValue === value) {
         return true;
       }
     }
-    const conversion = revert(value, valuePath, this.value);
+    const conversion = revert(value, valuePath, this.context);
     return runInAction(() => {
       switch (conversion.type) {
         case 1 /* Failure */:
@@ -743,10 +747,10 @@ var FormModel = class {
           const fieldOverride = this.fieldOverrides[adapterPath];
           const {
             value: storedValue
-          } = convert(accessor.value, valuePath, this.value);
+          } = convert(accessor.value, valuePath, this.context);
           const value = fieldOverride != null ? fieldOverride[0] : storedValue;
           const dirty = fieldOverride != null && fieldOverride[0] !== storedValue;
-          const conversion = revert(value, valuePath, this.value);
+          const conversion = revert(value, valuePath, this.context);
           switch (conversion.type) {
             case 1 /* Failure */:
               this.errors[adapterPath] = conversion.error;
@@ -776,6 +780,7 @@ _errors = new WeakMap();
 __decorateElement(_init, 4, "value", _value_dec, FormModel, _value);
 __decorateElement(_init, 4, "fieldOverrides", _fieldOverrides_dec, FormModel, _fieldOverrides);
 __decorateElement(_init, 4, "errors", _errors_dec, FormModel, _errors);
+__decorateElement(_init, 2, "context", _context_dec, FormModel);
 __decorateElement(_init, 2, "fields", _fields_dec, FormModel);
 __decorateElement(_init, 2, "knownFields", _knownFields_dec, FormModel);
 __decorateElement(_init, 2, "accessors", _accessors_dec, FormModel);
@@ -915,19 +920,12 @@ function mergeAdaptersWithValidators(adapters, validators) {
 }
 
 // core/mobx/sub_form_field_adapters.ts
-import {
-  flattenValuesOfType as flattenValuesOfType2
-} from "@strictly/define";
-function subFormFieldAdapters(subAdapters, parentTypePath, contextType) {
+function subFormFieldAdapters(subAdapters, parentTypePath) {
   const dotCount = parentTypePath.split(".").length;
-  function getSubValuePathAndContext(valuePath, context) {
+  function getSubValuePath(valuePath) {
     const parentValuePath = valuePath.split(".").slice(0, dotCount).join(".");
     const subValuePath = valuePath.replace(parentValuePath, "$");
-    const subContext = flattenValuesOfType2(contextType, context)[parentValuePath];
-    return [
-      subValuePath,
-      subContext
-    ];
+    return subValuePath;
   }
   return Object.entries(subAdapters).reduce((acc, [
     subTypePath,
@@ -936,13 +934,13 @@ function subFormFieldAdapters(subAdapters, parentTypePath, contextType) {
     const typePath = subTypePath.replace("$", parentTypePath);
     const adaptedAdapter = {
       convert: (from, valuePath, context) => {
-        return subAdapter.convert(from, ...getSubValuePathAndContext(valuePath, context));
+        return subAdapter.convert(from, getSubValuePath(valuePath), context);
       },
       create: (valuePath, context) => {
-        return subAdapter.create(...getSubValuePathAndContext(valuePath, context));
+        return subAdapter.create(getSubValuePath(valuePath), context);
       },
       revert: subAdapter.revert && ((from, valuePath, context) => {
-        return subAdapter.revert(from, ...getSubValuePathAndContext(valuePath, context));
+        return subAdapter.revert(from, getSubValuePath(valuePath), context);
       })
     };
     acc[typePath] = adaptedAdapter;
@@ -1151,6 +1149,34 @@ function DefaultErrorRenderer({
   return JSON.stringify(error);
 }
 
+// mantine/field_view.tsx
+import { Observer } from "mobx-react";
+
+// util/empty.tsx
+function Empty() {
+  return null;
+}
+
+// mantine/field_view.tsx
+import { jsx } from "react/jsx-runtime";
+function FieldView({
+  fields,
+  valuePath,
+  children
+}) {
+  return /* @__PURE__ */ jsx(Observer, { children: () => {
+    const {
+      value,
+      error
+    } = fields[valuePath];
+    return children({
+      value,
+      error,
+      ErrorSink: Empty
+    });
+  } });
+}
+
 // mantine/hooks.tsx
 import {
   Checkbox as CheckboxImpl,
@@ -1177,12 +1203,12 @@ import {
   forwardRef,
   useMemo
 } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function createSimplePartialComponent(Component, curriedProps) {
   return forwardRef(
     function(exposedProps, ref) {
       const C = Component;
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(
         C,
         __spreadValues(__spreadValues({
           ref
@@ -1222,7 +1248,7 @@ function createPartialComponent(Component, curriedPropsSource, additionalPropKey
         ]
       );
       const curriedProps = curriedPropsSource(additionalProps);
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(
         C,
         __spreadValues(__spreadValues({
           ref
@@ -1289,7 +1315,7 @@ function createUnsafePartialObserverComponent(Component, curriedPropsSource, add
           ]
         );
         const curriedProps = curriedPropsSource(additionalProps);
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx2(
           C,
           __spreadValues(__spreadValues({
             ref
@@ -1320,7 +1346,7 @@ function usePartialObserverComponent(curriedPropsSource, deps, Component, additi
 }
 
 // mantine/create_checkbox.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function createCheckbox(valuePath, Checkbox) {
   const onChange = (e) => {
     var _a;
@@ -1357,7 +1383,7 @@ function createCheckbox(valuePath, Checkbox) {
       checked: value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx2(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx3(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1372,14 +1398,18 @@ function createCheckbox(valuePath, Checkbox) {
 }
 
 // mantine/create_fields_view.tsx
+import {
+  jsonPathPrefix,
+  jsonPathUnprefix
+} from "@strictly/define";
 import { observer as observer2 } from "mobx-react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function createFieldsView(valuePath, FieldsView, observableProps) {
   function toKey(subKey) {
-    return subKey.replace("$", valuePath);
+    return jsonPathPrefix(valuePath, subKey);
   }
   function toSubKey(key) {
-    return key.replace(valuePath, "$");
+    return jsonPathUnprefix(valuePath, key);
   }
   function onFieldValueChange(subKey, value) {
     observableProps.onFieldValueChange(toKey(subKey), value);
@@ -1411,7 +1441,7 @@ function createFieldsView(valuePath, FieldsView, observableProps) {
         // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
         {}
       );
-      return /* @__PURE__ */ jsx3(
+      return /* @__PURE__ */ jsx4(
         FieldsView,
         __spreadProps(__spreadValues({}, props), {
           fields: subFields,
@@ -1440,14 +1470,14 @@ import { observer as observer3 } from "mobx-react";
 import {
   useCallback as useCallback2
 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function createForm(valuePath, Form, observableProps) {
   return observer3((props) => {
     const { value } = observableProps.fields[valuePath];
     const onValueChange = useCallback2((value2) => {
       observableProps.onFieldValueChange(valuePath, value2);
     }, []);
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(
       Form,
       __spreadProps(__spreadValues({}, props), {
         onValueChange,
@@ -1458,7 +1488,7 @@ function createForm(valuePath, Form, observableProps) {
 }
 
 // mantine/create_list.tsx
-import { Fragment, jsx as jsx5 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6 } from "react/jsx-runtime";
 function createList(valuePath, List) {
   const propSource = () => {
     const values = [...this.fields[valuePath].value];
@@ -1474,7 +1504,7 @@ function DefaultList({
   listPath,
   children
 }) {
-  return /* @__PURE__ */ jsx5(Fragment, { children: values.map(function(value, index) {
+  return /* @__PURE__ */ jsx6(Fragment, { children: values.map(function(value, index) {
     const valuePath = `${listPath}.${index}`;
     return children(valuePath, value, index);
   }) });
@@ -1513,7 +1543,7 @@ function createRadio(valuePath, value, Radio) {
 }
 
 // mantine/create_radio_group.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 function createRadioGroup(valuePath, RadioGroup) {
   const onChange = (value) => {
     var _a;
@@ -1545,7 +1575,7 @@ function createRadioGroup(valuePath, RadioGroup) {
       name: valuePath,
       value,
       required,
-      error: error && /* @__PURE__ */ jsx6(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx7(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1556,7 +1586,7 @@ function createRadioGroup(valuePath, RadioGroup) {
 }
 
 // mantine/create_text_input.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function createTextInput(valuePath, TextInput) {
   const onChange = (e) => {
     var _a;
@@ -1597,7 +1627,7 @@ function createTextInput(valuePath, TextInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx7(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx8(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1612,7 +1642,7 @@ function createTextInput(valuePath, TextInput) {
 }
 
 // mantine/create_value_input.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function createValueInput(valuePath, ValueInput) {
   const onChange = (value) => {
     var _a;
@@ -1650,7 +1680,7 @@ function createValueInput(valuePath, ValueInput) {
       value,
       disabled: readonly,
       required,
-      error: error && /* @__PURE__ */ jsx8(ErrorRenderer, { error }),
+      error: error && /* @__PURE__ */ jsx9(ErrorRenderer, { error }),
       onChange,
       onFocus,
       onBlur,
@@ -1665,9 +1695,9 @@ function createValueInput(valuePath, ValueInput) {
 }
 
 // mantine/hooks.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function SimpleSelect(props) {
-  return /* @__PURE__ */ jsx9(Select, __spreadValues({}, props));
+  return /* @__PURE__ */ jsx10(Select, __spreadValues({}, props));
 }
 function useMantineFormFields({
   onFieldValueChange,
@@ -1876,6 +1906,8 @@ function mergeValidators(validators1, validators2) {
 export {
   AbstractSelectValueTypeConverter,
   DefaultErrorRenderer,
+  Empty,
+  FieldView,
   FormModel,
   IntegerToStringConverter,
   NullableToBooleanConverter,

package/index.ts

@@ -17,9 +17,11 @@ export * from './field_converters/trimming_string_converter'
 export * from './field_converters/validating_converter'
 export * from './field_value_factories/prototyping_field_value_factory'
 export * from './mantine/error_renderer'
+export * from './mantine/field_view'
 export * from './mantine/hooks'
 export * from './types/error_of_field'
 export * from './types/field'
 export * from './types/field_converters'
 export * from './types/merge_validators'
+export * from './util/empty'
 export * from './util/partial'

package/mantine/create_fields_view.tsx

@@ -1,4 +1,8 @@
 import { type StringConcatOf } from '@strictly/base'
+import {
+  jsonPathPrefix,
+  jsonPathUnprefix,
+} from '@strictly/define'
 import type { FieldsViewProps } from 'core/props'
 import { observer } from 'mobx-react'
 import type {
@@ -42,12 +46,12 @@ export function createFieldsView<
 ): FieldsView<K, MantineFieldComponent<FieldsViewProps<P['fields']>, P, never>> {
   function toKey(subKey: string | number | symbol): string {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return (subKey as string).replace('$', valuePath as string)
+    return jsonPathPrefix(valuePath, subKey as string)
   }
 
   function toSubKey(key: string | number | symbol): string {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-    return (key as string).replace(valuePath as string, '$')
+    return jsonPathUnprefix(valuePath, key as string)
   }
 
   function onFieldValueChange<SubK extends keyof P['fields']>(

package/mantine/field_view.tsx

@@ -0,0 +1,39 @@
+import { Observer } from 'mobx-react'
+import { type ComponentType } from 'react'
+import { type ErrorOfField } from 'types/error_of_field'
+import { type Fields } from 'types/field'
+import { type ValueTypeOfField } from 'types/value_type_of_field'
+import { Empty } from 'util/empty'
+
+/**
+ * Displays current value and error of a field
+ */
+export function FieldView<F extends Fields, K extends keyof F>({
+  fields,
+  valuePath,
+  children,
+}: {
+  fields: F,
+  valuePath: K,
+  children: (props: {
+    value: ValueTypeOfField<F[K]>,
+    error: ErrorOfField<F[K]> | undefined,
+    ErrorSink: ComponentType<{ error: ErrorOfField<F[K]> }>,
+  }) => JSX.Element,
+}) {
+  return (
+    <Observer>
+      {() => {
+        const {
+          value,
+          error,
+        } = fields[valuePath]
+        return children({
+          value,
+          error,
+          ErrorSink: Empty,
+        })
+      }}
+    </Observer>
+  )
+}

package/package.json

@@ -70,7 +70,7 @@
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "exports": {
     ".": {
       "import": {

package/util/empty.tsx

@@ -0,0 +1,3 @@
+export function Empty() {
+  return null
+}