gform-react 2.0.1 → 2.5.2

package/dist/cjs/gform-react.development.js

@@ -28,7 +28,7 @@ const _buildFormInitialValues = (rows = []) => {
     const inputConfigs = _findInputs(row);
     inputConfigs.forEach(config => {
       if (fields[config.formKey]) {
-        console.warn(`[Duplicate Keys] - field with key '${config.formKey}' has already been defined.`);
+        console.warn(`DEV ONLY - [Duplicate Keys] - field with key '${config.formKey}' has already been defined.`);
       }
       const {
         required = false,
@@ -72,10 +72,7 @@ const _buildFormInitialValues = (rows = []) => {
     });
   }
   return {
-    state: {
-      fields,
-      loading: false
-    },
+    fields: fields,
     key: generateId()
   };
 };
@@ -92,13 +89,34 @@ const _findInputs = (root, total = []) => {
   }
   return _findInputs((_root$props2 = root.props) === null || _root$props2 === void 0 ? void 0 : _root$props2.children, total);
 };
-const _findValidityKey = validity => {
+const _findValidityKey = (validity, exclude = []) => {
   for (const key in validity) {
+    if (exclude.includes(key)) continue;
     if (key !== 'valid' && validity[key]) {
       return key;
     }
   }
 };
+const _checkTypeMismatch = input => {
+  var _input$value;
+  const value = (_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.toString().trim();
+  if (!value) return false;
+  switch (input.type) {
+    case 'email':
+      return !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+    case 'url':
+      try {
+        new URL(value);
+        return false;
+      } catch {
+        return true;
+      }
+    case 'tel':
+      return !/^\+?[0-9\s\-().]{7,}$/.test(value);
+    default:
+      return false;
+  }
+};
 const hasSubmitter = form => {
   if (!form) return false;
   for (const element of form) {
@@ -106,14 +124,6 @@ const hasSubmitter = form => {
   }
   return false;
 };
-const _checkIfFormIsValid = fields => {
-  for (const f in fields) {
-    if (fields[f].error) {
-      return false;
-    }
-  }
-  return true;
-};
 const _toRawData = (fields, options = {}) => {
   const data = {};
   const {
@@ -216,7 +226,8 @@ let validityMap;
     pattern: 'withPatternMismatchMessage',
     min: 'withRangeUnderflowMessage',
     max: 'withRangeOverflowMessage',
-    step: 'withStepMismatchMessage'
+    step: 'withStepMismatchMessage',
+    type: 'withTypeMismatchMessage'
   };
   validityMap = {
     tooShort: 'minLength',
@@ -225,7 +236,8 @@ let validityMap;
     patternMismatch: 'pattern',
     rangeOverflow: 'max',
     rangeUnderflow: 'min',
-    stepMismatch: 'step'
+    stepMismatch: 'step',
+    typeMismatch: 'type'
   };
 }
 class GValidator {
@@ -256,6 +268,10 @@ class GValidator {
       }
     }
   }
+  hasConstraint(constraint) {
+    var _this$track;
+    return ((_this$track = this.track) === null || _this$track === void 0 ? void 0 : _this$track.includes(constraint)) || false;
+  }
   withRequiredMessage(message) {
     return this.__addConstraintValidationHandler('valueMissing', message);
   }
@@ -294,14 +310,14 @@ class GValidator {
   __addConstraintValidationHandler(validityKey, message) {
     if (this.track) {
       if (this.track.includes(validityKey)) {
-        console.warn(`[Duplicate Handlers] - handler for '${validityKey}' has already been defined`);
+        console.warn(`DEV ONLY - [Duplicate Handlers] - handler for '${validityKey}' has already been defined`);
       }
       this.track.push(validityKey);
     }
     this._constraintHandlers.push((input, key) => {
       {
         if (validityKey && validityMap[validityKey] && typeof input[validityMap[validityKey]] === 'undefined') {
-          console.warn(`[Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${validityKey}' but the input hasn't described the constraint '${validityMap[validityKey]}'.\nadd '${validityMap[validityKey]}' to the input props.\nexample:\n<GInput formKey='${input.formKey}' ${validityMap[validityKey]}={...} />\n\nor either remove '.${handlersMap[validityMap[validityKey]]}(...)' validation`);
+          console.warn(`DEV ONLY - [Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${validityKey}' but the input hasn't described the constraint '${validityMap[validityKey]}'.\nadd '${validityMap[validityKey]}' to the input props.\nexample:\n<GInput formKey='${input.formKey}' ${validityMap[validityKey]}={...} />\n\nor either remove '.${handlersMap[validityMap[validityKey]]}(...)' validation`);
         }
       }
       if (key === validityKey) {
@@ -314,45 +330,22 @@ class GValidator {
   }
 }
 
-const useForm = (children, validators = {}, optimized = false) => {
-  const initialValues = React.useMemo(() => {
-    const values = _buildFormInitialValues(typeof children === 'function' ? children({}) : children);
-    {
-      Object.keys(values.state.fields).forEach(key => {
-        const input = values.state.fields[key];
-        const validator = validators[key];
-        if (validator instanceof GValidator) {
-          var _validator$track;
-          const validityKeys = (_validator$track = validator.track) === null || _validator$track === void 0 ? void 0 : _validator$track.filter(key => validityMap[key]);
-          validityKeys === null || validityKeys === void 0 || validityKeys.forEach(vKey => {
-            if (typeof input[validityMap[vKey]] === 'undefined') {
-              console.warn(`[Missing Prop] - the input '${input.formKey}' has registered validator for the violation '${vKey}' but the input hasn't described the constraint '${validityMap[vKey]}'.\nadd '${validityMap[vKey]}' to the input props.\nexample:\n<GInput formKey='${input.formKey}' ${validityMap[vKey]}={...} />\n\nor either remove '.${handlersMap[validityMap[vKey]]}(...)' validation`);
-            }
-          });
-          Object.entries(validityMap).forEach(([validityKey, constraint]) => {
-            var _validator$track2;
-            if (typeof input[constraint] !== 'undefined' && !((_validator$track2 = validator.track) !== null && _validator$track2 !== void 0 && _validator$track2.some(trackKey => validityKey === trackKey))) {
-              console.warn(`[Missing Validator] - the input '${input.formKey}' has described the constraint '${constraint}' but the input hasn't registered a validator to handle it.\nregister a handler '${handlersMap[constraint]}' for the input validator to handle the '${validityKey}' violation.\nexample:\ncosnt validators = {\n\t${input.formKey}: new GValidator().${handlersMap[constraint]}(...)\n}`);
-            }
-          });
-        }
-      });
-    }
-    return values;
-  }, []);
-  const [state, setState] = React.useState(initialValues.state);
+const useFormHandlers = (getState, setState, validators = {}, optimized = false) => {
   const _viHandler = (input, e) => {
     if (!input) return;
     const element = e && e.target;
+    const hasInitialValue = !input.dirty && input.value && !input.touched;
+    if (!element && !hasInitialValue) return;
     if (typeof document !== 'undefined' && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement)) {
       if (!input.checkValidity) input.checkValidity = () => element.checkValidity();
-      if (!input.dirty && input.value) {
+      if (hasInitialValue) {
         _checkInputManually(input);
         _dispatchChanges(input, input.formKey);
         return;
       }
       element.setCustomValidity('');
-      const validityKey = _findValidityKey(element.validity);
+      const exclude = input.type && (input.pattern || hasCustomValidation(input)) ? ['typeMismatch'] : [];
+      const validityKey = _findValidityKey(element.validity, exclude);
       _validateInput(input, validityKey, v => element.setCustomValidity(v));
       if (!validityKey && input.error) {
         element.setCustomValidity(input.errorText || 'error');
@@ -365,36 +358,38 @@ const useForm = (children, validators = {}, optimized = false) => {
     }
   };
   const _checkInputManually = input => {
+    const exclude = input.type && (input.pattern || hasCustomValidation(input)) ? ['typeMismatch'] : [];
     let validityKey = _findValidityKey({
       valueMissing: input.required && !input.value || false,
+      typeMismatch: _checkTypeMismatch(input),
       tooShort: input.minLength && input.value.toString().length < input.minLength || false,
       tooLong: input.maxLength && input.value.toString().length > input.maxLength || false,
       patternMismatch: input.pattern && _checkResult(input.pattern, input.value) || false,
       rangeUnderflow: input.min && Number(input.value) < Number(input.min) || false,
       rangeOverflow: input.max && Number(input.value) > Number(input.max) || false
-    });
+    }, exclude);
     if (!validityKey && input.error) {
       validityKey = 'customError';
     }
     _validateInput(input, validityKey);
     return !input.error;
   };
-  const _updateInputHandler = (key, e, unknown) => {
-    const value = _extractValue(e, unknown);
-    const input = _updateInput(key, value);
+  const _updateInputHandler = (input, e, unknown) => {
+    input.value = _extractValue(e, unknown);
     _viHandler(input, e);
   };
   const _validateInput = (input, validityKey, setValidity) => {
     const inputValidator = validators[input.validatorKey || input.formKey] || validators['*'];
-    inputValidator && __validateInput(input, inputValidator, validityKey, setValidity);
+    {
+      if (validityKey && !(inputValidator !== null && inputValidator !== void 0 && inputValidator.hasConstraint(validityKey))) {
+        if (validityKey === 'typeMismatch') console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator / custom validation / pattern validator are missing.\nadd '${handlersMap[validityMap[validityKey]]}' or 'withCustomValidation' or '${handlersMap[validityMap.patternMismatch]}' to the input validator.\nexample:\nconst validators: GValidators = {\n\temail: new GValidator().withPatternMismatchMessage('pattern mismatch'),\n\t...\n}\n\nor either remove the constraint '${validityMap[validityKey]}' from the input props`);else console.warn(`DEV ONLY - [Missing Validator] - the input '${input.formKey}' has described the constraint '${validityMap[validityKey]}' however, a correspond validator is missing.\nadd '${handlersMap[validityMap[validityKey]]}' to the input validator.\nexample:\nconst validators: GValidators = {\n\temail: new GValidator().withPatternMismatchMessage('pattern mismatch'),\n\t...\n}\n\nor either remove the constraint '${validityMap[validityKey]}' from the input props`);
+      }
+    }
+    if (inputValidator) {
+      __validateInput(input, inputValidator, validityKey, setValidity);
+    }
     input.touched = true;
   };
-  const _updateInput = (key, value) => {
-    const input = state.fields[key];
-    input.value = value;
-    input.dirty = true;
-    return input;
-  };
   const _dispatchChanges = (changes, key) => setState(prev => {
     if (key) {
       return {
@@ -414,13 +409,14 @@ const useForm = (children, validators = {}, optimized = false) => {
     };
   });
   const __validateInput = (input, inputValidator, validityKey, setValidity) => {
+    const fields = getState().fields;
     for (const index in inputValidator.constraintHandlers) {
       const result = inputValidator.constraintHandlers[index](input, validityKey);
       input.error = _checkResult(result, input.value);
       if (input.error) return;
     }
     for (const index in inputValidator.handlers) {
-      const result = inputValidator.handlers[index](input, state.fields);
+      const result = inputValidator.handlers[index](input, fields);
       input.error = _checkResult(result, input.value);
       if (input.error) return;
     }
@@ -430,7 +426,7 @@ const useForm = (children, validators = {}, optimized = false) => {
       _debounce(input.debounce || 300, `${input.gid}-async`).then(() => {
         const validateAsync = async () => {
           for (const index in inputValidator.asyncHandlers) {
-            const result = await inputValidator.asyncHandlers[index](input, state.fields);
+            const result = await inputValidator.asyncHandlers[index](input, fields);
             input.error = _checkResult(result, input.value);
             if (input.error) break;
           }
@@ -439,184 +435,264 @@ const useForm = (children, validators = {}, optimized = false) => {
             error: input.error,
             errorText: input.errorText
           }, input.formKey);
-          setValidity && setValidity(input.errorText);
+          if (setValidity) {
+            setValidity(input.errorText);
+          }
         };
         validateAsync();
       });
     }
   };
+  const hasCustomValidation = input => {
+    const validator = validators[input.validatorKey || input.formKey] || validators['*'];
+    return validator && (validator.asyncHandlers.length > 0 || validator.handlers.length > 0);
+  };
   return {
-    state,
     _updateInputHandler,
     _viHandler,
     _dispatchChanges,
     optimized,
-    key: initialValues.key,
     _createInputChecker: _checkInputManually
   };
 };
 
-const gFormContext = React.createContext({
-  state: {
-    fields: {},
-    loading: false
-  },
-  _updateInputHandler: () => null,
-  _viHandler: () => null,
-  _dispatchChanges: () => null,
-  _createInputChecker: () => false,
-  optimized: false,
-  key: ''
+const GFormContext = React.createContext({});
+const GFormContextProvider = ({
+  children,
+  initialState,
+  validators,
+  optimized
+}) => {
+  const stateRef = React.useRef(initialState);
+  const listeners = React.useRef(new Set());
+  const setState = React.useCallback(updater => {
+    stateRef.current = typeof updater === 'function' ? updater(stateRef.current) : updater;
+    listeners.current.forEach(l => l());
+  }, []);
+  const handlers = useFormHandlers(() => stateRef.current, setState, validators, optimized);
+  const getState = React.useCallback(() => stateRef.current, []);
+  const subscribe = React.useCallback(listener => {
+    listeners.current.add(listener);
+    return () => listeners.current.delete(listener);
+  }, []);
+  React.useEffect(() => {
+    for (const fieldKey in initialState.fields) {
+      initialState.fields[fieldKey].dispatchChanges = changes => handlers._dispatchChanges(changes, fieldKey);
+    }
+  }, []);
+  const store = React.useRef({
+    getState,
+    setState,
+    subscribe,
+    handlers
+  });
+  return React.createElement(GFormContext.Provider, {
+    value: store.current
+  }, children);
+};
+const useFormStore = () => {
+  const store = React.useContext(GFormContext);
+  if (!store) throw new Error('useGFormStore must be used within `GForm` component');
+  return store;
+};
+const useFormSelector = selector => {
+  const store = useFormStore();
+  return React.useSyncExternalStore(store.subscribe, () => selector(store.getState()), () => selector(store.getState()));
+};
+function createSelector(selectors, combiner) {
+  let lastArgs = [];
+  let lastResult;
+  return state => {
+    const args = selectors.map(fn => fn(state));
+    if (lastArgs.length === args.length && args.every((val, i) => val === lastArgs[i])) {
+      return lastResult;
+    }
+    lastArgs = args;
+    lastResult = combiner(...args);
+    return lastResult;
+  };
+}
+
+const selectFields = [state => state.fields];
+const selectFirstInvalidField = createSelector(selectFields, fields => {
+  for (const f in fields) {
+    if (fields[f].error) {
+      return true;
+    }
+  }
+  return false;
+});
+const makeSelectFields = (keys = []) => createSelector(selectFields, fields => {
+  const selected = keys.map(key => fields[key]).filter(Boolean);
+  return selected.length ? selected : null;
 });
-const useGenericFormContext = () => React.useContext(gFormContext);
-const GFormContextProvider = gFormContext.Provider;
 
-const GForm = (() => {
-  return React.forwardRef(({
-    loader = React.createElement("div", null, "loading"),
-    stateRef,
-    onSubmit,
-    onChange,
-    onPaste,
-    children,
-    validators,
-    onInit,
-    optimized,
-    ...rest
-  }, ref) => {
-    const formRef = React.useRef(null);
-    const values = useForm(children, validators, optimized);
-    const {
-      state,
-      _updateInputHandler,
-      _viHandler,
-      _dispatchChanges,
-      key
-    } = values;
-    const refHandler = element => {
-      if (ref) {
-        if (typeof ref === 'function') {
-          ref(element);
-        } else {
-          ref.current = element;
-        }
+const FormRenderer = React.forwardRef(({
+  stateRef,
+  onSubmit,
+  onChange,
+  onPaste,
+  onKeyDown,
+  onKeyUp,
+  children,
+  onInit,
+  ...rest
+}, ref) => {
+  const formRef = React.useRef(null);
+  const {
+    getState,
+    handlers
+  } = useFormStore();
+  const isFormInvalid = useFormSelector(selectFirstInvalidField);
+  const refHandler = React.useCallback(element => {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(element);
+      } else {
+        ref.current = element;
+      }
+    }
+    formRef.current = element;
+  }, [ref]);
+  const getFormState = React.useCallback(() => {
+    const fields = getState().fields;
+    const formState = {
+      ...fields,
+      isValid: !isFormInvalid,
+      isInvalid: isFormInvalid,
+      toRawData: options => _toRawData(fields, options),
+      toFormData: () => _toFormData(formRef.current),
+      toURLSearchParams: _toURLSearchParams,
+      checkValidity: function () {
+        this.isValid = formRef.current && formRef.current.checkValidity() || false;
+        this.isInvalid = !this.isValid;
+        return this.isValid;
+      },
+      dispatchChanges: changes => handlers._dispatchChanges({
+        fields: _merge({}, fields, changes)
+      })
+    };
+    if (stateRef) stateRef.current = formState;
+    return formState;
+  }, [isFormInvalid]);
+  const formComponent = React.useMemo(() => {
+    const state = getFormState();
+    const formChildren = typeof children === 'function' ? children(state) : children;
+    const _onSubmit = e => {
+      const state = getFormState();
+      if (state.isValid && onSubmit) {
+        onSubmit(state, e);
       }
-      formRef.current = element;
     };
-    const formState = React.useMemo(() => {
-      const _isFormValid = _checkIfFormIsValid(state.fields);
-      const formState = {
-        ...state.fields,
-        isValid: _isFormValid,
-        isInvalid: !_isFormValid,
-        loading: state.loading,
-        toRawData: options => _toRawData(state.fields, options),
-        toFormData: () => _toFormData(formRef.current),
-        toURLSearchParams: _toURLSearchParams,
-        checkValidity: function () {
-          this.isValid = formRef.current && formRef.current.checkValidity() || false;
-          this.isInvalid = !this.isValid;
-          return this.isValid;
-        },
-        setLoading: p => _dispatchChanges({
-          loading: typeof p === 'function' ? p(state.loading) : p
-        }),
-        dispatchChanges: changes => _dispatchChanges({
-          fields: _merge({}, state.fields, changes)
-        })
-      };
-      if (stateRef) stateRef.current = formState;
-      return formState;
-    }, [state.fields]);
-    const formComponent = React.useMemo(() => {
-      const formChildren = typeof children === 'function' ? children(formState) : children;
-      const _onSubmit = e => {
-        if (formState.isValid && onSubmit) {
-          onSubmit(formState, e);
-        }
-      };
-      let _onPaste;
-      if (onPaste) {
-        _onPaste = e => onPaste(formState, e);
+    let _onPaste, _onChange, _onKeyDown, _onKeyUp;
+    if (onPaste) {
+      _onPaste = e => onPaste(state, e);
+    }
+    if (onKeyDown) {
+      _onKeyDown = e => onKeyDown(state, e);
+    }
+    if (onKeyUp) {
+      _onKeyUp = e => onKeyUp(state, e);
+    }
+    if (handlers.optimized) {
+      if (onChange) {
+        _onChange = (e, unknown) => {
+          handlers._updateInputHandler(state[e.target.name], e, unknown);
+          onChange(state, e);
+        };
+      } else {
+        _onChange = (e, unknown) => {
+          handlers._updateInputHandler(state[e.target.name], e, unknown);
+        };
       }
-      return optimized ? React.createElement("form", _extends({}, rest, {
+      return React.createElement("form", _extends({}, rest, {
         ref: refHandler,
         onPaste: _onPaste,
-        onBlur: e => {
-          _viHandler(state.fields[e.target.name], e);
-        },
+        onKeyDown: _onKeyDown,
+        onKeyUp: _onKeyUp,
+        onBlur: e => handlers._viHandler(state[e.target.name], e),
         onInvalid: e => {
           e.preventDefault();
-          _viHandler(state.fields[e.target.name], e);
-        },
-        onChange: (e, unknown) => {
-          _updateInputHandler(e.target.name, e, unknown);
-          onChange && onChange(formState, e);
+          handlers._viHandler(state[e.target.name], e);
         },
+        onChange: _onChange,
         onSubmit: _onSubmit
-      }), formChildren) : React.createElement("form", _extends({}, rest, {
-        onChange: e => onChange && onChange(formState, e),
-        ref: refHandler,
-        onSubmit: _onSubmit,
-        onPaste: _onPaste
       }), formChildren);
-    }, [formState, children]);
-    React.useEffect(() => {
-      if (!hasSubmitter(formRef.current)) {
-        console.warn(`[No Submit Button] - you have created a form without a button type=submit, this will prevent the onSubmit event from being fired.\nif you have a button with onClick event that handle the submission of the form then ignore this warning\nbut don't forget to manually invoke the checkValidity() function to check if the form is valid before perfoming any action, for example:\nif (formState.checkValidity()) { \n\t//do somthing\n}\n`);
-      }
-      if (onInit) {
-        const _handler = _c => _dispatchChanges({
-          fields: _merge({}, state.fields, _c)
+    }
+    if (onChange) {
+      _onChange = e => onChange(state, e);
+    }
+    return React.createElement("form", _extends({}, rest, {
+      ref: refHandler,
+      onSubmit: _onSubmit,
+      onChange: _onChange,
+      onPaste: _onPaste,
+      onKeyDown: _onKeyDown,
+      onKeyUp: _onKeyUp
+    }), formChildren);
+  }, [children, getFormState]);
+  React.useEffect(() => {
+    const state = getFormState();
+    if (!hasSubmitter(formRef.current)) {
+      console.warn(`DEV ONLY - [No Submit Button] - you have created a form without a button type=submit, this will prevent the onSubmit event from being fired.\nif you have a button with onClick event that handle the submission of the form then ignore this warning\nbut don't forget to manually invoke the checkValidity() function to check if the form is valid before perfoming any action, for example:\nif (formState.checkValidity()) { \n\t//do somthing\n}\n`);
+    }
+    if (onInit) {
+      const changes = onInit(state);
+      if (changes) {
+        const _handler = _c => handlers._dispatchChanges({
+          fields: _merge({}, state, _c)
         });
-        const changes = onInit(formState);
-        changes instanceof Promise ? changes.then(_handler) : _handler(changes);
+        if (changes instanceof Promise) {
+          changes.then(_handler);
+        } else _handler(changes);
       }
-      const dipatchers = {};
-      Object.values(state.fields).forEach(field => {
-        dipatchers[field.formKey] = {
-          dispatchChanges: changes => _dispatchChanges(changes, field.formKey)
-        };
-        if (!field.value) return;
-        _viHandler(field);
-      });
-      _dispatchChanges({
-        fields: _merge(dipatchers, state.fields)
-      });
-    }, []);
-    return React.createElement(GFormContextProvider, {
-      value: values,
-      key: key
-    }, state.loading ? loader : formComponent);
-  });
-})();
+    }
+    const fields = getState().fields;
+    for (const fieldKey in fields) {
+      const field = fields[fieldKey];
+      if (!field.value) continue;
+      handlers._viHandler(field);
+    }
+  }, [getFormState]);
+  return formComponent;
+});
+const GForm = React.forwardRef(({
+  children,
+  validators,
+  optimized,
+  ...props
+}, ref) => {
+  const initialState = React.useMemo(() => {
+    return _buildFormInitialValues(typeof children === 'function' ? children({}) : children);
+  }, [children]);
+  return React.createElement(GFormContextProvider, {
+    key: initialState.key,
+    initialState: initialState,
+    validators: validators,
+    optimized: optimized
+  }, React.createElement(FormRenderer, _extends({
+    ref: ref
+  }, props), children));
+});
 
-const GInput = React.forwardRef(({
+const _GInput = React.forwardRef(({
   formKey,
   element,
   title,
-  type,
-  validatorKey,
+  type = 'text',
   fetch,
-  fetchDeps = [],
+  fetchDeps,
   optimized,
+  debounce = 300,
   defaultChecked,
   defaultValue,
   checked,
+  validatorKey,
   value,
-  debounce = 300,
   ...rest
 }, ref) => {
-  const {
-    state: {
-      fields
-    },
-    _updateInputHandler,
-    _dispatchChanges,
-    optimized: formOptimized,
-    _viHandler
-  } = useGenericFormContext();
-  const inputState = fields[formKey];
+  const inputState = useFormSelector(state => state.fields[formKey]);
+  const store = useFormStore();
   const _element = React.useMemo(() => {
     let value, checked;
     if (type === 'checkbox') checked = inputState.value || false;else value = inputState.value || '';
@@ -631,40 +707,65 @@ const GInput = React.forwardRef(({
       'aria-required': inputState.required,
       title: title || inputState.errorText
     };
-    if (!formOptimized || !optimized) {
-      _props.onBlur = e => {
-        _viHandler(inputState, e);
-        rest.onBlur && rest.onBlur(e);
+    if (!store.handlers.optimized || !optimized) {
+      _props.onBlur = rest.onBlur ? e => {
+        store.handlers._viHandler(inputState, e);
+        rest.onBlur(e);
+      } : e => {
+        store.handlers._viHandler(inputState, e);
       };
-      _props.onInvalid = e => {
+      _props.onInvalid = rest.onInvalid ? e => {
         e.preventDefault();
-        _viHandler(inputState, e);
-        rest.onInvalid && rest.onInvalid(e);
+        store.handlers._viHandler(inputState, e);
+        rest.onInvalid(e);
+      } : e => {
+        e.preventDefault();
+        store.handlers._viHandler(inputState, e);
       };
-      _props.onChange = (e, unknown) => {
-        _updateInputHandler(formKey, e, unknown);
-        rest.onChange && rest.onChange(e);
+      _props.onChange = rest.onChange ? (e, unknown) => {
+        store.handlers._updateInputHandler(inputState, e, unknown);
+        rest.onChange(e);
+      } : (e, unknown) => {
+        store.handlers._updateInputHandler(inputState, e, unknown);
       };
+      if (!inputState.touched) {
+        _props.onFocus = rest.onFocus ? e => {
+          rest.onFocus(e);
+          inputState.dispatchChanges({
+            touched: true
+          });
+        } : () => {
+          inputState.dispatchChanges({
+            touched: true
+          });
+        };
+      }
     }
     if (element) {
       return element(inputState, _props);
     }
     return React.createElement("input", _props);
   }, [inputState, element]);
-  const _fetchDeps = React.useMemo(() => fetchDeps.map(key => fields[key].value), [fields]);
+  const _fetchDeps = useFormSelector(makeSelectFields(fetchDeps));
+  const stableFetchDeps = React.useMemo(() => JSON.stringify(_fetchDeps), [_fetchDeps]);
   React.useEffect(() => {
     if (fetch) {
-      inputState.dispatchChanges = changes => _dispatchChanges(changes, formKey);
       _debounce(debounce, `${inputState.gid}-fetch`).then(() => {
-        const res = fetch(inputState, fields);
-        res instanceof Promise ? res.then(state => state && _dispatchChanges(state, formKey)) : res && _dispatchChanges(res, formKey);
+        const res = fetch(inputState, store.getState().fields);
+        if (res instanceof Promise) {
+          res.then(state => state && store.handlers._dispatchChanges(state, formKey));
+        } else if (res) {
+          store.handlers._dispatchChanges(res, formKey);
+        }
       });
     }
-  }, _fetchDeps);
+  }, [stableFetchDeps]);
   return _element;
 });
+const GInput = React.memo(_GInput);
 
 exports.GForm = GForm;
 exports.GInput = GInput;
 exports.GValidator = GValidator;
+exports.useFormSelector = useFormSelector;
 //# sourceMappingURL=gform-react.development.js.map