reactaform 1.9.2 → 1.9.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/README.full.md +4 -2
  2. package/dist/components/fields/{ColorInput.d.ts → advanced/ColorInput.d.ts} +1 -1
  3. package/dist/components/fields/{EmailInput.d.ts → advanced/EmailInput.d.ts} +1 -1
  4. package/dist/components/fields/{FileInput.d.ts → advanced/FileInput.d.ts} +1 -1
  5. package/dist/components/fields/{PasswordInput.d.ts → advanced/PasswordInput.d.ts} +2 -2
  6. package/dist/components/fields/{PhoneInput.d.ts → advanced/PhoneInput.d.ts} +2 -2
  7. package/dist/components/fields/{RatingInput.d.ts → advanced/RatingInput.d.ts} +1 -1
  8. package/dist/components/fields/{SliderInput.d.ts → advanced/SliderInput.d.ts} +1 -1
  9. package/dist/components/fields/{UnitValueInput.d.ts → advanced/UnitValueInput.d.ts} +1 -1
  10. package/dist/components/fields/{UrlInput.d.ts → advanced/UrlInput.d.ts} +2 -2
  11. package/dist/components/fields/{CheckboxInput.d.ts → choices/CheckboxInput.d.ts} +1 -1
  12. package/dist/components/fields/{DropdownInput.d.ts → choices/DropdownInput.d.ts} +1 -1
  13. package/dist/components/fields/{MultiSelection.d.ts → choices/MultiSelection.d.ts} +2 -2
  14. package/dist/components/fields/{RadioInput.d.ts → choices/RadioInput.d.ts} +1 -1
  15. package/dist/components/fields/{SwitchInput.d.ts → choices/SwitchInput.d.ts} +1 -1
  16. package/dist/components/fields/{DateInput.d.ts → date-time/DateInput.d.ts} +2 -2
  17. package/dist/components/fields/{TimeInput.d.ts → date-time/TimeInput.d.ts} +2 -2
  18. package/dist/components/fields/{FloatArrayInput.d.ts → text-numeric/FloatArrayInput.d.ts} +1 -1
  19. package/dist/components/fields/{FloatInput.d.ts → text-numeric/FloatInput.d.ts} +2 -2
  20. package/dist/components/fields/{IntegerArrayInput.d.ts → text-numeric/IntegerArrayInput.d.ts} +2 -2
  21. package/dist/components/fields/{IntegerInput.d.ts → text-numeric/IntegerInput.d.ts} +2 -2
  22. package/dist/components/fields/{MultilineTextInput.d.ts → text-numeric/MultilineTextInput.d.ts} +2 -2
  23. package/dist/components/fields/{NumericStepperInput.d.ts → text-numeric/NumericStepperInput.d.ts} +2 -2
  24. package/dist/components/fields/{TextInput.d.ts → text-numeric/TextInput.d.ts} +2 -2
  25. package/dist/components/fields/{Button.d.ts → ui-elements/Button.d.ts} +1 -1
  26. package/dist/components/fields/{ImageDisplay.d.ts → ui-elements/ImageDisplay.d.ts} +1 -1
  27. package/dist/core/reactaFormTypes.d.ts +2 -1
  28. package/dist/hooks/useFieldValidator.d.ts +2 -1
  29. package/dist/hooks/useUncontrolledValidatedInput.d.ts +3 -1
  30. package/dist/reactaform.cjs.js +5 -5
  31. package/dist/reactaform.es.js +1820 -1697
  32. package/package.json +1 -1
  33. package/dist/components/fields/SpinInput.d.ts +0 -5
  34. /package/dist/components/{ui → fields/base}/PopupOptionMenu.d.ts +0 -0
  35. /package/dist/components/{ui → fields/base}/Tooltip.d.ts +0 -0
  36. /package/dist/components/fields/{Description.d.ts → ui-elements/Description.d.ts} +0 -0
  37. /package/dist/components/fields/{Separator.d.ts → ui-elements/Separator.d.ts} +0 -0
