@ant-design/pro-components 3.1.3-1 → 3.1.5-0

package/es/form/components/Checkbox/index.js

@@ -1,3 +1,4 @@
+import { omit } from '@rc-component/util';
 import { Checkbox } from 'antd';
 import React from 'react';
 import { FieldCheckbox } from "../../../field";
@@ -66,9 +67,12 @@ const ProFormCheckboxComponents = /*#__PURE__*/React.forwardRef(({
   fieldProps,
   children
 }, ref) => {
+  const {
+    ...restFieldProps
+  } = fieldProps || {};
   return /*#__PURE__*/_jsx(Checkbox, {
     ref: ref,
-    ...fieldProps,
+    ...omit(restFieldProps, ['allowClear']),
     children: children
   });
 });

package/es/form/components/DatePicker/index.js

@@ -8,7 +8,5 @@ ExportComponent.Week = ProFormDatePickerWeek;
 ExportComponent.Month = ProFormDatePickerMonth;
 ExportComponent.Quarter = ProFormDatePickerQuarter;
 ExportComponent.Year = ProFormDatePickerYear;
-// @ts-ignore
-// eslint-disable-next-line no-param-reassign
 ExportComponent.displayName = 'ProFormComponent';
 export default ExportComponent;

package/es/form/components/Digit/DigitRange.js

@@ -4,9 +4,12 @@ import { ProConfigProvider } from "../../../provider";
 import ProFormField from "../Field";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * 数组选择组件
+ * 数字范围输入组件
  *
