20.7.0 - trim all spaces from the begging for interactive fields

- use HoneyFormObjectFieldValidator function for date range validators

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tynik/react-honey-form",
-  "version": "20.6.1",
+  "version": "20.7.0",
   "description": "The TS library to build the fully customized forms using React framework",
   "keywords": [
     "react",
@@ -41,25 +41,25 @@
     "@types/react": "18.2.78",
     "@types/react-dom": "18.2.25",
     "@types/mdx": "2.0.13",
-    "@typescript-eslint/eslint-plugin": "7.11.0",
-    "@typescript-eslint/parser": "7.11.0",
+    "@typescript-eslint/eslint-plugin": "7.16.0",
+    "@typescript-eslint/parser": "7.16.0",
     "@mdx-js/loader": "3.0.1",
     "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsx-a11y": "6.8.0",
+    "eslint-plugin-jsx-a11y": "6.9.0",
     "eslint-plugin-prettier": "5.1.3",
-    "eslint-plugin-react": "7.34.2",
+    "eslint-plugin-react": "7.34.4",
     "eslint-plugin-react-hooks": "4.6.2",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
-    "prettier": "3.3.2",
+    "prettier": "3.3.3",
     "ts-jest": "29.2.2",
     "ts-loader": "9.5.1",
     "typescript": "5.5.3",
-    "webpack": "5.92.1",
+    "webpack": "5.93.0",
     "webpack-cli": "5.1.4",
     "html-webpack-plugin": "5.6.0"
   },

src/__tests__/filters.spec.tsx

@@ -2,8 +2,40 @@ import { act, renderHook } from '@testing-library/react';
 import { useHoneyForm } from '../use-honey-form';
 import { createHoneyFormNumberFilter, createHoneyFormNumericFilter } from '../filters';
 