package/README.full.md CHANGED
@@ -259,14 +259,16 @@ Example — `Address` group contains `address1` and `address2`
259
259
 
260
260
  ReactaForm supports both field-level and form-level validation.
261
261
 
262
- - Field-level: validation for a single field; can happen in real-time (while editing) or on submission.
262
+ - Field-level: validation for a single field; can happen while editing, on blur, or on submission.
263
263
  - Form-level: cross-field validation performed during submission.
264
264
 
265
265
  ### Field validation modes
266
266
 
267
267
  `FieldValidationMode`:
268
- - `realTime`: Runs validation while the user edits a field.
268
+ - `onEdit`: Runs validation while the user edits a field.
269
+ - `onBlur`: Runs validation when the field loses focus.
269
270
  - `onSubmission`: Runs validation only when the form is submitted.
271
+ - `realTime`: Deprecated. Same behavior as `onEdit`.
270
272
 
271
273
  ### Validators
272
274
 
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { BaseInputProps, DefinitionPropertyField } from "../../core/reactaFormTypes";
2
+ import type { BaseInputProps, DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
3
  export type ColorInputProps = BaseInputProps<string, DefinitionPropertyField>;
4
4
  declare const _default: React.NamedExoticComponent<ColorInputProps>;
5
5
  export default _default;
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField, BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField, BaseInputProps } from "../../../core/reactaFormTypes";
3
3
  export type EmailInputProps = BaseInputProps<string, DefinitionPropertyField>;
4
4
  export declare const EmailInput: React.FC<EmailInputProps>;
5
5
  declare const _default: React.NamedExoticComponent<EmailInputProps>;
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { BaseInputProps, DefinitionPropertyField } from "../../core/reactaFormTypes";
2
+ import type { BaseInputProps, DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
3
  export type FileInputProps = BaseInputProps<File | File[] | null, DefinitionPropertyField>;
4
4
  declare const _default: React.NamedExoticComponent<FileInputProps>;
5
5
  export default _default;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField } from "../../core/reactaFormTypes";
3
- import type { BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
+ import type { BaseInputProps } from "../../../core/reactaFormTypes";
4
4
  type PasswordInputProps = BaseInputProps<string, DefinitionPropertyField>;
5
5
  declare const _default: React.NamedExoticComponent<PasswordInputProps>;
6
6
  export default _default;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField } from "../../core/reactaFormTypes";
