@strictly/react-form 0.0.31 → 0.0.32

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Maybe, ElementOfArray, StringConcatOf, StringKeyOf as StringKeyOf$1, ExhaustiveArrayOfUnion, FriendlyExhaustiveArrayOfUnion } from '@strictly/base';
-import { Type, ValueOfType, ReadonlyTypeOfType, FlattenedTypesOfType, ListTypeDef, FlattenedValuesOfType, MobxValueOfType, Accessor, Validator, UnionTypeDef, ValueTypesOfDiscriminatedUnion, LiteralTypeDef } from '@strictly/define';
+import { Type, ValueOfType, ReadonlyTypeOfType, FlattenedTypesOfType, ListTypeDef, FlattenedValuesOfType, Accessor, Validator, UnionTypeDef, ValueTypesOfDiscriminatedUnion, LiteralTypeDef } from '@strictly/define';
 import { ValueOf, SimplifyDeep, ReadonlyDeep, UnionToIntersection, StringKeyOf, Simplify } from 'type-fest';
 import { ComponentType, RefAttributes, ComponentProps, ForwardRefExoticComponent, PropsWithoutRef, Ref, DependencyList } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
@@ -136,7 +136,7 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     private readonly originalValue;
     protected readonly adapters: TypePathsToAdapters;
     protected readonly mode: FormMode;
-    accessor value: MobxValueOfType<T>;
+    private accessor observableValue;
     accessor fieldOverrides: FlattenedFieldOverrides<ValuePathsToAdapters>;
     accessor errorOverrides: FlattenedErrorOverrides<ValuePathsToAdapters>;
     accessor validation: FlattenedValidation<ValuePathsToAdapters>;
@@ -146,6 +146,7 @@ declare abstract class FormModel<T extends Type, ValueToTypePaths extends Readon
     constructor(type: T, originalValue: ValueOfType<ReadonlyTypeOfType<T>>, adapters: TypePathsToAdapters, mode: FormMode);
     protected abstract toContext(value: ValueOfType<ReadonlyTypeOfType<T>>, valuePath: keyof ValuePathsToAdapters): ContextType;
     get forceMutableFields(): boolean;
+    get value(): ValueOfType<ReadonlyTypeOfType<T>>;
     get fields(): SimplifyDeep<FlattenedConvertedFieldsOf<ValuePathsToAdapters>>;
     private get knownFields();
     private maybeSynthesizeFieldByValuePath;
@@ -210,6 +211,12 @@ 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>;
 
+/**
+ * Used for when you want to look at the value of an observable without observing it (or triggering
+ * the mobx runtime linter)
+ */
+declare function peek<T>(operation: () => T): T;
+
 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>;
@@ -459,4 +466,4 @@ declare function mergeValidators<Validators1 extends Partial<Readonly<Record<Key
 
 declare function Empty(): null;
 
-export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, type ContextOf, type ContextOfFieldAdapter, DefaultErrorRenderer, Empty, 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 FormMode, FormModel, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, type RefOfProps, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, Validation, type ValuePathOfFieldAdapter, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, prototypingFieldValueFactory, subFormFieldAdapters, trimmingStringAdapter, useDefaultMobxFormHooks, useMantineFormFields, usePartialComponent, usePartialObserverComponent, validatingConverter };
+export { AbstractSelectValueTypeConverter, type AnnotatedFieldConversion, type AnnotatedFieldConverter, type Annotation, type ContextOf, type ContextOfFieldAdapter, DefaultErrorRenderer, Empty, 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 FormMode, FormModel, type FormProps, type FromOfFieldAdapter, IntegerToStringConverter, type MergedOfFieldAdaptersWithTwoWayConverter, type MergedOfFieldAdaptersWithValidators, type MergedOfValidator, type MergedOfValidators, NullableToBooleanConverter, type PartialComponent, type RefOfProps, SelectDiscriminatedUnionConverter, SelectLiteralConverter, SelectStringConverter, type ToOfFieldAdapter, TrimmingStringConverter, type TwoWayFieldConverter, type TwoWayFieldConverterWithValueFactory, type UnreliableFieldConversion, UnreliableFieldConversionType, type UnreliableFieldConverter, type UnsafePartialComponent, Validation, type ValuePathOfFieldAdapter, type ValuePathsToAdaptersOf, adapter, adapterFromPrototype, adapterFromTwoWayConverter, createPartialComponent, createPartialObserverComponent, createSimplePartialComponent, createUnsafePartialObserverComponent, identityAdapter, listAdapter, mergeAdaptersWithValidators, mergeFieldAdaptersWithTwoWayConverter, mergeValidators, peek, prototypingFieldValueFactory, subFormFieldAdapters, trimmingStringAdapter, useDefaultMobxFormHooks, useMantineFormFields, usePartialComponent, usePartialObserverComponent, validatingConverter };

