refactor: ConfigProvider form dependency inversion (#42604)

* refactor: dependency inversion

* chore: use rc-util

components/config-provider/index.tsx

@@ -1,13 +1,13 @@
 import { createTheme } from '@ant-design/cssinjs';
 import IconContext from '@ant-design/icons/lib/components/Context';
-import { FormProvider as RcFormProvider } from 'rc-field-form';
 import type { ValidateMessages } from 'rc-field-form/lib/interface';
-import { setValues } from 'rc-field-form/lib/utils/valueUtil';
 import useMemo from 'rc-util/lib/hooks/useMemo';
+import { merge } from 'rc-util/lib/utils/set';
 import type { ReactElement } from 'react';
 import * as React from 'react';
 import type { Options } from 'scroll-into-view-if-needed';
 import warning from '../_util/warning';
+import { ValidateMessagesContext } from '../form/context';
 import type { RequiredMark } from '../form/Form';
 import type { Locale } from '../locale';
 import LocaleProvider, { ANT_MARK } from '../locale';
@@ -293,8 +293,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
 
   const validateMessages = React.useMemo(
     () =>
-      setValues(
-        {},
+      merge(
         defaultLocale.Form?.defaultValidateMessages || {},
         memoedConfig.locale?.Form?.defaultValidateMessages || {},
         form?.validateMessages || {},
@@ -303,7 +302,11 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
   );
 
   if (Object.keys(validateMessages).length > 0) {
-    childNode = <RcFormProvider validateMessages={validateMessages}>{children}</RcFormProvider>;
+    childNode = (
+      <ValidateMessagesContext.Provider value={validateMessages}>
+        {children}
+      </ValidateMessagesContext.Provider>
+    );
   }
 
   if (locale) {

components/form/Form.tsx

@@ -12,7 +12,7 @@ import { SizeContextProvider } from '../config-provider/SizeContext';
 import useSize from '../config-provider/hooks/useSize';
 import type { ColProps } from '../grid/col';
 import type { FormContextProps } from './context';
-import { FormContext } from './context';
+import { FormContext, FormProvider, ValidateMessagesContext } from './context';
 import useForm, { type FormInstance } from './hooks/useForm';
 import useFormWarning from './hooks/useFormWarning';
 import type { FormLabelAlign } from './interface';
@@ -67,6 +67,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
 
   const mergedSize = useSize(size);
 
+  const contextValidateMessages = React.useContext(ValidateMessagesContext);
+
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     useFormWarning(props);
@@ -158,16 +160,23 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
   return wrapSSR(
     <DisabledContextProvider disabled={disabled}>
       <SizeContextProvider size={mergedSize}>
-        <FormContext.Provider value={formContextValue}>
-          <FieldForm
-            id={name}
-            {...restFormProps}
-            name={name}
-            onFinishFailed={onInternalFinishFailed}
-            form={wrapForm}
-            className={formClassName}
-          />
-        </FormContext.Provider>
+        <FormProvider
+          {...{
+            // This is not list in API, we pass with spread
+            validateMessages: contextValidateMessages,
+          }}
+        >
+          <FormContext.Provider value={formContextValue}>
+            <FieldForm
+              id={name}
+              {...restFormProps}
+              name={name}
+              onFinishFailed={onInternalFinishFailed}
+              form={wrapForm}
+              className={formClassName}
+            />
+          </FormContext.Provider>
+        </FormProvider>
       </SizeContextProvider>
     </DisabledContextProvider>,
   );

components/form/context.tsx

@@ -1,6 +1,6 @@
 import { FormProvider as RcFormProvider } from 'rc-field-form';
 import type { FormProviderProps as RcFormProviderProps } from 'rc-field-form/lib/FormContext';
-import type { Meta } from 'rc-field-form/lib/interface';
+import type { Meta, ValidateMessages } from 'rc-field-form/lib/interface';
 import omit from 'rc-util/lib/omit';
 import type { FC, PropsWithChildren, ReactNode } from 'react';
 import * as React from 'react';
@@ -92,3 +92,5 @@ export const NoFormStyle: FC<NoFormStyleProps> = ({ children, status, override }
     </FormItemInputContext.Provider>
   );
 };
+
+export const ValidateMessagesContext = React.createContext<ValidateMessages | undefined>(undefined);

package.json

@@ -153,7 +153,7 @@
     "rc-tree": "~5.7.4",
     "rc-tree-select": "~5.9.0",
     "rc-upload": "~4.3.0",
-    "rc-util": "^5.31.2",
+    "rc-util": "^5.32.0",
     "scroll-into-view-if-needed": "^3.0.3",
     "throttle-debounce": "^5.0.0"
   },