- * @param
+ * @param fieldProps
+ * @param proFieldProps
+ * @param rest
+ * @param ref
  */
 const ProFormDigit = ({
   fieldProps,

package/es/form/components/Digit/index.js

@@ -4,9 +4,14 @@ import { ProConfigProvider } from "../../../provider";
 import ProFormField from "../Field";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * 数组选择组件
+ * 数字输入组件
  *
- * @param
+ * @param fieldProps
+ * @param min
+ * @param proFieldProps
+ * @param max
+ * @param rest
+ * @param ref
  */
 const ProFormDigit = ({
   fieldProps,

package/es/form/components/FieldSet/index.js

@@ -83,12 +83,22 @@ const FieldSet = props => {
   } = useGridHelpers(rest);
   const Wrapper = useCallback(({
     children: dom
-  }) => /*#__PURE__*/_jsx(Components, {
-    ...space,
-    align: "start",
-    wrap: true,
-    children: dom
-  }), [Components, space]);
+  }) => {
+    // 从 space props 中提取 wrap，如果未定义则不传递
+    const spacePropsWithWrap = {
+      ...space,
+      align: 'start'
+    };
+
+    // 只有当 space 中明确定义了 wrap 时才传递，否则使用组件默认行为
+    if (type === 'space' && space?.wrap !== undefined) {
+      spacePropsWithWrap.wrap = space.wrap;
+    }
+    return /*#__PURE__*/_jsx(Components, {
+      ...spacePropsWithWrap,
+      children: dom
+    });
+  }, [Components, space, type]);
   return /*#__PURE__*/_jsx(RowWrapper, {
     Wrapper: Wrapper,
     children: list

package/es/form/components/FormItem/FormItemRender/index.d.ts

@@ -62,7 +62,7 @@ export declare function pickControlProps(props: FormControlInjectProps): {
     onChange: (value: any) => void;
 };
 /**
- * 提取props中的 value、onChange 和 id 属性
+ * 提取 props 中的 value、onChange、id 及无障碍属性（aria-describedby、aria-invalid、aria-required）
  */
 export declare function pickControlPropsWithId(props: FormControlInjectProps): {
     id: string;

package/es/form/components/FormItem/FormItemRender/index.js

@@ -84,14 +84,22 @@ export function pickControlProps(props) {
     onChange: value => props.onChange(value?.target ? value.target.value : value)
   };
 }
+const ARIA_CONTROL_ATTRS = ['aria-describedby', 'aria-invalid', 'aria-required'];
 
 /**
- * 提取props中的 value、onChange 和 id 属性
+ * 提取 props 中的 value、onChange、id 及无障碍属性（aria-describedby、aria-invalid、aria-required）
  */
 export function pickControlPropsWithId(props) {
+  const ariaAttrs = ARIA_CONTROL_ATTRS.reduce((acc, key) => {
+    if (props[key] !== undefined) {
+      acc[key] = props[key];
+    }
+    return acc;
+  }, {});
   return {
     ...pickControlProps(props),
-    id: props.id
+    id: props.id,
+    ...ariaAttrs
   };
 }
 

package/es/form/components/FormItem/Group/index.js

@@ -127,7 +127,7 @@ const Group = /*#__PURE__*/React.forwardRef((props, ref) => {
       style: style,
       ref: ref,
       children: [hiddenDoms, (title || tooltip || extra) && /*#__PURE__*/_jsx("div", {
-        className: `${className}-title ${hashId}`.trim(),
+        className: clsx(`${className}-title`, hashId),
         style: titleStyle,
         onClick: () => {
           setCollapsed(!collapsed);

package/es/form/components/FormItem/index.js

@@ -14,8 +14,8 @@ const FormItemProvide = /*#__PURE__*/React.createContext({});
 /**
  * 把value扔给 fieldProps，方便给自定义用
  *
- * @param param0
  * @returns
+ * @param formFieldProps
  */
 const WithValueFomFiledProps = formFieldProps => {
   const {
@@ -85,11 +85,14 @@ const WithValueFomFiledProps = formFieldProps => {
     [valuePropName]: formFieldProps[valuePropName],
     ...filedChildren.props,
     onChange: finalChange,
-    fieldProps: {
-      ...filedChildren.props?.fieldProps,
-      ...fieldPropsFromRest,
-      ...fieldProps
-    },
+    // 只有当子组件是 ProFormComponent 时才传递 fieldProps，避免传递给原生 DOM 元素
+    ...(!isProFormComponent && fieldProps ? {
+      fieldProps: {
+        ...filedChildren.props?.fieldProps,
+        ...fieldPropsFromRest,
+        ...fieldProps
+      }
+    } : {}),
     ...(variantFromRest !== undefined && {
       variant: variantFromRest
     }),
@@ -168,7 +171,6 @@ const WarpFormItem = ({
       getValueProps: getValuePropsFunc,
       children: children
     });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [addonAfter, addonBefore, children, convertValue?.toString(), props]);
   return /*#__PURE__*/_jsx(FormItemProvide.Provider, {
     value: {

package/es/form/components/FormItem/warpField.js

@@ -38,8 +38,6 @@ const ignoreWidthValueType = ['switch', 'radioButton', 'radio', 'rate'];
  */
 export function warpField(Field, config) {
   // 标记是否是 ProForm 的组件
-  // @ts-ignore
-  // eslint-disable-next-line no-param-reassign
   Field.displayName = 'ProFormComponent';
   const FieldWithContext = props => {
     const {
@@ -99,9 +97,7 @@ export function warpField(Field, config) {
         formItemProps: getFormItemProps?.(),
         fieldProps: getFieldProps?.()
       };
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [getFieldProps, getFormItemProps, rest.dependenciesValues, onlyChange]);
+    }, [getFieldProps, getFormItemProps, rest.dependenciesValues, onlyChange]);
     const fieldProps = useDeepCompareMemo(() => {
       const newFieldProps = {
         ...(ignoreFormItem ? omitUndefined({
@@ -143,8 +139,6 @@ export function warpField(Field, config) {
       if (Array.isArray(prefixName) && name) name = `${prefixName.join('.')}.${name}`;
       const key = name && `form-${contextValue.formKey ?? ''}-field-${name}`;
       return key;
-
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stringify(otherProps?.name), prefixName, contextValue.formKey]);
     const onChange = useRefFunction((...restParams) => {
       if (getFormItemProps || getFieldProps) {
@@ -161,7 +155,6 @@ export function warpField(Field, config) {
       };
       if (isIgnoreWidth) Reflect.deleteProperty(newStyle, 'width');
       return omitUndefined(newStyle);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [stringify(fieldProps?.style), contextValue.grid, isIgnoreWidth, width]);
     const className = useDeepCompareMemo(() => {
       const isSizeEnum = width && WIDTH_SIZE_ENUM[width];
@@ -191,15 +184,12 @@ export function warpField(Field, config) {
       };
     }, [allowClear, className, onChange, fieldProps, style]);
     const field = useDeepCompareMemo(() => {
-      return /*#__PURE__*/_jsx(Field
-      // @ts-ignore
-      , {
+      return /*#__PURE__*/_jsx(Field, {
         ...rest,
         fieldProps: fieldFieldProps,
         proFieldProps: fieldProFieldProps,
         ref: props?.fieldRef
       }, props.proFormFieldKey || props.name);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [fieldProFieldProps, fieldFieldProps, rest]);
 
     // 使用useMemo包裹避免不必要的re-render
@@ -210,9 +200,7 @@ export function warpField(Field, config) {
       , {
         label: label && proFieldProps?.light !== true ? label : undefined,
         tooltip: proFieldProps?.light !== true && tooltip,
-        valuePropName: valuePropName
-        // @ts-ignore
-        ,
+        valuePropName: valuePropName,
         ...otherProps,
         ignoreFormItem: ignoreFormItem,
         transform: transform,

package/es/form/components/List/ListContainer.js

@@ -1,6 +1,7 @@
 import { PlusOutlined } from '@ant-design/icons';
 import { omit } from '@rc-component/util';
 import { Button } from 'antd';
+import { clsx } from 'clsx';
 import { useContext, useMemo, useRef, useState } from 'react';
 import { ProProvider, useIntl } from "../../../provider";
 import { nanoid, runFunction } from "../../../utils";
@@ -97,7 +98,7 @@ const ProFormListContainer = props => {
       creatorButtonText = intl.getMessage('editableTable.action.add', '添加一行数据')
     } = creatorButtonProps || {};
     return /*#__PURE__*/_jsx(Button, {
-      className: `${prefixCls}-creator-button-${position} ${hashId || ''}`.trim(),
+      className: clsx(`${prefixCls}-creator-button-${position}`, hashId),
       type: "dashed",
       loading: loading,
       block: true,

package/es/form/components/List/index.d.ts

@@ -1,9 +1,9 @@
 import type { ColProps } from 'antd';
-import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
 import type { FormListFieldData, FormListOperation, FormListProps } from 'antd/lib/form/FormList';
 import type { NamePath } from 'antd/lib/form/interface';
 import type { ReactNode } from 'react';
 import React from 'react';
+import type { LabelTooltipType } from '../../../utils';
 import type { ProFormGridConfig } from '../../typing';
 import type { ChildrenItemFunction, FormListActionGuard, ProFromListCommonProps } from './ListItem';
 declare const FormListContext: React.Context<Record<string, any> | (FormListFieldData & {

package/es/form/components/List/index.js

@@ -91,8 +91,6 @@ function ProFormList(props) {
     }
     return [listContext.name, rest.name].flat(1);
   }, [listContext.name, rest.name]);
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   useImperativeHandle(actionRef, () => ({
     ...actionRefs.current,
     get: index => {

package/es/form/components/Radio/index.js

@@ -1,3 +1,4 @@
+import { omit } from '@rc-component/util';
 import { Radio } from 'antd';
 import React from 'react';
 import FieldRadio from "../../../field/components/Radio";
@@ -70,8 +71,11 @@ const ProFormRadioComponents = /*#__PURE__*/React.forwardRef(({
   fieldProps,
   children
 }, ref) => {
+  const {
+    ...restFieldProps
+  } = fieldProps || {};
   return /*#__PURE__*/_jsx(Radio, {
-    ...fieldProps,
+    ...omit(restFieldProps, ['allowClear']),
     ref: ref,
     children: children
   });
@@ -83,8 +87,5 @@ const ProFormRadio = warpField?.(ProFormRadioComponents, {
 const WrappedProFormRadio = ProFormRadio;
 WrappedProFormRadio.Group = RadioGroup;
 WrappedProFormRadio.Button = Radio.Button;
-
-// @ts-ignore
-// eslint-disable-next-line no-param-reassign
 WrappedProFormRadio.displayName = 'ProFormComponent';
 export default WrappedProFormRadio;

package/es/form/components/SchemaForm/index.js

@@ -125,7 +125,6 @@ function BetaSchemaForm(props) {
     // like StepsForm's columns but not only for StepsForm
     if (columns.length && Array.isArray(columns[0])) return;
     return genItems(columns);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [columns, restProps?.open, action, type, formDomsDeps, formRef.current]);
 
   /**

package/es/form/components/SchemaForm/layoutType/StepsForm.js

@@ -24,7 +24,6 @@ const StepsForm = ({
     return steps?.map((step, index) => /*#__PURE__*/_createElement(BetaSchemaForm, {
       grid: grid,
       ...step,
-      // eslint-disable-next-line react/no-array-index-key
       key: index,
       layoutType: "StepForm",
       columns: columns[index]

package/es/form/components/Select/index.js

@@ -8,7 +8,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * 选择框
  *
- * @param
+ * @param fieldProps
+ * @param children
+ * @param params
+ * @param proFieldProps
+ * @param mode
+ * @param valueEnum
+ * @param request
+ * @param showSearch
+ * @param options
+ * @param rest
+ * @param ref
  */
 const ProFormSelectComponents = ({
   fieldProps,
@@ -119,6 +129,5 @@ const WrappedProFormSelect = ProFormSelect;
 WrappedProFormSelect.SearchSelect = ProFormSearchSelect;
 
 // @ts-ignore
-// eslint-disable-next-line no-param-reassign
 WrappedProFormSelect.displayName = 'ProFormComponent';
 export default WrappedProFormSelect;

package/es/form/components/Text/index.js

@@ -152,8 +152,5 @@ const Password = ({
 };
 const WrappedProFormText = ProFormText;
 WrappedProFormText.Password = Password;
-
-// @ts-ignore
-// eslint-disable-next-line no-param-reassign
 WrappedProFormText.displayName = 'ProFormComponent';
 export default WrappedProFormText;

package/es/form/components/UploadButton/index.js

@@ -70,8 +70,10 @@ const BaseProFormUploadButton = /*#__PURE__*/React.forwardRef(({
         children: [icon, title]
       }))
     }), previewImage && /*#__PURE__*/_jsx(Image, {
-      wrapperStyle: {
-        display: 'none'
+      styles: {
+        root: {
+          display: 'none'
+        }
       },
       ...imageProps,
       preview: {

package/es/form/components/UploadDragger/index.js

@@ -30,7 +30,6 @@ const BaseProFormUploadDragger = /*#__PURE__*/React.forwardRef(({
   // 如果配置了 max ，并且 超过了文件列表的大小，就不展示按钮
   const showUploadButton = (max === undefined || !value || value?.length < max) && mode !== 'read' && proFieldProps?.readonly !== true;
   return /*#__PURE__*/_jsxs(Upload.Dragger, {
-    // @ts-ignore
     ref: ref,
     name: "files",
     action: action,

package/es/form/helpers/grid.js

@@ -95,9 +95,5 @@ export const useGridHelpers = props => {
     rowProps: config?.rowProps,
     colProps: config?.colProps || colProps,
     Wrapper: config?.Wrapper
-  }),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [config?.Wrapper, config.grid, grid,
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  JSON.stringify([colProps, config?.colProps, config?.rowProps])]);
+  }), [config?.Wrapper, config.grid, grid, JSON.stringify([colProps, config?.colProps, config?.rowProps])]);
 };

package/es/form/layouts/DrawerForm/index.d.ts

@@ -3,8 +3,8 @@ import React from 'react';
 import type { CommonFormProps } from '../../BaseForm';
 export type CustomizeResizeType = {
     onResize?: () => void;
-    maxWidth?: DrawerProps['width'];
-    minWidth?: DrawerProps['width'];
+    maxWidth?: DrawerProps['size'];
+    minWidth?: DrawerProps['size'];
 };
 export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> = Omit<FormProps, 'onFinish' | 'title'> & CommonFormProps<T, U> & {
     /**
@@ -22,7 +22,7 @@ export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> =
     /** @name 提交数据时，禁用取消按钮的超时时间（毫秒）。 */
     submitTimeout?: number;
     /** @name 用于触发抽屉打开的 dom ，只能设置一个*/
-    trigger?: JSX.Element;
+    trigger?: React.JSX.Element;
     /** @name 受控的打开关闭 */
     open?: DrawerProps['open'];
     /** @name 打开关闭的事件 */
@@ -32,7 +32,7 @@ export type DrawerFormProps<T = Record<string, any>, U = Record<string, any>> =
     /** @name 抽屉的标题 */
     title?: DrawerProps['title'];
     /** @name 抽屉的宽度 */
-    width?: DrawerProps['width'];
+    width?: DrawerProps['size'];
     /**
      *
      * @name draggableDrawer

package/es/form/layouts/DrawerForm/index.js

@@ -25,9 +25,7 @@ function DrawerForm({
   open: propsOpen,
   ...rest
 }) {
-  noteOnce(
-  // eslint-disable-next-line @typescript-eslint/dot-notation
-  !rest['footer'] || !drawerProps?.footer, 'DrawerForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
+  noteOnce(!rest.footer || !drawerProps?.footer, 'DrawerForm 是一个 ProForm 的特殊布局，如果想自定义按钮，请使用 submit.render 自定义。');
   const resizeInfo = React.useMemo(() => {
     const defaultResize = {
       onResize: () => {},
@@ -53,7 +51,7 @@ function DrawerForm({
     wrapSSR,
     hashId
   } = useStyle(baseClassName);
-  const getCls = className => `${baseClassName}-${className} ${hashId}`;
+  const getCls = className => `${baseClassName}-${className}`;
   const [, forceUpdate] = useState([]);
   const [loading, setLoading] = useState(false);
   const [resizableDrawer, setResizableDrawer] = useState(false);
@@ -103,8 +101,6 @@ function DrawerForm({
     if (resizableDrawer) {
       setDrawerWidth(resizeInfo?.minWidth);
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [propsOpen, open, resizableDrawer]);
   useImperativeHandle(rest.formRef, () => {
     return formRef.current;

package/es/form/layouts/LightFilter/index.js

@@ -65,7 +65,6 @@ const LightFilterContainer = props => {
       collapseItems: collapseItemsArr,
       outsideItems: outsideItemsArr
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.items]);
   const renderCollapseLabelRender = () => {
     if (collapseLabel) {
@@ -73,7 +72,7 @@ const LightFilterContainer = props => {
     }
     if (collapse) {
       return /*#__PURE__*/_jsx(FilterOutlined, {
-        className: `${lightFilterClassName}-collapse-icon ${hashId}`.trim()
+        className: clsx(`${lightFilterClassName}-collapse-icon`, hashId)
       });
     }
     return /*#__PURE__*/_jsx(FieldLabel, {
@@ -87,7 +86,7 @@ const LightFilterContainer = props => {
       [`${lightFilterClassName}-effective`]: Object.keys(values).some(key => Array.isArray(values[key]) ? values[key].length > 0 : values[key])
     }),
     children: /*#__PURE__*/_jsxs("div", {
-      className: `${lightFilterClassName}-container ${hashId}`.trim(),
+      className: clsx(`${lightFilterClassName}-container`, hashId),
       children: [outsideItems.map((child, index) => {
         if (!child?.props) {
           return child;
@@ -100,7 +99,7 @@ const LightFilterContainer = props => {
         } = child?.props || {};
         const newPlacement = fieldProps?.placement ? fieldProps?.placement : placement;
         return /*#__PURE__*/_jsx("div", {
-          className: `${lightFilterClassName}-item ${hashId}`.trim(),
+          className: clsx(`${lightFilterClassName}-item`, hashId),
           children: /*#__PURE__*/React.cloneElement(child, {
             fieldProps: {
               ...child.props.fieldProps,
@@ -118,7 +117,7 @@ const LightFilterContainer = props => {
           })
         }, key || index);
       }), collapseItems.length ? /*#__PURE__*/_jsx("div", {
-        className: `${lightFilterClassName}-item ${hashId}`.trim(),
+        className: clsx(`${lightFilterClassName}-item`, hashId),
         children: /*#__PURE__*/_jsx(FilterDropdown, {
           padding: 24,
           open: open,
@@ -170,7 +169,7 @@ const LightFilterContainer = props => {
             }
             const newPlacement = fieldProps?.placement ? fieldProps?.placement : placement;
             return /*#__PURE__*/_jsx("div", {
-              className: `${lightFilterClassName}-line ${hashId}`.trim(),
+              className: clsx(`${lightFilterClassName}-line`, hashId),
               children: /*#__PURE__*/React.cloneElement(child, {
                 fieldProps: {
                   ...newFieldProps,

package/es/form/layouts/LoginForm/index.js

@@ -46,7 +46,7 @@ function LoginForm(props) {
     wrapSSR,
     hashId
   } = useStyle(baseClassName);
-  const getCls = className => `${baseClassName}-${className} ${hashId}`;
+  const getCls = className => `${baseClassName}-${className}`;
 
   /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
   const logoDom = useMemo(() => {
@@ -62,22 +62,22 @@ function LoginForm(props) {
     className: clsx(getCls('container'), hashId),
     style: containerStyle,
     children: [/*#__PURE__*/_jsxs("div", {
-      className: `${getCls('top')} ${hashId}`.trim(),
+      className: clsx(getCls('top'), hashId),
       children: [title || logoDom ? /*#__PURE__*/_jsxs("div", {
-        className: `${getCls('header')}`,
+        className: clsx(getCls('header'), hashId),
         children: [logoDom ? /*#__PURE__*/_jsx("span", {
-          className: getCls('logo'),
+          className: clsx(getCls('logo'), hashId),
           children: logoDom
         }) : null, title ? /*#__PURE__*/_jsx("span", {
-          className: getCls('title'),
+          className: clsx(getCls('title'), hashId),
           children: title
         }) : null]
       }) : null, subTitle ? /*#__PURE__*/_jsx("div", {
-        className: getCls('desc'),
+        className: clsx(getCls('desc'), hashId),
         children: subTitle
       }) : null]
     }), /*#__PURE__*/_jsxs("div", {
-      className: getCls('main'),
+      className: clsx(getCls('main'), hashId),
       style: {
         width: 328,
         ...contentStyle
@@ -88,7 +88,7 @@ function LoginForm(props) {
         submitter: submitter,
         children: [message, children]
       }), actions ? /*#__PURE__*/_jsx("div", {
-        className: getCls('main-other'),
+        className: clsx(getCls('main-other'), hashId),
         style: otherStyle,
         children: actions
       }) : null]

package/es/form/layouts/LoginFormPage/index.js

@@ -49,7 +49,7 @@ export function LoginFormPage(props) {
     wrapSSR,
     hashId
   } = useStyle(baseClassName);
-  const getCls = className => `${baseClassName}-${className} ${hashId}`.trim();
+  const getCls = className => `${baseClassName}-${className}`;
 
   /** 生成logo 的dom，如果是string 设置为图片 如果是个 dom 就原样保留 */
   const logoDom = useMemo(() => {
@@ -96,43 +96,43 @@ export function LoginFormPage(props) {
     }) : null, /*#__PURE__*/_jsxs("div", {
       className: clsx(baseClassName, hashId),
       children: [/*#__PURE__*/_jsx("div", {
-        className: getCls('notice'),
+        className: clsx(getCls('notice'), hashId),
         children: activityConfig && /*#__PURE__*/_jsxs("div", {
-          className: getCls('notice-activity'),
+          className: clsx(getCls('notice-activity'), hashId),
           style: activityConfig.style,
           children: [activityConfig.title && /*#__PURE__*/_jsx("div", {
-            className: getCls('notice-activity-title'),
+            className: clsx(getCls('notice-activity-title'), hashId),
             children: activityConfig.title
           }), activityConfig.subTitle && /*#__PURE__*/_jsx("div", {
-            className: getCls('notice-activity-subTitle'),
+            className: clsx(getCls('notice-activity-subTitle'), hashId),
             children: activityConfig.subTitle
           }), activityConfig.action && /*#__PURE__*/_jsx("div", {
-            className: getCls('notice-activity-action'),
+            className: clsx(getCls('notice-activity-action'), hashId),
             children: activityConfig.action
           })]
         })
       }), /*#__PURE__*/_jsx("div", {
-        className: getCls('left'),
+        className: clsx(getCls('left'), hashId),
         children: /*#__PURE__*/_jsxs("div", {
-          className: getCls('container'),
+          className: clsx(getCls('container'), hashId),
           style: containerStyle,
           children: [/*#__PURE__*/_jsxs("div", {
-            className: getCls('top'),
+            className: clsx(getCls('top'), hashId),
             children: [title || logoDom ? /*#__PURE__*/_jsxs("div", {
-              className: getCls('header'),
+              className: clsx(getCls('header'), hashId),
               children: [logoDom ? /*#__PURE__*/_jsx("span", {
-                className: getCls('logo'),
+                className: clsx(getCls('logo'), hashId),
                 children: logoDom
               }) : null, title ? /*#__PURE__*/_jsx("span", {
-                className: getCls('title'),
+                className: clsx(getCls('title'), hashId),
                 children: title
               }) : null]
             }) : null, subTitle ? /*#__PURE__*/_jsx("div", {
-              className: getCls('desc'),
+              className: clsx(getCls('desc'), hashId),
               children: subTitle
             }) : null]
           }), /*#__PURE__*/_jsxs("div", {
-            className: getCls('main'),
+            className: clsx(getCls('main'), hashId),
             style: mainStyle,
             children: [/*#__PURE__*/_jsxs(ProForm, {
               isKeyPressSubmit: true,
@@ -140,7 +140,7 @@ export function LoginFormPage(props) {
               submitter: submitter,
               children: [message, children]
             }), actions ? /*#__PURE__*/_jsx("div", {
-              className: getCls('other'),
+              className: clsx(getCls('other'), hashId),
               style: otherStyle,
               children: actions
             }) : null]

package/es/form/layouts/ModalForm/index.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
 import type { FormProps, ModalProps } from 'antd';
+import React from 'react';
 import type { CommonFormProps } from '../../BaseForm';
 export type ModalFormProps<T = Record<string, any>, U = Record<string, any>> = Omit<FormProps<T>, 'onFinish' | 'title'> & CommonFormProps<T, U> & {
     /**
@@ -17,7 +17,7 @@ export type ModalFormProps<T = Record<string, any>, U = Record<string, any>> = O
     /** @name 提交数据时，禁用取消按钮的超时时间（毫秒）。 */
     submitTimeout?: number;
     /** @name 用于触发抽屉打开的 dom */
-    trigger?: JSX.Element;
+    trigger?: React.JSX.Element;
     /** @name 受控的打开关闭 */
     open?: ModalProps['open'];
     /** @name 打开关闭的事件 */