@strictly/react-form 0.0.18 → 0.0.19

package/dist/index.js

@@ -326,19 +326,27 @@ 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 Validation = /* @__PURE__ */ ((Validation2) => {
+  Validation2[Validation2["Changed"] = 1] = "Changed";
+  Validation2[Validation2["Always"] = 2] = "Always";
+  return Validation2;
+})(Validation || {});
+var _accessors_dec, _knownFields_dec, _fields_dec, _validation_dec, _fieldOverrides_dec, _value_dec, _init, _value, _fieldOverrides, _validation;
+_value_dec = [observable.ref], _fieldOverrides_dec = [observable.shallow], _validation_dec = [observable.shallow], _fields_dec = [computed], _knownFields_dec = [computed], _accessors_dec = [computed];
 var FormModel = class {
   constructor(type, originalValue, adapters, mode) {
     this.type = type;
-    this.originalValue = originalValue;
     this.adapters = adapters;
     this.mode = mode;
     __runInitializers(_init, 5, this);
     __privateAdd(this, _value, __runInitializers(_init, 8, this)), __runInitializers(_init, 11, this);
     __privateAdd(this, _fieldOverrides, __runInitializers(_init, 12, this)), __runInitializers(_init, 15, this);
-    __privateAdd(this, _errors, __runInitializers(_init, 16, this, {})), __runInitializers(_init, 19, this);
+    __privateAdd(this, _validation, __runInitializers(_init, 16, this, {})), __runInitializers(_init, 19, this);
     __publicField(this, "flattenedTypeDefs");
+    // cannot be type safe
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    __publicField(this, "originalValues");
+    this.originalValues = flattenValuesOfType(type, originalValue);
     this.value = mobxCopy(type, originalValue);
     this.flattenedTypeDefs = flattenTypesOfType(type);
     const conversions = flattenValueTo(
@@ -430,12 +438,14 @@ var FormModel = class {
     }
     const {
       convert,
-      create
+      create,
+      revert
     } = adapter2;
     const fieldOverride = this.fieldOverrides[valuePath];
     const accessor = this.getAccessorForValuePath(valuePath);
     const fieldTypeDef = this.flattenedTypeDefs[typePath];
     const context = this.toContext(this.value, valuePath);
+    const defaultValue = create(valuePath, context);
     const {
       value,
       required,
@@ -443,14 +453,43 @@ var FormModel = class {
     } = convert(
       accessor != null ? accessor.value : fieldTypeDef != null ? mobxCopy(
         fieldTypeDef,
-        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-        create(valuePath, context)
-      ) : create(valuePath, context),
+        defaultValue
+      ) : defaultValue,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       valuePath,
       context
     );
-    const error = this.errors[valuePath];
+    let error = void 0;
+    const displayedValue = fieldOverride != null ? fieldOverride[0] : value;
+    const validation = this.validation[valuePath];
+    switch (validation) {
+      case void 0:
+        break;
+      case 1 /* Changed */:
+        if (revert != null) {
+          const originalValue = valuePath in this.originalValues ? this.originalValues[valuePath] : defaultValue;
+          const { value: originalDisplayedValue } = convert(originalValue, valuePath, context);
+          if (displayedValue !== originalDisplayedValue) {
+            const revertResult = revert(displayedValue, valuePath, context);
+            if ((revertResult == null ? void 0 : revertResult.type) === 1 /* Failure */) {
+              ;
+              ({ error } = revertResult);
+            }
+          }
+        }
+        break;
+      case 2 /* Always */:
+        {
+          const revertResult = revert == null ? void 0 : revert(displayedValue, valuePath, context);
+          if ((revertResult == null ? void 0 : revertResult.type) === 1 /* Failure */) {
+            ;
+            ({ error } = revertResult);
+          }
+        }
+        break;
+      default:
+        throw new UnreachableError2(validation);
+    }
     return {
       value: fieldOverride != null ? fieldOverride[0] : value,
       error,
@@ -485,11 +524,8 @@ var FormModel = class {
   typePath(valuePath) {
     return valuePathToTypePath(this.type, valuePath, true);
   }
-  setFieldValueAndValidate(valuePath, value) {
-    return this.internalSetFieldValue(valuePath, value, true);
-  }
-  setFieldValue(valuePath, value) {
-    return this.internalSetFieldValue(valuePath, value, false);
+  setFieldValue(valuePath, value, validation = this.validation[valuePath]) {
+    return this.internalSetFieldValue(valuePath, value, validation);
   }
   addListItem(valuePath, elementValue = null, index) {
     const listValuePath = valuePath;
@@ -548,9 +584,9 @@ var FormModel = class {
         const fieldOverride = this.fieldOverrides[fromJsonPath];
         delete this.fieldOverrides[fromJsonPath];
         this.fieldOverrides[toJsonPath] = fieldOverride;
-        const error = this.errors[fromJsonPath];
-        delete this.errors[fromJsonPath];
-        this.errors[toJsonPath] = error;
+        const validation = this.validation[fromJsonPath];
+        delete this.validation[fromJsonPath];
+        this.validation[toJsonPath] = validation;
       });
       accessor.set(newList);
       delete this.fieldOverrides[listValuePath];
@@ -614,33 +650,34 @@ var FormModel = class {
           const fieldOverride = this.fieldOverrides[fromJsonPath];
           delete this.fieldOverrides[fromJsonPath];
           this.fieldOverrides[toJsonPath] = fieldOverride;
-          const error = this.errors[fromJsonPath];
-          delete this.errors[fromJsonPath];
-          this.errors[toJsonPath] = error;
+          const validation = this.validation[fromJsonPath];
+          delete this.validation[fromJsonPath];
+          this.validation[toJsonPath] = validation;
         });
         accessor.set(newList);
         delete this.fieldOverrides[listValuePath];
       });
     });
   }