package/dist/index.js

@@ -312,6 +312,7 @@ import {
   UnreachableError as UnreachableError2
 } from "@strictly/base";
 import {
+  copy,
   equals,
   flattenAccessorsOfType,
   flattenTypesOfType,
@@ -322,6 +323,7 @@ import {
   valuePathToTypePath
 } from "@strictly/define";
 import {
+  action,
   computed,
   observable,
   runInAction
@@ -332,8 +334,8 @@ var Validation = /* @__PURE__ */ ((Validation2) => {
   Validation2[Validation2["Always"] = 2] = "Always";
   return Validation2;
 })(Validation || {});
-var _valueChanged_dec, _dirty_dec, _accessors_dec, _knownFields_dec, _fields_dec, _validation_dec, _errorOverrides_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _errorOverrides, _validation;
-_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errorOverrides_dec = [observable.shallow], _validation_dec = [observable.shallow], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed], _dirty_dec = [computed], _valueChanged_dec = [computed];
+var _validateAll_dec, _validateField_dec, _setFieldValue_dec, _valueChanged_dec, _dirty_dec, _accessors_dec, _knownFields_dec, _fields_dec, _value_dec, _validation_dec, _errorOverrides_dec, _fieldOverrides_dec, _observableValue_dec, _init, _observableValue, _fieldOverrides, _errorOverrides, _validation;
+_observableValue_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _errorOverrides_dec = [observable.shallow], _validation_dec = [observable.shallow], _value_dec = [computed], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed], _dirty_dec = [computed], _valueChanged_dec = [computed], _setFieldValue_dec = [action], _validateField_dec = [action], _validateAll_dec = [action];
 var FormModel = class {
   constructor(type, originalValue, adapters, mode) {
     this.type = type;
@@ -341,7 +343,7 @@ var FormModel = class {
     this.adapters = adapters;
     this.mode = mode;
     __runInitializers(_init, 5, this);
-    __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
+    __privateAdd(this, _observableValue, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __privateAdd(this, _fieldOverrides, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
     __privateAdd(this, _errorOverrides, __runInitializers(_init, 16, this, {})), __runInitializers(_init, 19, this);
     __privateAdd(this, _validation, __runInitializers(_init, 20, this, {})), __runInitializers(_init, 23, this);
@@ -352,11 +354,11 @@ var FormModel = class {
     // maintains the value paths of lists when the original order is destroyed by deletes or reordering
     __publicField(this, "listIndicesToKeys", {});
     this.originalValues = flattenValuesOfType(type, originalValue, this.listIndicesToKeys);
-    this.value = mobxCopy(type, originalValue);
+    this.observableValue = mobxCopy(type, originalValue);
     this.flattenedTypeDefs = flattenTypesOfType(type);
     const conversions = flattenValueTo(
       type,
-      this.value,
+      originalValue,
       () => {
       },
       (_t, fieldValue, _setter, typePath, valuePath) => {
@@ -390,6 +392,9 @@ var FormModel = class {
         throw new UnreachableError2(this.mode);
     }
   }
+  get value() {
+    return copy(this.type, this.observableValue);
+  }
   get fields() {
     return new Proxy(
       this.knownFields,
@@ -409,7 +414,7 @@ var FormModel = class {
   get knownFields() {
     return flattenValueTo(
       this.type,
-      this.value,
+      this.observableValue,
       () => {
       },
       // TODO swap these to valuePath, typePath in flatten
@@ -451,7 +456,7 @@ var FormModel = class {
     const fieldOverride = this.fieldOverrides[valuePath];
     const accessor = this.getAccessorForValuePath(valuePath);
     const fieldTypeDef = this.flattenedTypeDefs[typePath];
-    const context = this.toContext(this.value, valuePath);
+    const context = this.toContext(this.observableValue, valuePath);
     const defaultValue = create(valuePath, context);
     const {
       value,
@@ -543,9 +548,9 @@ var FormModel = class {
   get accessors() {
     return flattenAccessorsOfType(
       this.type,
-      this.value,
+      this.observableValue,
       (value) => {
-        this.value = mobxCopy(this.type, value);
+        this.observableValue = mobxCopy(this.type, value);
       },
       this.listIndicesToKeys
     );
@@ -567,7 +572,7 @@ var FormModel = class {
     });
   }
   get valueChanged() {
-    return !equals(this.type, this.value, this.originalValue);
+    return !equals(this.type, this.observableValue, this.originalValue);
   }
   typePath(valuePath) {
     return valuePathToTypePath(this.type, valuePath, true);
@@ -592,7 +597,7 @@ var FormModel = class {
       elementTypePath,
       // TODO what can we use for the value path here?
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      this.toContext(this.value, valuePath)
+      this.toContext(this.observableValue, valuePath)
     );
     const originalList = accessor.value;
     const newList = [
@@ -647,7 +652,7 @@ var FormModel = class {
   internalSetFieldValue(valuePath, value, validation) {
     const { revert } = this.getAdapterForValuePath(valuePath);
     assertExists(revert, "setting value not supported {}", valuePath);
-    const conversion = revert(value, valuePath, this.toContext(this.value, valuePath));
+    const conversion = revert(value, valuePath, this.toContext(this.observableValue, valuePath));
     const accessor = this.getAccessorForValuePath(valuePath);
     return runInAction(() => {
       this.fieldOverrides[valuePath] = [value];
@@ -702,7 +707,7 @@ var FormModel = class {
       convert,
       create
     } = adapter2;
-    const context = this.toContext(this.value, valuePath);
+    const context = this.toContext(this.observableValue, valuePath);
     const value = create(valuePath, context);
     const {
       value: displayValue
@@ -719,11 +724,11 @@ var FormModel = class {
       this.validation = {};
       this.fieldOverrides = {};
       this.errorOverrides = {};
-      this.value = mobxCopy(this.type, value);
+      this.observableValue = mobxCopy(this.type, value);
     });
   }
   isValuePathActive(valuePath) {
-    const values = flattenValuesOfType(this.type, this.value, this.listIndicesToKeys);
+    const values = flattenValuesOfType(this.type, this.observableValue, this.listIndicesToKeys);
     const keys = new Set(Object.keys(values));
     return keys.has(valuePath);
   }
@@ -766,18 +771,14 @@ var FormModel = class {
     return displayedValue !== originalDisplayedValue;
   }
   validateField(valuePath, validation = 2 /* Always */) {
-    runInAction(() => {
-      this.validation[valuePath] = validation;
-      delete this.errorOverrides[valuePath];
-    });
+    this.validation[valuePath] = validation;
+    delete this.errorOverrides[valuePath];
     return this.fields[valuePath].error == null;
   }
   validateAll(validation = 2 /* Always */) {
     const accessors = toArray(this.accessors);
-    runInAction(() => {
-      accessors.forEach(([valuePath]) => {
-        this.validation[valuePath] = validation;
-      });
+    accessors.forEach(([valuePath]) => {
+      this.validation[valuePath] = validation;
     });
     return accessors.every(
       ([valuePath]) => {
@@ -791,32 +792,50 @@ var FormModel = class {
   }
 };
 _init = __decoratorStart(null);
-_value = new WeakMap();
+_observableValue = new WeakMap();
 _fieldOverrides = new WeakMap();
 _errorOverrides = new WeakMap();
 _validation = new WeakMap();
-__decorateElement(_init, 4, "value", _value_dec, FormModel, _value);
+__decorateElement(_init, 4, "observableValue", _observableValue_dec, FormModel, _observableValue);
 __decorateElement(_init, 4, "fieldOverrides", _fieldOverrides_dec, FormModel, _fieldOverrides);
 __decorateElement(_init, 4, "errorOverrides", _errorOverrides_dec, FormModel, _errorOverrides);
 __decorateElement(_init, 4, "validation", _validation_dec, FormModel, _validation);
+__decorateElement(_init, 2, "value", _value_dec, FormModel);
 __decorateElement(_init, 2, "fields", _fields_dec, FormModel);
 __decorateElement(_init, 2, "knownFields", _knownFields_dec, FormModel);
 __decorateElement(_init, 2, "accessors", _accessors_dec, FormModel);
 __decorateElement(_init, 2, "dirty", _dirty_dec, FormModel);
 __decorateElement(_init, 2, "valueChanged", _valueChanged_dec, FormModel);
+__decorateElement(_init, 1, "setFieldValue", _setFieldValue_dec, FormModel);
+__decorateElement(_init, 1, "validateField", _validateField_dec, FormModel);
+__decorateElement(_init, 1, "validateAll", _validateAll_dec, FormModel);
 __decoratorMetadata(_init, FormModel);
 
 // core/mobx/hooks.tsx
 import {
   useCallback
 } from "react";
+
+// core/mobx/peek.ts
+import { when } from "mobx";
+function peek(operation) {
+  let result;
+  void when(() => {
+    result = operation();
+    return true;
+  });
+  return result;
+}
+
+// core/mobx/hooks.tsx
 function useDefaultMobxFormHooks(model, {
   onValidFieldSubmit,
   onValidFormSubmit
 } = {}) {
   const onFieldValueChange = useCallback(
     function(path, value) {
-      const validation = Math.min(model.getValidation(path), 1 /* Changed */);
+      const activeValidation = peek(() => model.getValidation(path));
+      const validation = Math.min(activeValidation, 1 /* Changed */);
       model.setFieldValue(path, value, validation);
     },
     [model]
@@ -836,8 +855,16 @@ function useDefaultMobxFormHooks(model, {
   const onFieldBlur = useCallback(
     function(path) {
       setTimeout(function() {
-        if (model.isValuePathActive(path) && model.isFieldDirty(path) && model.fields[path].error == null) {
-          model.validateField(path, Math.max(1 /* Changed */, model.getValidation(path)));
+        const [
+          validate4,
+          activeValidation
+        ] = peek(() => [
+          model.isValuePathActive(path) && model.isFieldDirty(path) && model.fields[path].error == null,
+          model.getValidation(path)
+        ]);
+        if (validate4) {
+          const validation = Math.max(1 /* Changed */, activeValidation);
+          model.validateField(path, validation);
         }
       }, 100);
     },
@@ -845,8 +872,10 @@ function useDefaultMobxFormHooks(model, {
   );
   const onFormSubmit = useCallback(
     function() {
-      if (model.validateSubmit()) {
-        onValidFormSubmit == null ? void 0 : onValidFormSubmit(model.value);
+      const valid = peek(() => model.validateSubmit());
+      if (valid && onValidFormSubmit) {
+        const value = peek(() => model.value);
+        onValidFormSubmit(value);
       }
     },
     [
@@ -1002,7 +1031,7 @@ var IntegerToStringConverter = class {
 
 // field_converters/NullableToBooleanConverter.ts
 import {
-  copy
+  copy as copy2
 } from "@strictly/define";
 var NullableToBooleanConverter = class {
   constructor(typeDef, prototype, nullType, defaultToNull = true) {
@@ -1021,7 +1050,7 @@ var NullableToBooleanConverter = class {
   }
   revert(from) {
     if (from) {
-      const value = copy(this.typeDef, this.prototype);
+      const value = copy2(this.typeDef, this.prototype);
       return {
         type: 0 /* Success */,
         value
@@ -1042,7 +1071,7 @@ import {
   reverse
 } from "@strictly/base";
 import {
-  copy as copy2
+  copy as copy3
 } from "@strictly/define";
 var AbstractSelectValueTypeConverter = class {
   constructor(typeDef, values, defaultValueKey, noSuchValueError, required) {
@@ -1061,7 +1090,7 @@ var AbstractSelectValueTypeConverter = class {
         value: null
       };
     }
-    const value = prototype == null ? prototype : copy2(this.typeDef, prototype);
+    const value = prototype == null ? prototype : copy3(this.typeDef, prototype);
     return {
       type: 0 /* Success */,
       value
@@ -1587,7 +1616,7 @@ function DefaultList({
       indexKeys[index]
     ];
   }).filter(function([
-    _value2,
+    _value,
     _index,
     key
   ]) {
@@ -2029,6 +2058,7 @@ export {
   mergeAdaptersWithValidators,
   mergeFieldAdaptersWithTwoWayConverter,
   mergeValidators,
+  peek,
   prototypingFieldValueFactory,
   subFormFieldAdapters,
   trimmingStringAdapter,

package/index.ts

@@ -7,6 +7,7 @@ export * from './core/mobx/FormModel'
 export * from './core/mobx/hooks'
 export * from './core/mobx/mergeFieldAdaptersWithTwoWayConverter'
 export * from './core/mobx/mergeFieldAdaptersWithValidators'
+export * from './core/mobx/peek'
 export * from './core/mobx/subFormFieldAdapters'
 export * from './core/props'
 export * from './field_converters/IntegerToStringConverter'

package/package.json

@@ -72,7 +72,7 @@
     "test:watch": "vitest"
   },
   "type": "module",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "exports": {
     ".": {
       "import": {