3
- import type { BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
+ import type { BaseInputProps } from "../../../core/reactaFormTypes";
4
4
  export type PhoneInputProps = BaseInputProps<string, DefinitionPropertyField>;
5
5
  export declare const PhoneInput: React.FC<PhoneInputProps>;
6
6
  declare const _default: React.NamedExoticComponent<PhoneInputProps>;
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { BaseInputProps, DefinitionPropertyField } from "../../core/reactaFormTypes";
2
+ import type { BaseInputProps, DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
3
  type RatingField = DefinitionPropertyField & {
4
4
  max?: number;
5
5
  icon?: string;
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { BaseInputProps, DefinitionPropertyField } from "../../core/reactaFormTypes";
2
+ import type { BaseInputProps, DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
3
  type SliderInputProps = BaseInputProps<string | number, DefinitionPropertyField>;
4
4
  declare const _default: React.NamedExoticComponent<SliderInputProps>;
5
5
  export default _default;
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { BaseInputProps, DefinitionPropertyField } from "../../core/reactaFormTypes";
2
+ import type { BaseInputProps, DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
3
  type UnitValueInputProps = BaseInputProps<[string | number, string], DefinitionPropertyField>;
4
4
  declare const _default: React.NamedExoticComponent<UnitValueInputProps>;
5
5
  export default _default;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField } from "../../core/reactaFormTypes";
3
- import type { BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
+ import type { BaseInputProps } from "../../../core/reactaFormTypes";
4
4
  /**
5
5
  * UrlInput component
6
6
  */
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { BaseInputProps, DefinitionPropertyField } from "../../core/reactaFormTypes";
2
+ import type { BaseInputProps, DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
3
  type CheckboxInputProps = BaseInputProps<boolean, DefinitionPropertyField>;
4
4
  declare const _default: React.NamedExoticComponent<CheckboxInputProps>;
5
5
  export default _default;
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { BaseInputProps, DefinitionPropertyField } from "../../core/reactaFormTypes";
2
+ import type { BaseInputProps, DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
3
  type DropdownField = DefinitionPropertyField & {
4
4
  options: NonNullable<DefinitionPropertyField['options']>;
5
5
  };
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField } from "../../core/reactaFormTypes";
3
- import type { BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
+ import type { BaseInputProps } from "../../../core/reactaFormTypes";
4
4
  export type OptionsField = DefinitionPropertyField & {
5
5
  options: NonNullable<DefinitionPropertyField["options"]>;
6
6
  };
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { BaseInputProps, DefinitionPropertyField } from "../../core/reactaFormTypes";
2
+ import type { BaseInputProps, DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
3
  type RadioField = DefinitionPropertyField & {
4
4
  options: NonNullable<DefinitionPropertyField["options"]>;
5
5
  };
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { BaseInputProps, DefinitionPropertyField } from "../../core/reactaFormTypes";
2
+ import type { BaseInputProps, DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
3
  type SwitchInputProps = BaseInputProps<boolean, DefinitionPropertyField>;
4
4
  declare const _default: React.NamedExoticComponent<SwitchInputProps>;
5
5
  export default _default;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField } from "../../core/reactaFormTypes";
3
- import type { BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
+ import type { BaseInputProps } from "../../../core/reactaFormTypes";
4
4
  type DateInputProps = BaseInputProps<string, DefinitionPropertyField>;
5
5
  declare const _default: React.NamedExoticComponent<DateInputProps>;
6
6
  export default _default;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField } from "../../core/reactaFormTypes";
3
- import type { BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
+ import type { BaseInputProps } from "../../../core/reactaFormTypes";
4
4
  type TimeInputProps = BaseInputProps<string, DefinitionPropertyField>;
5
5
  declare const _default: React.NamedExoticComponent<TimeInputProps>;
6
6
  export default _default;
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField, BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField, BaseInputProps } from "../../../core/reactaFormTypes";
3
3
  export type FloatArrayInputProps = BaseInputProps<string | number[], DefinitionPropertyField>;
4
4
  declare const _default: React.NamedExoticComponent<FloatArrayInputProps>;
5
5
  export default _default;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField } from "../../core/reactaFormTypes";
3
- import type { BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
+ import type { BaseInputProps } from "../../../core/reactaFormTypes";
4
4
  /**
5
5
  * FloatInput component
6
6
  */
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField } from "../../core/reactaFormTypes";
3
- import type { BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
+ import type { BaseInputProps } from "../../../core/reactaFormTypes";
4
4
  export type IntegerArrayInputProps = BaseInputProps<string | number[], DefinitionPropertyField>;
5
5
  declare const _default: React.NamedExoticComponent<IntegerArrayInputProps>;
6
6
  export default _default;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField } from "../../core/reactaFormTypes";
3
- import type { BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
+ import type { BaseInputProps } from "../../../core/reactaFormTypes";
4
4
  export type IntegerInputProps = BaseInputProps<number | string, DefinitionPropertyField>;
5
5
  declare const _default: React.NamedExoticComponent<IntegerInputProps>;
6
6
  export default _default;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField } from "../../core/reactaFormTypes";
3
- import type { BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
+ import type { BaseInputProps } from "../../../core/reactaFormTypes";
4
4
  type TextInputProps = BaseInputProps<string, DefinitionPropertyField>;
5
5
  declare const _default: React.NamedExoticComponent<TextInputProps>;
6
6
  export default _default;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField } from "../../core/reactaFormTypes";
3
- import type { BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
+ import type { BaseInputProps } from "../../../core/reactaFormTypes";
4
4
  export type NumericStepperInputProps = BaseInputProps<string | number, DefinitionPropertyField>;
5
5
  declare const _default: React.NamedExoticComponent<NumericStepperInputProps>;
6
6
  export default _default;
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
- import type { DefinitionPropertyField } from "../../core/reactaFormTypes";
3
- import type { BaseInputProps } from "../../core/reactaFormTypes";
2
+ import type { DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
+ import type { BaseInputProps } from "../../../core/reactaFormTypes";
4
4
  type TextInputProps = BaseInputProps<string, DefinitionPropertyField> & {
5
5
  error?: string | null;
6
6
  };
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { BaseInputProps, DefinitionPropertyField, FieldValueType, ErrorType } from "../../core/reactaFormTypes";
2
+ import type { BaseInputProps, DefinitionPropertyField, FieldValueType, ErrorType } from "../../../core/reactaFormTypes";
3
3
  /**
4
4
  * Extended props for Button component
5
5
  * Unlike other fields, Button needs access to all form values
@@ -1,5 +1,5 @@
1
1
  import * as React from "react";
2
- import type { BaseInputProps, DefinitionPropertyField } from "../../core/reactaFormTypes";
2
+ import type { BaseInputProps, DefinitionPropertyField } from "../../../core/reactaFormTypes";
3
3
  export type ImageProps = BaseInputProps<string, DefinitionPropertyField>;
4
4
  declare const _default: React.NamedExoticComponent<ImageProps>;
5
5
  export default _default;
@@ -81,10 +81,11 @@ export interface ReactaFormProps {
81
81
  export type TranslationFunction = (text: string, ...args: unknown[]) => string;
82
82
  /** Validation mode controls where validation is performed.
83
83
  * 'onEdit' (default) - Validate fields as they are edited, showing errors immediately.
84
+ * 'onBlur' - Validate fields when they lose focus, reducing validation work while typing.
84
85
  * 'onSubmission' - Validate only when the form is submitted, showing errors after submission attempt.
85
86
  * 'realTime' - deprecated, use 'onEdit' instead.
86
87
  */
87
- export type FieldValidationMode = 'onEdit' | 'onSubmission' | 'realTime';
88
+ export type FieldValidationMode = 'onEdit' | 'onBlur' | 'onSubmission' | 'realTime';
88
89
  export type FieldCustomValidationHandler = (fieldName: string, value: FieldValueType | unknown, t: TranslationFunction) => string | undefined;
89
90
  export type FieldTypeValidationHandler = (field: DefinitionPropertyField, input: FieldValueType, t: TranslationFunction) => string | undefined;
90
91
  export type FormValidationHandler = (valuesMap: Record<string, FieldValueType | unknown>, t: TranslationFunction) => string[] | Promise<string[] | undefined> | undefined;
@@ -1,2 +1,3 @@
1
1
  import type { DefinitionPropertyField, FieldValueType } from '../core/reactaFormTypes';
2
- export declare function useFieldValidator(field: DefinitionPropertyField, externalError?: string | null): (value: FieldValueType) => string | null;
2
+ export type ValidationTrigger = 'change' | 'blur' | 'sync';
3
+ export declare function useFieldValidator(field: DefinitionPropertyField, externalError?: string | null): (value: FieldValueType, trigger?: ValidationTrigger) => string | null;
@@ -1,9 +1,10 @@
1
1
  import * as React from "react";
2
+ import type { ValidationTrigger } from "./useFieldValidator";
2
3
  export type UseUncontrolledValidatedInputProps = {
3
4
  value?: string | number;
4
5
  onChange?: (value: string) => void;
5
6
  onError?: (error: string | null) => void;
6
- validate: (value: string) => string | null;
7
+ validate: (value: string, trigger?: ValidationTrigger) => string | null;
7
8
  };
8
9
  /**
9
10
  * Handles:
@@ -15,4 +16,5 @@ export declare function useUncontrolledValidatedInput<T extends HTMLInputElement
15
16
  inputRef: React.MutableRefObject<T | null>;
16
17
  error: string | null;
17
18
  handleChange: (e: React.ChangeEvent<T>) => void;
19
+ handleBlur: () => void;
18
20
  };