-  internalSetFieldValue(valuePath, value, displayValidation) {
+  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 accessor = this.getAccessorForValuePath(valuePath);
     return runInAction(() => {
       this.fieldOverrides[valuePath] = [value];
+      if (validation != null) {
+        this.validation[valuePath] = validation;
+      } else {
+        delete this.validation[valuePath];
+      }
       switch (conversion.type) {
         case 1 /* Failure */:
-          if (displayValidation) {
-            this.errors[valuePath] = conversion.error;
-          }
           if (conversion.value != null && accessor != null) {
             accessor.set(conversion.value[0]);
           }
           return false;
         case 0 /* Success */:
-          delete this.errors[valuePath];
           accessor == null ? void 0 : accessor.set(conversion.value);
           return true;
         default:
@@ -652,7 +689,7 @@ var FormModel = class {
     const fieldOverride = this.fieldOverrides[valuePath];
     if (fieldOverride != null) {
       runInAction(() => {
-        delete this.errors[valuePath];
+        delete this.validation[valuePath];
       });
     }
   }
@@ -674,11 +711,12 @@ var FormModel = class {
     const key = valuePath;
     runInAction(() => {
       this.fieldOverrides[key] = [displayValue];
+      delete this.validation[key];
     });
   }
   clearAll(value) {
     runInAction(() => {
-      this.errors = {};
+      this.validation = {};
       this.fieldOverrides = {};
       this.value = mobxCopy(this.type, value);
     });
@@ -688,123 +726,37 @@ var FormModel = class {
     const keys = new Set(Object.keys(values));
     return keys.has(valuePath);
   }
-  validateField(valuePath, ignoreDefaultValue = false) {
-    const {
-      convert,
-      revert,
-      create
-    } = this.getAdapterForValuePath(valuePath);
-    const fieldOverride = this.fieldOverrides[valuePath];
-    const accessor = this.getAccessorForValuePath(valuePath);
-    const context = this.toContext(this.value, valuePath);
-    const {
-      value: storedValue
-    } = convert(
-      accessor != null ? accessor.value : create(valuePath, context),
-      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-      valuePath,
-      context
-    );
-    const value = fieldOverride != null ? fieldOverride[0] : storedValue;
-    const dirty = storedValue !== value;
-    assertExists(revert, "changing field directly not supported {}", valuePath);
-    if (ignoreDefaultValue) {
-      const {
-        value: defaultDisplayValue
-      } = convert(create(valuePath, context), valuePath, context);
-      if (defaultDisplayValue === value) {
-        return true;
-      }
-    }
-    const conversion = revert(value, valuePath, context);
-    return runInAction(() => {
-      switch (conversion.type) {
-        case 1 /* Failure */:
-          this.errors[valuePath] = conversion.error;
-          if (conversion.value != null && accessor != null && dirty) {
-            accessor.set(conversion.value[0]);
-          }
-          return false;
-        case 0 /* Success */:
-          delete this.errors[valuePath];
-          if (accessor != null && dirty) {
-            accessor.set(conversion.value);
-          }
-          return true;
-        default:
-          throw new UnreachableError2(conversion);
-      }
+  validateField(valuePath, validation = Math.max(
+    this.mode === "create" ? 2 /* Always */ : 1 /* Changed */,
+    ((_a) => (_a = this.validation[valuePath]) != null ? _a : 1 /* Changed */)()
+  )) {
+    runInAction(() => {
+      this.validation[valuePath] = validation;
     });
+    return this.fields[valuePath].error == null;
   }
-  validateAll(force = this.mode === "create") {
-    const accessors = toArray(this.accessors).toSorted(function([a], [b]) {
-      return a.length - b.length;
-    });
-    const flattenedOriginalValues = flattenValuesOfType(this.type, this.originalValue);
-    return runInAction(() => {
-      return accessors.reduce(
-        (success, [
-          valuePath,
-          accessor
-        ]) => {
-          const adapterPath = valuePath;
-          const adapter2 = this.maybeGetAdapterForValuePath(adapterPath);
-          if (adapter2 == null) {
-            return success;
-          }
-          const {
-            convert,
-            revert
-          } = adapter2;
-          if (revert == null) {
-            return success;
-          }
-          const fieldOverride = this.fieldOverrides[adapterPath];
-          const context = this.toContext(this.value, valuePath);
-          const {
-            value: storedValue
-          } = convert(accessor.value, valuePath, context);
-          const value = fieldOverride != null ? fieldOverride[0] : storedValue;
-          const dirty = fieldOverride != null && fieldOverride[0] !== storedValue;
-          const needsValidation = force || !(valuePath in flattenedOriginalValues) || storedValue !== convert(
-            flattenedOriginalValues[valuePath],
-            valuePath,
-            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
-            this.toContext(this.originalValue, valuePath)
-          ).value;
-          if (needsValidation) {
-            const conversion = revert(value, valuePath, context);
-            switch (conversion.type) {
-              case 1 /* Failure */:
-                this.errors[adapterPath] = conversion.error;
-                if (conversion.value != null && dirty) {
-                  accessor.set(conversion.value[0]);
-                }
-                return false;
-              case 0 /* Success */:
-                if (dirty) {
-                  accessor.set(conversion.value);
-                }
-                delete this.errors[adapterPath];
-                return success;
-              default:
-                throw new UnreachableError2(conversion);
-            }
-          }
-          return success;
-        },
-        true
-      );
+  validateAll(validation = this.mode === "create" ? 2 /* Always */ : 1 /* Changed */) {
+    const accessors = toArray(this.accessors);
+    runInAction(() => {
+      accessors.forEach(([valuePath]) => {
+        this.validation[valuePath] = validation;
+      });
     });
+    return accessors.every(
+      ([valuePath]) => {
+        const field = this.fields[valuePath];
+        return (field == null ? void 0 : field.error) == null;
+      }
+    );
   }
 };
 _init = __decoratorStart(null);
 _value = new WeakMap();
 _fieldOverrides = new WeakMap();
-_errors = new WeakMap();
+_validation = 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, 4, "validation", _validation_dec, FormModel, _validation);
 __decorateElement(_init, 2, "fields", _fields_dec, FormModel);
 __decorateElement(_init, 2, "knownFields", _knownFields_dec, FormModel);
 __decorateElement(_init, 2, "accessors", _accessors_dec, FormModel);
@@ -820,8 +772,7 @@ function useDefaultMobxFormHooks(model, {
 } = {}) {
   const onFieldValueChange = useCallback(
     function(path, value) {
-      model.clearFieldError(path);
-      model.setFieldValue(path, value);
+      model.setFieldValue(path, value, null);
     },
     [model]
   );
@@ -841,7 +792,7 @@ function useDefaultMobxFormHooks(model, {
     function(path) {
       setTimeout(function() {
         if (model.isValuePathActive(path)) {
-          model.validateField(path, true);
+          model.validateField(path);
         }
       }, 100);
     },
@@ -933,10 +884,11 @@ function mergeAdaptersWithValidators(adapters, validators) {
           readonly: readonly1 || readonly2
         };
       }
-      acc[key] = __spreadProps(__spreadValues({}, adapter2), {
+      acc[key] = {
+        create: adapter2.create.bind(adapter2),
         convert,
         revert: adapter2.revert && revert
-      });
+      };
       return acc;
     },
     {}
@@ -1997,6 +1949,7 @@ export {
   SelectStringConverter,
   TrimmingStringConverter,
   UnreliableFieldConversionType,
+  Validation,
   adapter,
   adapterFromPrototype,
   adapterFromTwoWayConverter,

package/mantine/create_fields_view.tsx

@@ -15,14 +15,18 @@ import type { SubFormFields } from 'types/sub_form_fields'
 import type { ValueTypeOfField } from 'types/value_type_of_field'
 import type { MantineFieldComponent } from './types'
 
+export type SubPathsOf<ValuePath extends string, SubFormValuePath extends string> = SubFormValuePath extends
+  StringConcatOf<ValuePath, infer Postfix> ? `$${Postfix}`
+  : never
+
 export type CallbackMapper<ValuePath extends string> = {
   <
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     Cb extends (...args: any[]) => any,
-  >(cb: Cb): Parameters<Cb> extends [infer SubFormValuePath extends string, ...(infer Rest)]
-    ? SubFormValuePath extends StringConcatOf<ValuePath, infer Postfix>
-      ? (valuePath: `$${Postfix}`, ...rest: Rest) => ReturnType<Cb>
-    : never
+  >(cb: Cb): Parameters<Cb> extends [infer SubFormValuePath extends string, ...(infer Rest)] ? (
+      valuePath: SubPathsOf<ValuePath, SubFormValuePath>,
+      ...rest: Rest
+    ) => ReturnType<Cb>
     : never,
 }
 

package/mantine/hooks.tsx

@@ -40,6 +40,7 @@ import { type ListFieldsOfFields } from 'types/list_fields_of_fields'
 import { type StringFieldsOfFields } from 'types/string_fields_of_fields'
 import { type SubFormFields } from 'types/sub_form_fields'
 import { type ValueTypeOfField } from 'types/value_type_of_field'
+import { type RefOfProps } from 'util/partial'
 import {
   createCheckbox,
   type SuppliedCheckboxProps,
@@ -154,11 +155,11 @@ class MantineFormImpl<
   private readonly valueInputCache: Cache<
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [keyof AllFieldsOfFields<F>, ComponentType<SuppliedValueInputProps<any>>],
-    MantineFieldComponent<SuppliedTextInputProps>
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    MantineFieldComponent<SuppliedValueInputProps<any>>
   > = new Cache(
     createValueInput.bind(this),
   )
-
   private readonly checkboxCache: Cache<
     [keyof BooleanFieldsOfFields<F>, ComponentType<SuppliedCheckboxProps>],
     MantineFieldComponent<SuppliedCheckboxProps>
@@ -223,7 +224,7 @@ class MantineFormImpl<
 
   textInput<
     K extends keyof StringFieldsOfFields<F>,
-  >(valuePath: K): MantineFieldComponent<SuppliedTextInputProps, TextInputProps, ErrorOfField<F[K]>>
+  >(valuePath: K): MantineFieldComponent<SuppliedTextInputProps, TextInputProps, ErrorOfField<F[K]>, HTMLInputElement>
   textInput<
     K extends keyof StringFieldsOfFields<F>,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -231,7 +232,7 @@ class MantineFormImpl<
   >(
     valuePath: K,
     TextInput?: ComponentType<P>,
-  ): MantineFieldComponent<SuppliedTextInputProps, P, ErrorOfField<F[K]>>
+  ): MantineFieldComponent<SuppliedTextInputProps, P, ErrorOfField<F[K]>, RefOfProps<P, HTMLInputElement>>
   textInput<
     K extends keyof StringFieldsOfFields<F>,
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -240,13 +241,14 @@ class MantineFormImpl<
     valuePath: K,
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     TextInput: ComponentType<P> = TextInputImpl as ComponentType<P>,
-  ): MantineFieldComponent<SuppliedTextInputProps, P, ErrorOfField<F[K]>> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ): MantineFieldComponent<SuppliedTextInputProps, P, ErrorOfField<F[K]>, any> {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.textInputCache.retrieveOrCreate(
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       TextInput as ComponentType<SuppliedTextInputProps>,
-    ) as MantineFieldComponent<SuppliedTextInputProps, P, ErrorOfField<F[K]>>
+    ) as unknown as MantineFieldComponent<SuppliedTextInputProps, P, ErrorOfField<F[K]>>
   }
 
   valueInput<
@@ -262,7 +264,7 @@ class MantineFormImpl<
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       ValueInput as ComponentType<SuppliedValueInputProps<ValueTypeOfField<F[K]>>>,
-    ) as MantineFieldComponent<SuppliedTextInputProps, P, ErrorOfField<F[K]>>
+    ) as unknown as MantineFieldComponent<SuppliedValueInputProps<ValueTypeOfField<F[K]>>, P, ErrorOfField<F[K]>>
   }
 
   select<
@@ -273,30 +275,36 @@ class MantineFormImpl<
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       SimpleSelect as ComponentType<SuppliedValueInputProps<ValueTypeOfField<F[K]>>>,
-    ) as MantineFieldComponent<SuppliedTextInputProps, ComponentProps<typeof SimpleSelect>, ErrorOfField<F[K]>>
+    ) as unknown as MantineFieldComponent<
+      SuppliedValueInputProps<ValueTypeOfField<F[K]>>,
+      ComponentProps<typeof SimpleSelect>,
+      ErrorOfField<F[K]>,
+      HTMLSelectElement
+    >
   }
 
   checkbox<
     K extends keyof BooleanFieldsOfFields<F>,
-  >(valuePath: K): MantineFieldComponent<SuppliedCheckboxProps, CheckboxProps, ErrorOfField<F[K]>>
+  >(valuePath: K): MantineFieldComponent<SuppliedCheckboxProps, CheckboxProps, ErrorOfField<F[K]>, HTMLInputElement>
   checkbox<
     K extends keyof BooleanFieldsOfFields<F>,
     P extends SuppliedCheckboxProps,
   >(
     valuePath: K,
     Checkbox: ComponentType<P>,
-  ): MantineFieldComponent<SuppliedCheckboxProps, P, ErrorOfField<F[K]>>
+  ): MantineFieldComponent<SuppliedCheckboxProps, P, ErrorOfField<F[K]>, RefOfProps<P, HTMLInputElement>>
   checkbox<K extends keyof BooleanFieldsOfFields<F>, P extends SuppliedCheckboxProps>(
     valuePath: K,
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     Checkbox: ComponentType<P> = CheckboxImpl as ComponentType<P>,
-  ): MantineFieldComponent<SuppliedCheckboxProps, P, ErrorOfField<F[K]>> {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ): MantineFieldComponent<SuppliedCheckboxProps, P, ErrorOfField<F[K]>, any> {
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
     return this.checkboxCache.retrieveOrCreate(
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       Checkbox as ComponentType<SuppliedCheckboxProps>,
-    ) as MantineFieldComponent<SuppliedCheckboxProps, P, ErrorOfField<F[K]>>
+    ) as unknown as MantineFieldComponent<SuppliedCheckboxProps, P, ErrorOfField<F[K]>>
   }
 
   // this should work?