+describe('Hook [use-honey-form]: Builtin filtering', () => {
+  it('should trim all spaces from the begging', () => {
+    const { result } = renderHook(() =>
+      useHoneyForm<{ name: string }>({
+        fields: {
+          name: {
+            type: 'string',
+          },
+        },
+      }),
+    );
+
+    act(() => result.current.formFields.name.setValue(' '));
+
+    expect(result.current.formFields.name.rawValue).toBe('');
+    expect(result.current.formFields.name.value).toBe('');
+    expect(result.current.formFields.name.cleanValue).toBe('');
+
+    act(() => result.current.formFields.name.setValue(' a'));
+
+    expect(result.current.formFields.name.rawValue).toBe('a');
+    expect(result.current.formFields.name.value).toBe('a');
+    expect(result.current.formFields.name.cleanValue).toBe('a');
+
+    act(() => result.current.formFields.name.setValue(' a '));
+
+    expect(result.current.formFields.name.rawValue).toBe('a ');
+    expect(result.current.formFields.name.value).toBe('a ');
+    expect(result.current.formFields.name.cleanValue).toBe('a ');
+  });
+});
+
 describe('Hook [use-honey-form]: Filter function', () => {
-  it('should filter the initial field value', () => {
+  it('should filter the default field value', () => {
     const { result } = renderHook(() =>
       useHoneyForm<{ age: string }>({
         fields: {

src/__tests__/validation.spec.tsx

@@ -813,7 +813,7 @@ describe('Hook [use-honey-form]: Predefined validators', () => {
       useHoneyForm<DateRangeForm>({
         fields: {
           fromDate: {
-            type: 'string',
+            type: 'object',
             // <DateRangeForm, 'fromDate', 'toDate'> as an example how it can be used with any additional properties like `name: string`
             validator: createHoneyFormDateFromValidator<
               DateRangeForm,
@@ -825,7 +825,7 @@ describe('Hook [use-honey-form]: Predefined validators', () => {
             }),
           },
           toDate: {
-            type: 'string',
+            type: 'object',
             validator: createHoneyFormDateToValidator({
               dateFromKey: 'fromDate',
             }),
@@ -871,14 +871,14 @@ describe('Hook [use-honey-form]: Predefined validators', () => {
       useHoneyForm<DateRangeForm>({
         fields: {
           fromDate: {
-            type: 'string',
+            type: 'object',
             validator: createHoneyFormDateFromValidator({
               dateToKey: 'toDate',
               minDate: MIN_DATE,
             }),
           },
           toDate: {
-            type: 'string',
+            type: 'object',
             validator: createHoneyFormDateToValidator({
               dateFromKey: 'fromDate',
               maxDate: MAX_DATE,

src/field.ts

@@ -1202,16 +1202,21 @@ export const executeFieldValidatorAsync = async <
 
   const fieldErrors: HoneyFormFieldError[] = [];
 
-  let filteredValue: Form[FieldName];
+  let filteredValue: Form[FieldName] = formField.rawValue;
 
-  if (checkIfFieldIsInteractive(formField.config) && formField.config.filter) {
-    filteredValue = formField.config.filter(formField.rawValue, { formContext });
-    //
+  if (checkIfFieldIsInteractive(formField.config)) {
+    filteredValue =
+      typeof filteredValue === 'string'
+        ? ((filteredValue as string).trimStart() as Form[FieldName])
+        : filteredValue;
+
+    if (formField.config.filter) {
+      filteredValue = formField.config.filter(filteredValue, { formContext });
+    } else {
+      filteredValue = formField.rawValue;
+    }
   } else if (checkIfFieldIsNestedForms(formField.config)) {
     filteredValue = formField.getChildFormsValues() as Form[FieldName];
-    //
-  } else {
-    filteredValue = formField.rawValue;
   }
 
   const sanitizedValue = sanitizeFieldValue(formField.config.type, filteredValue);
@@ -1679,14 +1684,18 @@ export const getNextFieldsState = <
   const nextFormFields = { ...formFields };
   let nextFormField: HoneyFormField<Form, FieldName, FormContext> = formFields[fieldName];
 
-  let filteredValue: Form[FieldName];
+  let filteredValue: Form[FieldName] = fieldValue;
 
-  if (checkIfFieldIsInteractive(fieldConfig) && fieldConfig.filter) {
-    // Apply filtering to the field value if a filter function is defined
-    filteredValue = fieldConfig.filter(fieldValue, { formContext });
-    //
-  } else {
-    filteredValue = fieldValue;
+  if (checkIfFieldIsInteractive(fieldConfig)) {
+    filteredValue =
+      typeof fieldValue === 'string'
+        ? ((fieldValue as string).trimStart() as Form[FieldName])
+        : fieldValue;
+
+    if (fieldConfig.filter) {
+      // Apply additional filtering to the field value when the filter function is defined
+      filteredValue = fieldConfig.filter(filteredValue, { formContext });
+    }
   }
 
   // If validation is requested, clear dependent fields and execute the field validator

src/hooks.ts

@@ -532,7 +532,9 @@ export const useForm = <
               formValues,
             })
           ) {
-            nextFormFields[fieldName] = getNextErrorsFreeField(formField);
+            nextFormFields[fieldName] = getNextErrorsFreeField<Form, typeof fieldName, FormContext>(
+              formField,
+            );
             return;
           }
 
@@ -548,11 +550,7 @@ export const useForm = <
             formContext,
           });
 
-          // Filter out errors of type 'server' to avoid blocking the form submission trigger
-          const fieldErrors = nextField.errors.filter(fieldError => fieldError.type !== 'server');
-          if (fieldErrors.length) {
-            hasErrors = true;
-          }
+          hasErrors ||= nextField.errors.some(fieldError => fieldError.type !== 'server');
 
           nextFormFields[fieldName] = nextField;
         }),

src/validators.ts

@@ -6,6 +6,7 @@ import type {
   HoneyFormPassiveFieldType,
   HoneyFormPassiveFieldValidator,
   CustomDateRangeForm,
+  HoneyFormObjectFieldValidator,
 } from './types';
 
 export const INTERACTIVE_FIELD_TYPE_VALIDATORS_MAP: Record<
@@ -324,7 +325,7 @@ type CreateHoneyFormDateFromValidatorOptions<
  * Creates a validator function to ensure the validity of a "Date From" field within the context of a date range.
  *
  * @param {CreateHoneyFormDateFromValidatorOptions<Form, DateFromKey, DateToKey>} options - Options for creating the validator.
- * @returns {HoneyFormInteractiveFieldValidator<Form, DateFromKey, FormContext>} - The validator function for "Date From" field.
+ * @returns {HoneyFormObjectFieldValidator<Form, DateFromKey, FormContext>} - The validator function for "Date From" field.
  */
 export const createHoneyFormDateFromValidator =
   <
@@ -346,7 +347,7 @@ export const createHoneyFormDateFromValidator =
     Form,
     DateFromKey,
     DateToKey
-  >): HoneyFormInteractiveFieldValidator<Form, DateFromKey, FormContext> =>
+  >): HoneyFormObjectFieldValidator<Form, DateFromKey, FormContext> =>
   /**
    * Validator function for "Date From" field.
    *
@@ -405,7 +406,7 @@ type CreateHoneyFormDateToValidatorOptions<
  * Creates a validator function to ensure the validity of a "Date To" field within the context of a date range.
  *
  * @param {CreateHoneyFormDateToValidatorOptions<Form, DateToKey, DateFromKey>} options - Options for creating the validator.
- * @returns {HoneyFormInteractiveFieldValidator<Form, DateToKey, FormContext>} - The validator function for "Date To" field.
+ * @returns {HoneyFormObjectFieldValidator<Form, DateToKey, FormContext>} - The validator function for "Date To" field.
  */
 export const createHoneyFormDateToValidator =
   <
@@ -427,7 +428,7 @@ export const createHoneyFormDateToValidator =
     Form,
     DateToKey,
     DateFromKey
-  >): HoneyFormInteractiveFieldValidator<Form, DateToKey, FormContext> =>
+  >): HoneyFormObjectFieldValidator<Form, DateToKey, FormContext> =>
   /**
    * Validator function for "Date To" field.
    *