@@ -324,7 +332,7 @@ class MantineFormImpl<
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       RadioGroup as ComponentType<SuppliedRadioGroupProps>,
-    ) as MantineFieldComponent<SuppliedRadioGroupProps, P, ErrorOfField<F[K]>>
+    ) as unknown as MantineFieldComponent<SuppliedRadioGroupProps, P, ErrorOfField<F[K]>>
   }
 
   radio<
@@ -356,7 +364,7 @@ class MantineFormImpl<
       value,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       Radio as ComponentType<SuppliedRadioProps>,
-    ) as MantineFieldComponent<SuppliedRadioProps, P, ErrorOfField<F[K]>>
+    ) as unknown as MantineFieldComponent<SuppliedRadioProps, P, ErrorOfField<F[K]>>
   }
 
   pill<
@@ -382,7 +390,7 @@ class MantineFormImpl<
       valuePath,
       // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
       Pill as ComponentType<SuppliedPillProps>,
-    ) as MantineFieldComponent<SuppliedPillProps, P, ErrorOfField<F[K]>>
+    ) as unknown as MantineFieldComponent<SuppliedPillProps, P, ErrorOfField<F[K]>>
   }
 
   list<

package/mantine/specs/checkbox_hooks.stories.tsx

@@ -5,6 +5,7 @@ import {
 } from '@storybook/react'
 import { type FieldsViewProps } from 'core/props'
 import { useMantineFormFields } from 'mantine/hooks'
+import { type Ref } from 'react'
 import { type Field } from 'types/field'
 import { CHECKBOX_LABEL } from './checkbox_constants'
 
@@ -13,16 +14,20 @@ function ErrorRenderer({ error }: { error: string }) {
 }
 
 function Component({
+  componentRef,
   ...props
 }: FieldsViewProps<{
   $: Field<boolean, string>,
-}>) {
+}> & {
+  componentRef: Ref<HTMLInputElement>,
+}) {
   const inputProps = useMantineFormFields(props)
   const CheckboxComponent = inputProps.checkbox('$')
   return (
     <CheckboxComponent
       ErrorRenderer={ErrorRenderer}
       label={CHECKBOX_LABEL}
+      ref={componentRef}
     />
   )
 }
@@ -34,6 +39,7 @@ const meta: Meta<typeof Component> = {
     onFieldFocus: action('onFieldFocus'),
     onFieldSubmit: action('onFieldSubmit'),
     onFieldValueChange: action('onFieldValueChange'),
+    componentRef: action('componentRef'),
   },
 }
 

package/mantine/specs/text_input_hooks.stories.tsx

@@ -14,7 +14,10 @@ import {
   type TextInputTarget,
 } from 'mantine/create_text_input'
 import { useMantineFormFields } from 'mantine/hooks'
-import { type ComponentType } from 'react'
+import {
+  type ComponentType,
+  type Ref,
+} from 'react'
 import { type Field } from 'types/field'
 import { TEXT_INPUT_LABEL } from './text_input_constants'
 
@@ -26,10 +29,12 @@ function ErrorRenderer({ error }: { error: string }) {
 
 function Component<T extends TextInputTarget>({
   TextInput,
+  componentRef,
   ...props
 }: FieldsViewProps<{
   $: Field<string, string>,
 }> & {
+  componentRef: Ref<HTMLInputElement>,
   TextInput?: ComponentType<StoryTextInputProps<T>>,
 }) {
   const form = useMantineFormFields(props)
@@ -38,6 +43,7 @@ function Component<T extends TextInputTarget>({
     <TextInputComponent
       ErrorRenderer={ErrorRenderer}
       label={TEXT_INPUT_LABEL}
+      ref={componentRef}
     />
   )
 }
@@ -49,6 +55,7 @@ const meta: Meta<typeof Component> = {
     onFieldFocus: action('onFieldFocus'),
     onFieldSubmit: action('onFieldSubmit'),
     onFieldValueChange: action('onFieldValueChange'),
+    componentRef: action('componentRef'),
   },
 }
 

package/mantine/types.ts

@@ -1,6 +1,11 @@
-import { type ComponentType } from 'react'
+import {
+  type ComponentType,
+} from 'react'
 import { type Fields } from 'types/field'
-import { type UnsafePartialComponent } from 'util/partial'
+import {
+  type RefOfProps,
+  type UnsafePartialComponent,
+} from 'util/partial'
 import { type ErrorRenderer } from './error_renderer'
 
 export type MantineForm<F extends Fields> = {
@@ -12,10 +17,13 @@ export type MantineForm<F extends Fields> = {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type MantineFieldComponent<T, P = T, E = any> = UnsafePartialComponent<
+export type MantineFieldComponent<T, P = T, E = any, R = RefOfProps<P>> = UnsafePartialComponent<
   ComponentType<P>,
   T,
   // escape hatch for never comparisons `E extends never` will not work, always returning never
   // https://github.com/microsoft/TypeScript/issues/31751
-  [E] extends [never] ? {} : { ErrorRenderer: ErrorRenderer<E> }
+  [E] extends [never] ? {} : { ErrorRenderer: ErrorRenderer<E> },
+  // mantine types are too complex for us to be able to get a stable type for the ref.
+  // We can, however, do a best guess and allow overriding in the caller
+  R
 >

package/package.json

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

package/util/partial.tsx

@@ -8,9 +8,13 @@ import {
   forwardRef,
   type ForwardRefExoticComponent,
   type PropsWithoutRef,
+  type Ref,
+  type RefAttributes,
   useMemo,
 } from 'react'
 
+export type RefOfProps<P, Fallback = unknown> = P extends RefAttributes<infer R> ? R : Fallback
+
 export type PartialComponent<
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Component extends ComponentType<any>,
@@ -27,8 +31,11 @@ export type UnsafePartialComponent<
   Component extends ComponentType<any>,
   CurriedProps,
   AdditionalProps = {},
+  R = RefOfProps<ComponentProps<Component>>,
 > = ForwardRefExoticComponent<
-  PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps>
+  PropsWithoutRef<RemainingComponentProps<Component, CurriedProps> & AdditionalProps> & {
+    ref?: Ref<R>,
+  }
 >
 
 export function createSimplePartialComponent<