feat(table): use @dnd-kit (#7131)

* feat(table): use @dnd-kit

* feat(table): use @dnd-kit

* feat(table): use @dnd-kit

* feat(table): use @dnd-kit

* feat(table): use @dnd-kit

* feat(table): use @dnd-kit

* feat(table): use @dnd-kit

.dumirc.ts

@@ -1,7 +1,7 @@
 import chalk from 'chalk';
+import { defineConfig } from 'dumi';
 import { readdirSync } from 'fs';
 import { join } from 'path';
-import { defineConfig } from 'dumi';
 
 const headPkgList: string[] = [];
 // utils must build before core

.prettierrc.js

@@ -3,4 +3,5 @@ const fabric = require('@umijs/fabric');
 module.exports = {
   ...fabric.prettier,
   printWidth: 80,
+  plugins: [require.resolve('prettier-plugin-organize-imports')],
 };

docs/components/customization-value-type.tsx

@@ -1,8 +1,8 @@
 import type { ProFormColumnsType } from '@ant-design/pro-components';
-import { ProConfigProvider } from '@ant-design/pro-components';
 import {
   BetaSchemaForm,
   ProCard,
+  ProConfigProvider,
   ProDescriptions,
   ProTable,
 } from '@ant-design/pro-components';

package.json

@@ -49,6 +49,7 @@
     "@ant-design/cssinjs": "^1.9.1",
     "@ant-design/icons": "^5.1.2",
     "@babel/core": "^7.21.8",
+    "@babel/eslint-plugin": "^7.19.1",
     "@babel/parser": "^7.21.9",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/preset-env": "^7.21.5",
@@ -87,7 +88,7 @@
     "@types/xhr-mock": "^2.0.0",
     "@umijs/babel-preset-umi": "^3.5.40",
     "@umijs/doctor": "^1.0.5",
-    "@umijs/fabric": "^3.0.0",
+    "@umijs/fabric": "^4.0.0",
     "@umijs/plugin-analytics": "^0.2.3",
     "@umijs/test": "^3.5.40",
     "@umijs/test-utils": "^3.5.40",
@@ -106,7 +107,11 @@
     "dumi-theme-antd-style": "0.25.1",
     "esbuild": "^0.15.18",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.41.0",
+    "eslint-plugin-jest": "^27.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-unicorn": "^47.0.0",
     "execa": "^5.1.1",
     "express": "^4.18.2",
     "fast-deep-equal": "^3.1.3",
@@ -130,8 +135,8 @@
     "nprogress": "^0.2.0",
     "octokit": "^1.8.1",
     "polished": "^4.2.2",
-    "prettier": "~2.8.8",
-    "prettier-plugin-organize-imports": "^2.3.4",
+    "prettier": "^2.8.8",
+    "prettier-plugin-organize-imports": "^3.0.0",
     "prettier-plugin-packagejson": "^2.4.3",
     "pretty-quick": "^3.1.3",
     "query-string": "^6.14.1",
@@ -147,7 +152,6 @@
     "react-layout-kit": "^1.7.0",
     "react-lazy-load": "^4.0.1",
     "react-markdown": "^8.0.7",
-    "react-sortable-hoc": "^2.0.0",
     "react-syntax-highlighter": "^15.5.0",
     "shiki-es": "^0.2.0",
     "slash2": "^2.0.0",

packages/components/src/index.tsx

@@ -3,11 +3,10 @@ export * from '@ant-design/pro-descriptions';
 export * from '@ant-design/pro-field';
 export * from '@ant-design/pro-form';
 export * from '@ant-design/pro-layout';
+export * from '@ant-design/pro-list';
 export * from '@ant-design/pro-provider';
 export * from '@ant-design/pro-skeleton';
 export * from '@ant-design/pro-table';
 export * from '@ant-design/pro-utils';
-export * from '@ant-design/pro-list';
-
 // @ts-ignore
 export * from './version';

packages/descriptions/src/index.tsx

@@ -28,8 +28,8 @@ import type { RequestData } from './useFetchData';
 import useFetchData from './useFetchData';
 
 // 兼容代码-----------
-import 'antd/lib/descriptions/style';
 import type { ProFieldFCMode } from '@ant-design/pro-provider';
+import 'antd/lib/descriptions/style';
 //----------------------
 
 // todo remove it

packages/field/src/components/DigitRange/index.tsx

@@ -1,3 +1,4 @@
+import { useIntl } from '@ant-design/pro-provider';
 import { Input, InputNumber } from 'antd';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import React from 'react';
@@ -5,7 +6,6 @@ import type { ProFieldFC } from '../../index';
 
 // 兼容代码-----------
 import 'antd/lib/input-number/style';
-import { useIntl } from '@ant-design/pro-provider';
 //----------------------
 
 export type Value = string | number | undefined | null;

packages/field/src/components/Segmented/index.tsx

@@ -1,7 +1,7 @@
 import { Segmented, Spin } from 'antd';
+import omit from 'omit.js';
 import React, { useImperativeHandle, useRef } from 'react';
 import type { ProFieldFC } from '../../index';
-import omit from 'omit.js';
 import type { FieldSelectProps } from '../Select';
 import { ObjToMap, proFieldParsingText, useFieldFetchData } from '../Select';
 

packages/field/src/components/TimePicker/index.tsx

@@ -1,3 +1,4 @@
+import { useIntl } from '@ant-design/pro-provider';
 import { FieldLabel, parseValueToDay } from '@ant-design/pro-utils';
 import { DatePicker, TimePicker } from 'antd';
 import dayjs from 'dayjs';
@@ -6,7 +7,6 @@ import type { ProFieldFC, ProFieldLightProps } from '../../index';
 
 // 兼容代码-----------
 import 'antd/lib/date-picker/style';
-import { useIntl } from '@ant-design/pro-provider';
 //----------------------;
 
 /**

packages/field/src/components/TreeSelect/index.tsx

@@ -1,3 +1,4 @@
+import { useIntl } from '@ant-design/pro-provider';
 import { FieldLabel } from '@ant-design/pro-utils';
 import type { RadioGroupProps, TreeSelectProps } from 'antd';
 import { ConfigProvider, Spin, TreeSelect } from 'antd';
@@ -17,7 +18,6 @@ import { ObjToMap, proFieldParsingText, useFieldFetchData } from '../Select';
 // 兼容代码-----------
 import 'antd/lib/spin/style';
 import 'antd/lib/tree-select/style';
-import { useIntl } from '@ant-design/pro-provider';
 //----------------------
 
 export type GroupProps = {

packages/field/src/index.tsx

@@ -49,10 +49,10 @@ import FieldTimePicker, { FieldTimeRangePicker } from './components/TimePicker';
 import FieldTreeSelect from './components/TreeSelect';
 import FieldHOC from './FieldHOC';
 
-import weekday from 'dayjs/plugin/weekday';
-import localeData from 'dayjs/plugin/localeData';
 import advancedFormat from 'dayjs/plugin/advancedFormat';
 import isoWeek from 'dayjs/plugin/isoWeek';
+import localeData from 'dayjs/plugin/localeData';
+import weekday from 'dayjs/plugin/weekday';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 
 import dayjs from 'dayjs';
@@ -595,8 +595,22 @@ const defaultRenderText = (
 };
 
 export { defaultRenderText };
-
 export type { ProFieldValueType, FieldMoneyProps };
+export {
+  FieldPercent,
+  FieldIndexColumn,
+  FieldProgress,
+  FieldMoney,
+  FieldDatePicker,
+  FieldRangePicker,
+  FieldCode,
+  FieldTimePicker,
+  FieldText,
+  FieldStatus,
+  FieldSelect,
+  proFieldParsingText,
+  proFieldParsingValueEnumToArray,
+};
 
 /** ProField 的类型 */
 export type ProFieldPropsType = {
@@ -682,25 +696,8 @@ const ProFieldComponent: React.ForwardRefRenderFunction<
   );
 };
 
-const ProField = React.forwardRef(
+export const ProField = React.forwardRef(
   ProFieldComponent,
 ) as typeof ProFieldComponent;
 
-export {
-  ProField,
-  FieldPercent,
-  FieldIndexColumn,
-  FieldProgress,
-  FieldMoney,
-  FieldDatePicker,
-  FieldRangePicker,
-  FieldCode,
-  FieldTimePicker,
-  FieldText,
-  FieldStatus,
-  FieldSelect,
-  proFieldParsingText,
-  proFieldParsingValueEnumToArray,
-};
-
 export default ProField;

packages/form/src/BaseForm/LightWrapper/index.tsx

@@ -6,11 +6,11 @@ import {
   useMountMergeState,
 } from '@ant-design/pro-utils';
 import { ConfigProvider } from 'antd';
+import type { TooltipPlacement } from 'antd/lib/tooltip';
 import classNames from 'classnames';
 import React, { useContext, useMemo, useState } from 'react';
 import type { LightFilterFooterRender } from '../../typing';
 import { useStyle } from './style';
-import type { TooltipPlacement } from 'antd/lib/tooltip';
 
 export type SizeType = 'small' | 'middle' | 'large' | undefined;
 

packages/form/src/components/FieldSet/demos/datatime.tsx

@@ -1,12 +1,12 @@
 import {
   ProForm,
+  ProFormDateMonthRangePicker,
   ProFormDatePicker,
+  ProFormDateQuarterRangePicker,
   ProFormDateRangePicker,
   ProFormDateTimePicker,
   ProFormDateTimeRangePicker,
   ProFormDateWeekRangePicker,
-  ProFormDateMonthRangePicker,
-  ProFormDateQuarterRangePicker,
   ProFormDateYearRangePicker,
   ProFormTimePicker,
 } from '@ant-design/pro-components';

packages/form/src/components/List/ListContainer.tsx

@@ -4,8 +4,7 @@ import { nanoid, runFunction } from '@ant-design/pro-utils';
 import { Button } from 'antd';
 import omit from 'omit.js';
 import type { CSSProperties } from 'react';
-import { useContext } from 'react';
-import { useMemo, useRef, useState } from 'react';
+import { useContext, useMemo, useRef, useState } from 'react';
 import type { ProFormListItemProps } from './ListItem';
 import { ProFormListItem } from './ListItem';
 

packages/form/src/components/LoginForm/demos/login-form.tsx

@@ -8,10 +8,10 @@ import {
 } from '@ant-design/icons';
 import {
   LoginForm,
+  ProConfigProvider,
   ProFormCaptcha,
   ProFormCheckbox,
   ProFormText,
-  ProConfigProvider,
 } from '@ant-design/pro-components';
 import { message, Space, Tabs } from 'antd';
 import type { CSSProperties } from 'react';

packages/form/src/components/QueryFilter/demos/query-filter-test.tsx

@@ -1,8 +1,8 @@
 import {
   ProForm,
+  ProFormDatePicker,
   ProFormText,
   QueryFilter,
-  ProFormDatePicker,
 } from '@ant-design/pro-components';
 import { Input } from 'antd';
 

packages/form/src/components/SchemaForm/demos/dependency.tsx

@@ -1,6 +1,5 @@
 import type { ProFormColumnsType } from '@ant-design/pro-components';
-import { ProForm } from '@ant-design/pro-components';
-import { BetaSchemaForm } from '@ant-design/pro-components';
+import { BetaSchemaForm, ProForm } from '@ant-design/pro-components';
 
 const valueEnum = {
   money: { text: '按金额' },

packages/form/src/components/SchemaForm/layoutType/StepsForm.tsx

@@ -1,7 +1,7 @@
 import { useLatest } from '@ant-design/pro-utils';
 import React, { useCallback, useMemo } from 'react';
-import type { ProFormGridConfig } from '../../../typing';
 import { StepsForm as ProStepsForm } from '../../../layouts/StepsForm';
+import type { ProFormGridConfig } from '../../../typing';
 import BetaSchemaForm from '../index';
 import type { FormSchema, ProFormPropsType } from '../typing';
 

packages/form/src/components/SchemaForm/typing.ts

@@ -8,7 +8,6 @@ import type {
 import type { FormInstance, FormProps } from 'antd';
 import type { NamePath } from 'antd/lib/form/interface';
 import type { CommonFormProps } from '../../BaseForm';
-import type { ProFormGridConfig } from '../../typing';
 import type {
   DrawerFormProps,
   LightFilterProps,
@@ -18,6 +17,7 @@ import type {
   StepFormProps,
   StepsFormProps,
 } from '../../layouts';
+import type { ProFormGridConfig } from '../../typing';
 
 export type ExtraProColumnType = {
   tooltip?: React.ReactNode;

packages/form/src/components/SchemaForm/valueType/field.tsx

@@ -1,10 +1,10 @@
 import { omitUndefined } from '@ant-design/pro-utils';
 import omit from 'omit.js';
+import React from 'react';
+import ProFormDependency from '../../Dependency';
 import type { ProFormFieldProps } from '../../Field';
 import ProFormField from '../../Field';
 import type { ProSchemaRenderValueTypeFunction } from '../typing';
-import ProFormDependency from '../../Dependency';
-import React from 'react';
 
 export const field: ProSchemaRenderValueTypeFunction<any, any> = (
   item,

packages/form/src/components/index.ts

@@ -5,13 +5,13 @@ export { default as ProFormCheckbox } from './Checkbox';
 export type { ProFormCheckboxGroupProps } from './Checkbox';
 export { default as ProFormColorPicker } from './ColorPicker';
 export type { ProFormColorPickerProps } from './ColorPicker';
+export { default as ProFormDateMonthRangePicker } from './DateMonthRangePicker';
 export { default as ProFormDatePicker } from './DatePicker';
+export { default as ProFormDateQuarterRangePicker } from './DateQuarterRangePicker';
 export { default as ProFormDateRangePicker } from './DateRangePicker';
 export { default as ProFormDateTimePicker } from './DateTimePicker';
 export { default as ProFormDateTimeRangePicker } from './DateTimeRangePicker';
 export { default as ProFormDateWeekRangePicker } from './DateWeekRangePicker';
-export { default as ProFormDateMonthRangePicker } from './DateMonthRangePicker';
-export { default as ProFormDateQuarterRangePicker } from './DateQuarterRangePicker';
 export { default as ProFormDateYearRangePicker } from './DateYearRangePicker';
 export { default as ProFormDependency } from './Dependency';
 export type { ProFormDependencyProps } from './Dependency';

packages/form/src/demos/modalform-test.tsx

@@ -1,13 +1,12 @@
-import React from 'react';
-import { Button } from 'antd';
-import { PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@ant-design/icons';
 import {
+  ModalForm,
   ProCard,
   ProForm,
   ProFormList,
   ProFormText,
-  ModalForm,
 } from '@ant-design/pro-components';
+import { Button } from 'antd';
 
 // 弹窗表单
 const FormModal = () => {

packages/form/src/demos/params-formref.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useRef } from 'react';
-import { BetaSchemaForm } from '@ant-design/pro-components';
+import { BetaSchemaForm } from '@ant-design/pro-components';
+import { useEffect, useRef, useState } from 'react';
 
 export default () => {
   const targetRef = useRef();

packages/form/src/index.tsx

@@ -39,13 +39,13 @@ export type {
   ProFormUploadButtonProps,
   ProFormUploadDraggerProps,
 } from './components';
-export { FieldContext } from './FieldContext';
 export { FormListContext } from './components/List';
+export { FieldContext } from './FieldContext';
+export * from './layouts';
 export type {
   LightFilterFooterRender,
   ProFormFieldItemProps as ProFormItemProps,
 } from './typing';
-export * from './layouts';
+export { ProForm };
 
 export default ProForm;
-export { ProForm };

packages/form/src/layouts/QueryFilter/Actions.tsx

@@ -1,7 +1,6 @@
 import { DownOutlined } from '@ant-design/icons';
 import type { IntlType } from '@ant-design/pro-provider';
-import { ProProvider } from '@ant-design/pro-provider';
-import { useIntl } from '@ant-design/pro-provider';
+import { ProProvider, useIntl } from '@ant-design/pro-provider';
 import { omitBoolean } from '@ant-design/pro-utils';
 import { ConfigProvider, Space } from 'antd';
 

packages/form/src/layouts/StepsForm/index.tsx

@@ -1,8 +1,16 @@
 import { ProConfigProvider, useIntl } from '@ant-design/pro-provider';
 import { compareVersions, merge, useRefFunction } from '@ant-design/pro-utils';
 import type { FormInstance, StepsProps } from 'antd';
-import { version } from 'antd';
-import { Button, Col, ConfigProvider, Form, Row, Space, Steps } from 'antd';
+import {
+  Button,
+  Col,
+  ConfigProvider,
+  Form,
+  Row,
+  Space,
+  Steps,
+  version,
+} from 'antd';
 
 import type { FormProviderProps } from 'antd/lib/form/context';
 import classNames from 'classnames';

packages/layout/src/ProLayout.tsx

@@ -1,6 +1,9 @@
 import type { GenerateStyle, ProTokenType } from '@ant-design/pro-provider';
-import { isNeedOpenHash } from '@ant-design/pro-provider';
-import { ProConfigProvider, ProProvider } from '@ant-design/pro-provider';
+import {
+  isNeedOpenHash,
+  ProConfigProvider,
+  ProProvider,
+} from '@ant-design/pro-provider';
 import {
   isBrowser,
   useDocumentTitle,

packages/layout/src/WrapContent.tsx

@@ -1,10 +1,9 @@
+import { ProProvider } from '@ant-design/pro-provider';
 import { ErrorBoundary } from '@ant-design/pro-utils';
 import { Layout } from 'antd';
 import classNames from 'classnames';
 import type { CSSProperties } from 'react';
-import { useContext } from 'react';
-import React from 'react';
-import { ProProvider } from '@ant-design/pro-provider';
+import React, { useContext } from 'react';
 
 const WrapContent: React.FC<{
   hasPageContainer?: number;

packages/layout/src/components/AppsLogoComponents/DefaultContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { defaultRenderLogo } from './index';
-import type { AppListProps, AppItemProps } from './types';
+import type { AppItemProps, AppListProps } from './types';
 
 export const DefaultContent: React.FC<{
   appList?: AppListProps;

packages/layout/src/components/AppsLogoComponents/SimpleContent.tsx

@@ -1,6 +1,6 @@
 import { isUrl } from '@ant-design/pro-utils';
 import React from 'react';
-import type { AppListProps, AppItemProps } from './types';
+import type { AppItemProps, AppListProps } from './types';
 
 /**
  * simple模式渲染logo的方式

packages/layout/src/components/AppsLogoComponents/index.tsx

@@ -6,7 +6,7 @@ import { AppsLogo } from './AppsLogo';
 import { DefaultContent } from './DefaultContent';
 import { SimpleContent } from './SimpleContent';
 import { useStyle } from './style/index';
-import type { AppListProps, AppItemProps } from './types';
+import type { AppItemProps, AppListProps } from './types';
 
 /**
  * 默认渲染logo的方式，如果是个string，用img。否则直接返回

packages/layout/src/components/FooterToolbar/style/stylish.ts

@@ -1,4 +1,4 @@
-import type { ProAliasToken, GenerateStyle } from '@ant-design/pro-provider';
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
 import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
 
 export interface stylishToken extends ProAliasToken {

packages/layout/src/components/GlobalHeader/index.tsx

@@ -8,6 +8,7 @@ import type { MenuDataItem } from '../../index';
 import type { WithFalse } from '../../typing';
 import { clearMenuItem } from '../../utils/utils';
 import { AppsLogoComponents, defaultRenderLogo } from '../AppsLogoComponents';
+import type { AppItemProps, AppListProps } from '../AppsLogoComponents/types';
 import type { HeaderViewProps } from '../Header';
 import type {
   PrivateSiderMenuProps,
@@ -15,9 +16,8 @@ import type {
 } from '../SiderMenu/SiderMenu';
 import { renderLogoAndTitle } from '../SiderMenu/SiderMenu';
 import { TopNavHeader } from '../TopNavHeader';
-import { ActionsContent as ActionsContent } from './ActionsContent';
+import { ActionsContent } from './ActionsContent';
 import { useStyle } from './style';
-import type { AppListProps, AppItemProps } from '../AppsLogoComponents/types';
 
 export type GlobalHeaderProps = {
   collapsed?: boolean;

packages/layout/src/components/Header/index.tsx

@@ -2,13 +2,13 @@ import { isNeedOpenHash, ProProvider } from '@ant-design/pro-provider';
 import { ConfigProvider, Layout } from 'antd';
 import classNames from 'classnames';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { useStyle } from './style/header';
 import type { WithFalse } from '../../typing';
 import { clearMenuItem } from '../../utils/utils';
 import type { GlobalHeaderProps } from '../GlobalHeader';
 import { GlobalHeader } from '../GlobalHeader';
 import type { PrivateSiderMenuProps } from '../SiderMenu/SiderMenu';
 import { TopNavHeader } from '../TopNavHeader';
+import { useStyle } from './style/header';
 import { useStylish } from './style/stylish';
 
 const { Header } = Layout;

packages/layout/src/components/Header/style/stylish.ts

@@ -1,4 +1,4 @@
-import type { ProAliasToken, GenerateStyle } from '@ant-design/pro-provider';
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
 import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
 export interface stylishToken extends ProAliasToken {
   componentCls: string;

packages/layout/src/components/Help/AsyncContentPanel.tsx

@@ -1,5 +1,5 @@
 import { Spin } from 'antd';
-import { useContext, useState, useEffect } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import type {
   ProHelpDataSource,
   ProHelpDataSourceChildren,

packages/layout/src/components/Help/ProHelpContentPanel.tsx

@@ -1,12 +1,11 @@
-import { useEffect, useRef } from 'react';
-import React, { useContext, useMemo } from 'react';
+import { ProProvider } from '@ant-design/pro-provider';
+import { useDebounceFn } from '@ant-design/pro-utils';
+import classNames from 'classnames';
+import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import { AsyncContentPanel } from './AsyncContentPanel';
 import type { ProHelpDataSource } from './HelpProvide';
 import { ProHelpProvide } from './HelpProvide';
-import { useDebounceFn } from '@ant-design/pro-utils';
 import { RenderContentPanel } from './RenderContentPanel';
-import { AsyncContentPanel } from './AsyncContentPanel';
-import { ProProvider } from '@ant-design/pro-provider';
-import classNames from 'classnames';
 
 export type ProHelpContentPanelProps = {
   /**

packages/layout/src/components/Help/ProHelpPopover.tsx

@@ -1,10 +1,10 @@
-import classNames from 'classnames';
+import { ProProvider } from '@ant-design/pro-provider';
 import type { PopoverProps } from 'antd';
-import { Popover, ConfigProvider } from 'antd';
+import { ConfigProvider, Popover } from 'antd';
+import classNames from 'classnames';
 import React, { useContext } from 'react';
-import { useStyle } from './style';
 import { ProHelpContentPanel } from './ProHelpContentPanel';
-import { ProProvider } from '@ant-design/pro-provider';
+import { useStyle } from './style';
 
 export type ProHelpPopoverProps = Omit<PopoverProps, 'content'> & {
   /**

packages/layout/src/components/Help/RenderContentPanel.tsx

@@ -1,8 +1,7 @@
 import type { ImageProps } from 'antd';
 import { Image, Typography } from 'antd';
 import type { AnchorHTMLAttributes } from 'react';
-import { useEffect, useRef } from 'react';
-import React, { useContext } from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 import type { ProHelpDataSourceChildren } from './HelpProvide';
 import { ProHelpProvide } from './HelpProvide';
 import { SelectKeyProvide } from './ProHelpPanel';

packages/layout/src/components/Help/Search.tsx

@@ -4,8 +4,7 @@ import { useDebounceFn } from '@ant-design/pro-utils';
 import type { SelectProps } from 'antd';
 import { ConfigProvider, Select } from 'antd';
 import classNames from 'classnames';
-import React, { useState } from 'react';
-import { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { ProHelpProvide } from './HelpProvide';
 
 /**

packages/layout/src/components/Help/index.tsx

@@ -9,10 +9,9 @@ import { ProHelpSelect } from './Search';
 export * from './ProHelpContentPanel';
 export * from './ProHelpDrawer';
 export * from './ProHelpModal';
+export * from './ProHelpPanel';
 export * from './ProHelpPopover';
 export * from './RenderContentPanel';
-export * from './ProHelpPanel';
-
 export type { ProHelpDataSource, ProHelpDataSourceChildren };
 export { ProHelpProvide, ProHelpSelect };
 

packages/layout/src/components/PageContainer/style/stylish.ts

@@ -1,4 +1,4 @@
-import type { ProAliasToken, GenerateStyle } from '@ant-design/pro-provider';
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
 import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
 
 export interface stylishToken extends ProAliasToken {

packages/layout/src/components/PageHeader/index.tsx

@@ -1,14 +1,14 @@
 import ArrowLeftOutlined from '@ant-design/icons/ArrowLeftOutlined';
 import ArrowRightOutlined from '@ant-design/icons/ArrowRightOutlined';
-import type { AvatarProps, TagType, BreadcrumbProps } from 'antd';
+import type { AvatarProps, BreadcrumbProps, TagType } from 'antd';
 import { Avatar, Breadcrumb, ConfigProvider, Space } from 'antd';
+import 'antd/lib/breadcrumb/style';
 import type { DirectionType } from 'antd/lib/config-provider';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
 import * as React from 'react';
-import useStyle from './style/index';
 import type { ContentWidth } from '../../defaultSettings';
-import 'antd/lib/breadcrumb/style';
+import useStyle from './style/index';
 
 export interface PageHeaderProps {
   backIcon?: React.ReactNode;

packages/layout/src/components/SettingDrawer/index.tsx

@@ -14,8 +14,8 @@ import { useUrlSearchParams } from '@umijs/use-params';
 import {
   Alert,
   Button,
-  Divider,
   ConfigProvider as AntConfigProvider,
+  Divider,
   Drawer,
   List,
   message,

packages/layout/src/components/SiderMenu/SiderMenu.tsx

@@ -8,7 +8,7 @@ import type { CSSProperties } from 'react';
 import React, { useContext, useMemo } from 'react';
 import type { WithFalse } from '../../typing';
 import { AppsLogoComponents, defaultRenderLogo } from '../AppsLogoComponents';
-import type { AppListProps, AppItemProps } from '../AppsLogoComponents/types';
+import type { AppItemProps, AppListProps } from '../AppsLogoComponents/types';
 import { CollapsedIcon } from '../CollapsedIcon';
 import type { HeaderViewProps } from '../Header';
 import type { BaseMenuProps } from './BaseMenu';

packages/layout/src/components/SiderMenu/style/index.ts

@@ -1,6 +1,6 @@
-import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
+import { Keyframes } from '@ant-design/cssinjs';
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
 import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
-import { Keyframes } from '@ant-design/cssinjs';
 export interface SiderMenuToken extends ProAliasToken {
   componentCls: string;
   proLayoutCollapsedWidth: number;

packages/layout/src/components/SiderMenu/style/stylish.ts

@@ -1,4 +1,4 @@
-import type { ProAliasToken, GenerateStyle } from '@ant-design/pro-provider';
+import type { GenerateStyle, ProAliasToken } from '@ant-design/pro-provider';
 import { useStyle as useAntdStyle } from '@ant-design/pro-provider';
 export interface SiderMenuToken extends ProAliasToken {
   componentCls: string;

packages/layout/src/demos/Nested.tsx

@@ -1,5 +1,5 @@
 import { UserOutlined } from '@ant-design/icons';
-import { ProLayout, PageContainer } from '@ant-design/pro-components';
+import { PageContainer, ProLayout } from '@ant-design/pro-components';
 import complexMenu from './complexMenu';
 
 export default () => (

packages/layout/src/demos/appList-group.tsx

@@ -1,4 +1,4 @@
-import type { ProSettings, AppItemProps } from '@ant-design/pro-components';
+import type { AppItemProps, ProSettings } from '@ant-design/pro-components';
 import { ProConfigProvider, ProLayout } from '@ant-design/pro-components';
 import { Modal } from 'antd';
 import defaultProps from './_defaultProps';

packages/layout/src/demos/base.tsx

@@ -19,12 +19,12 @@ import {
 import { css } from '@emotion/css';
 import {
   Button,
+  ConfigProvider,
   Divider,
-  Input,
   Dropdown,
+  Input,
   Popover,
   theme,
-  ConfigProvider,
 } from 'antd';
 import React, { useState } from 'react';
 import defaultProps from './_defaultProps';

packages/layout/src/demos/classicMode.tsx

@@ -8,9 +8,9 @@ import {
 import type { ProSettings } from '@ant-design/pro-components';
 import {
   PageContainer,
+  ProCard,
   ProLayout,
   SettingDrawer,
-  ProCard,
 } from '@ant-design/pro-components';
 import { Button, Input } from 'antd';
 import { useState } from 'react';

packages/layout/src/demos/collapsedShowTitle.tsx

@@ -8,7 +8,7 @@
   SmileFilled,
   TabletFilled,
 } from '@ant-design/icons';
-import { PageContainer, ProLayout, ProCard } from '@ant-design/pro-components';
+import { PageContainer, ProCard, ProLayout } from '@ant-design/pro-components';
 import { Button, Input } from 'antd';
 import { useState } from 'react';
 

packages/layout/src/demos/config-provider.tsx

@@ -1,8 +1,8 @@
 import { LikeOutlined, UserOutlined } from '@ant-design/icons';
 import type { ProSettings } from '@ant-design/pro-components';
 import {
-  ProLayout,
   PageContainer,
+  ProLayout,
   SettingDrawer,
 } from '@ant-design/pro-components';
 import {

packages/layout/src/demos/customSider.tsx

@@ -6,9 +6,9 @@ import {
 import type { ProSettings } from '@ant-design/pro-components';
 import {
   PageContainer,
+  ProCard,
   ProLayout,
   SettingDrawer,
-  ProCard,
 } from '@ant-design/pro-components';
 import { Avatar, Image, Space } from 'antd';
 import { useState } from 'react';

packages/layout/src/demos/dark.tsx

@@ -5,7 +5,7 @@ import {
   QuestionCircleFilled,
   SearchOutlined,
 } from '@ant-design/icons';
-import { PageContainer, ProLayout, ProCard } from '@ant-design/pro-components';
+import { PageContainer, ProCard, ProLayout } from '@ant-design/pro-components';
 import { ProConfigProvider } from '@ant-design/pro-provider';
 import { Button, Input } from 'antd';
 import { useState } from 'react';

packages/layout/src/demos/designMenuCss.tsx

@@ -8,12 +8,12 @@ import {
 import type { ProSettings } from '@ant-design/pro-components';
 import {
   PageContainer,
+  ProCard,
   ProLayout,
   SettingDrawer,
-  ProCard,
 } from '@ant-design/pro-components';
 import { Button, Input } from 'antd';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import defaultProps from './_defaultProps';
 
 export default () => {

packages/layout/src/demos/designSiderMenu.tsx

@@ -6,9 +6,9 @@ import {
 import type { ProSettings } from '@ant-design/pro-components';
 import {
   PageContainer,
+  ProCard,
   ProLayout,
   SettingDrawer,
-  ProCard,
 } from '@ant-design/pro-components';
 import { useState } from 'react';
 import defaultProps from './_defaultProps';

packages/layout/src/demos/draggableHelp.tsx

@@ -4,8 +4,8 @@ import {
   ProHelpPanel,
   ProHelpSelect,
 } from '@ant-design/pro-components';
+import { App, Typography } from 'antd';
 import Draggable from 'react-draggable';
-import { Typography, App } from 'antd';
 
 export default () => {
   const map = new Map<

packages/layout/src/demos/dynamic-settings.tsx

@@ -1,8 +1,8 @@
 import { LikeOutlined, UserOutlined } from '@ant-design/icons';
 import type { ProSettings } from '@ant-design/pro-components';
 import {
-  ProLayout,
   PageContainer,
+  ProLayout,
   SettingDrawer,
 } from '@ant-design/pro-components';
 import { Button, Descriptions, Result, Space, Statistic } from 'antd';

packages/layout/src/demos/footer-global-tools.tsx

@@ -6,7 +6,7 @@ import {
   SearchOutlined,
 } from '@ant-design/icons';
 import type { ProSettings } from '@ant-design/pro-components';
-import { PageContainer, ProLayout, ProCard } from '@ant-design/pro-components';
+import { PageContainer, ProCard, ProLayout } from '@ant-design/pro-components';
 import { Alert, Button, Input, Space } from 'antd';
 import React, { useState } from 'react';
 import defaultProps from './_defaultProps';

packages/layout/src/demos/help.tsx

@@ -1,6 +1,6 @@
 import type { ProHelpDataSourceChildren } from '@ant-design/pro-components';
 import { ProHelp, ProHelpPanel } from '@ant-design/pro-components';
-import { Typography, App, Rate } from 'antd';
+import { App, Rate, Typography } from 'antd';
 
 export default () => {
   const map = new Map<

packages/layout/src/demos/immersive-navigation-top.tsx

@@ -1,5 +1,5 @@
 import { CrownOutlined, SmileOutlined, UserOutlined } from '@ant-design/icons';
-import { ProLayout, PageContainer } from '@ant-design/pro-components';
+import { PageContainer, ProLayout } from '@ant-design/pro-components';
 import { Button, Input, Result, Tag } from 'antd';
 import { useState } from 'react';
 

packages/layout/src/demos/menu-group.tsx

@@ -6,7 +6,7 @@ import {
   TabletOutlined,
   UserOutlined,
 } from '@ant-design/icons';
-import { ProLayout, PageContainer, ProCard } from '@ant-design/pro-components';
+import { PageContainer, ProCard, ProLayout } from '@ant-design/pro-components';
 import { Button, Result } from 'antd';
 import { useState } from 'react';
 

packages/layout/src/demos/mixMode.tsx

@@ -6,7 +6,7 @@ import {
   SearchOutlined,
 } from '@ant-design/icons';
 import type { ProSettings } from '@ant-design/pro-components';
-import { PageContainer, ProLayout, ProCard } from '@ant-design/pro-components';
+import { PageContainer, ProCard, ProLayout } from '@ant-design/pro-components';
 import { Input } from 'antd';
 import { useState } from 'react';
 import defaultProps from './_defaultProps';

packages/layout/src/demos/pageSimplify.tsx

@@ -6,9 +6,9 @@ import {
   SearchOutlined,
 } from '@ant-design/icons';
 import type { ProSettings } from '@ant-design/pro-components';
-import { PageContainer, ProLayout, ProCard } from '@ant-design/pro-components';
+import { PageContainer, ProCard, ProLayout } from '@ant-design/pro-components';
 import { Input } from 'antd';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import defaultProps from './_defaultProps';
 
 export default () => {

packages/layout/src/demos/proHelpModal.tsx

@@ -1,12 +1,12 @@
-import { useState } from 'react';
-import type { ProHelpDataSourceChildren } from '@ant-design/pro-components';
+import type { ProHelpDataSourceChildren } from '@ant-design/pro-components';
 import {
   ProHelp,
   ProHelpDrawer,
   ProHelpModal,
   ProHelpPopover,
 } from '@ant-design/pro-components';
-import { Typography, App } from 'antd';
+import { App, Typography } from 'antd';
+import { useState } from 'react';
 
 export default () => {
   const [modalOpen, setModalOpen] = useState<boolean>(false);

packages/layout/src/demos/searchMenu.tsx

@@ -1,6 +1,6 @@
 import { PlusCircleFilled, SearchOutlined } from '@ant-design/icons';
 import type { MenuDataItem } from '@ant-design/pro-components';
-import { ProLayout, PageContainer } from '@ant-design/pro-components';
+import { PageContainer, ProLayout } from '@ant-design/pro-components';
 import { Input, Space } from 'antd';
 import { useState } from 'react';
 import complexMenu from './complexMenu';

packages/layout/src/demos/siderMode.tsx

@@ -6,9 +6,9 @@ import {
 import type { ProSettings } from '@ant-design/pro-components';
 import {
   PageContainer,
+  ProCard,
   ProLayout,
   SettingDrawer,
-  ProCard,
 } from '@ant-design/pro-components';
 import { useState } from 'react';
 import defaultProps from './_defaultProps';

packages/layout/src/demos/siteMenu.tsx

@@ -6,9 +6,9 @@ import {
   SearchOutlined,
 } from '@ant-design/icons';
 import type { ProSettings } from '@ant-design/pro-components';
-import { PageContainer, ProLayout, ProCard } from '@ant-design/pro-components';
+import { PageContainer, ProCard, ProLayout } from '@ant-design/pro-components';
 import { Input } from 'antd';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import defaultProps from './_defaultProps';
 
 export default () => {

packages/layout/src/demos/splitMenus.tsx

@@ -1,7 +1,7 @@
 import {
   PageContainer,
-  SettingDrawer,
   ProLayout,
+  SettingDrawer,
 } from '@ant-design/pro-components';
 import defaultProps from './_defaultProps';
 

packages/layout/src/demos/topMode.tsx

@@ -1,17 +1,17 @@
 import {
+  CaretDownFilled,
+  DoubleRightOutlined,
   GithubFilled,
   InfoCircleFilled,
   PlusCircleFilled,
   QuestionCircleFilled,
   SearchOutlined,
-  CaretDownFilled,
-  DoubleRightOutlined,
 } from '@ant-design/icons';
 import type { ProSettings } from '@ant-design/pro-components';
-import { PageContainer, ProLayout, ProCard } from '@ant-design/pro-components';
-import { Input, Divider, Popover, theme } from 'antd';
-import { useState } from 'react';
+import { PageContainer, ProCard, ProLayout } from '@ant-design/pro-components';
 import { css } from '@emotion/css';
+import { Divider, Input, Popover, theme } from 'antd';
+import { useState } from 'react';
 
 import defaultProps from './_defaultProps';
 

packages/layout/src/index.tsx

@@ -18,6 +18,10 @@ import 'antd/lib/tooltip/style';
 import 'antd/lib/typography/style';
 //----------------------
 
+import type {
+  AppItemProps,
+  AppListProps,
+} from './components/AppsLogoComponents/types';
 import { FooterToolbar } from './components/FooterToolbar';
 import { GridContent } from './components/GridContent';
 import type { PageContainerProps } from './components/PageContainer';
@@ -28,10 +32,6 @@ import {
 } from './components/PageContainer';
 import type { PageHeaderProps } from './components/PageHeader';
 import { PageHeader } from './components/PageHeader';
-import type {
-  AppItemProps,
-  AppListProps,
-} from './components/AppsLogoComponents/types';
 
 import type { FooterProps } from './components/Footer';
 import { DefaultFooter } from './components/Footer';
@@ -54,11 +54,9 @@ import type { ProLayoutProps } from './ProLayout';
 import { ProLayout } from './ProLayout';
 import { getMenuData } from './utils/getMenuData';
 
+export * from './components/Help';
 export type { ProSettings, ProSettings as Settings } from './defaultSettings';
 export type { MenuDataItem } from './typing';
-
-export * from './components/Help';
-
 export {
   PageHeader,
   ProLayout,

packages/list/src/ListView.tsx

@@ -7,8 +7,7 @@ import type {
   TablePaginationConfig,
   TableProps,
 } from 'antd';
-import { version } from 'antd';
-import { ConfigProvider, List } from 'antd';
+import { ConfigProvider, List, version } from 'antd';
 import useLazyKVMap from 'antd/lib/table/hooks/useLazyKVMap';
 import usePagination from 'antd/lib/table/hooks/usePagination';
 import useSelection from 'antd/lib/table/hooks/useSelection';
@@ -21,8 +20,8 @@ import type { GetComponentProps } from './index';
 import type { ItemProps } from './Item';
 import ProListItem from './Item';
 
-import type { PaginationConfig } from 'antd/lib/pagination';
 import { compareVersions } from '@ant-design/pro-utils';
+import type { PaginationConfig } from 'antd/lib/pagination';
 import type { AnyObject } from 'antd/lib/table/Table';
 
 type AntdListProps<RecordType> = Omit<ListProps<RecordType>, 'rowKey'>;

packages/list/src/index.tsx

@@ -1,4 +1,5 @@
 import type { ProCardProps } from '@ant-design/pro-card';
+import { ProConfigProvider } from '@ant-design/pro-provider';
 import type {
   ActionType,
   ProColumnType,
@@ -13,7 +14,6 @@ import React, { useContext, useImperativeHandle, useMemo, useRef } from 'react';
 import type { ItemProps } from './Item';
 import ListView from './ListView';
 import { useStyle } from './style/index';
-import { ProConfigProvider } from '@ant-design/pro-provider';
 
 // 兼容性代码
 import 'antd/lib/list/style';

packages/provider/src/index.tsx

@@ -7,18 +7,18 @@ import zh_CN from 'antd/lib/locale/zh_CN';
 import React, { useContext, useEffect, useMemo } from 'react';
 import { SWRConfig, useSWRConfig } from 'swr';
 import type { IntlType } from './intl';
-import { findIntlKeyByAntdLocaleKey } from './intl';
-import { intlMap, zhCNIntl } from './intl';
+import { findIntlKeyByAntdLocaleKey, intlMap, zhCNIntl } from './intl';
 
 import type { DeepPartial, ProTokenType } from './typing/layoutToken';
 import { getLayoutDesignToken } from './typing/layoutToken';
 import type { ProAliasToken } from './useStyle';
 import { proTheme } from './useStyle';
-import { emptyTheme, defaultToken } from './useStyle/token';
+import { defaultToken, emptyTheme } from './useStyle/token';
 import { merge } from './utils/merge';
 
-export * from './useStyle';
 export * from './intl';
+export * from './useStyle';
+export { DeepPartial, ProTokenType };
 
 /**
  * 用于判断当前是否需要开启哈希（Hash）模式。
@@ -37,8 +37,6 @@ export const isNeedOpenHash = () => {
   return true;
 };
 
-export { DeepPartial, ProTokenType };
-
 /**
  * 用于配置 ValueEnum 的通用配置
  */

packages/provider/src/useStyle/index.ts

@@ -2,13 +2,12 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
 
-import { theme } from 'antd';
-import { ConfigProvider as AntdConfigProvider } from 'antd';
+import { ConfigProvider as AntdConfigProvider, theme } from 'antd';
+import type { GlobalToken } from 'antd/lib/theme/interface';
 import type React from 'react';
 import { useContext } from 'react';
 import { ProProvider } from '../index';
 import type { ProTokenType } from '../typing/layoutToken';
-import type { GlobalToken } from 'antd/lib/theme/interface';
 import * as batToken from './token';
 
 /**

packages/table/package.json

@@ -41,12 +41,14 @@
     "@ant-design/pro-provider": "^2.9.0",
     "@ant-design/pro-utils": "^2.10.0",
     "@babel/runtime": "^7.18.0",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
     "classnames": "^2.2.6",
     "dayjs": "^1.11.4",
     "omit.js": "^2.0.2",
     "rc-resize-observer": "^1.0.0",
     "rc-util": "^5.0.1",
-    "react-sortable-hoc": "^2.0.0",
     "use-json-comparison": "^1.0.5"
   },
   "devDependencies": {

packages/table/src/Table.tsx

@@ -25,6 +25,7 @@ import type {
   TableCurrentDataSource,
 } from 'antd/lib/table/interface';
 import classNames from 'classnames';
+import type Summary from 'rc-table/lib/Footer/Summary';
 import React, {
   useCallback,
   useContext,
@@ -58,7 +59,6 @@ import {
 } from './utils';
 import { columnSort } from './utils/columnSort';
 import { genProColumnToColumn } from './utils/genProColumnToColumn';
-import type Summary from 'rc-table/lib/Footer/Summary';
 
 function TableRender<T extends Record<string, any>, U, ValueType>(
   props: ProTableProps<T, U, ValueType> & {

packages/table/src/components/DragSortTable/demos/drag.tsx

@@ -1,20 +1,7 @@
-import { MenuOutlined } from '@ant-design/icons';
 import type { ProColumns } from '@ant-design/pro-components';
-import {
-  arrayMoveImmutable,
-  ProTable,
-  useRefFunction,
-} from '@ant-design/pro-components';
+import { DragSortTable } from '@ant-design/pro-components';
+import { message } from 'antd';
 import { useState } from 'react';
-import {
-  SortableContainer,
-  SortableElement,
-  SortableHandle,
-} from 'react-sortable-hoc';
-
-const DragHandle = SortableHandle(() => (
-  <MenuOutlined style={{ cursor: 'grab', color: '#999' }} />
-));
 
 const columns: ProColumns[] = [
   {
@@ -22,7 +9,6 @@ const columns: ProColumns[] = [
     dataIndex: 'sort',
     width: 60,
     className: 'drag-visible',
-    render: () => <DragHandle />,
   },
   {
     title: '姓名',
@@ -65,54 +51,22 @@ const data = [
 
 export default () => {
   const [dataSource, setDataSource] = useState(data);
-  const SortableItem = SortableElement((props: any) => <tr {...props} />);
-  const SortContainer = SortableContainer((props: any) => <tbody {...props} />);
 
-  const onSortEnd = useRefFunction(
-    ({ oldIndex, newIndex }: { oldIndex: number; newIndex: number }) => {
-      if (oldIndex !== newIndex) {
-        const newData = arrayMoveImmutable({
-          array: [...dataSource],
-          fromIndex: oldIndex,
-          toIndex: newIndex,
-        }).filter((el) => !!el);
-        setDataSource([...newData]);
-      }
-    },
-  );
-
-  const DraggableContainer = (props: any) => (
-    <SortContainer
-      useDragHandle
-      disableAutoscroll
-      helperClass="row-dragging"
-      onSortEnd={onSortEnd}
-      {...props}
-    />
-  );
-
-  const DraggableBodyRow = (props: any) => {
-    const { className, style, ...restProps } = props;
-    // function findIndex base on Table rowKey props and should always be a right array index
-    const index = dataSource.findIndex(
-      (x) => x.index === restProps['data-row-key'],
-    );
-    return <SortableItem index={index} {...restProps} />;
+  const handleDragSortEnd = (newDataSource: any) => {
+    console.log('排序后的数据', newDataSource);
+    setDataSource(newDataSource);
+    message.success('修改列表排序成功');
   };
 
   return (
-    <ProTable
-      headerTitle="拖拽排序"
+    <DragSortTable
+      headerTitle="拖拽排序(默认把手)"
       columns={columns}
-      rowKey="index"
+      rowKey="key"
       pagination={false}
       dataSource={dataSource}
-      components={{
-        body: {
-          wrapper: DraggableContainer,
-          row: DraggableBodyRow,
-        },
-      }}
+      dragSortKey="sort"
+      onDragSortEnd={handleDragSortEnd}
     />
   );
 };

packages/table/src/components/DragSortTable/index.tsx

@@ -1,11 +1,10 @@
-import { MenuOutlined } from '@ant-design/icons';
+import { HolderOutlined } from '@ant-design/icons';
 import type { ParamsType } from '@ant-design/pro-provider';
 import { ConfigProvider } from 'antd';
 import useMergedState from 'rc-util/lib/hooks/useMergedState';
-import React, { useCallback, useContext, useMemo, useRef } from 'react';
-import { SortableHandle } from 'react-sortable-hoc';
+import React, { useContext, useMemo } from 'react';
 import ProTable from '../../Table';
-import type { ProColumns, ProTableProps } from '../../typing';
+import type { ProTableProps } from '../../typing';
 import { useDragSort } from '../../utils/useDragSort';
 import { useStyle } from './style';
 
@@ -18,10 +17,6 @@ export type DragTableProps<T, U> = {
   onDragSortEnd?: (newDataSource: T[]) => Promise<void> | void;
 } & ProTableProps<T, U>;
 
-// 用于创建可拖拽把手组件的工厂
-const handleCreator = (handle: React.ReactNode) =>
-  SortableHandle(() => <>{handle}</>);
-
 function DragSortTable<
   T extends Record<string, any>,
   U extends ParamsType = ParamsType,
@@ -33,14 +28,13 @@ function DragSortTable<
     dragSortHandlerRender,
     onDragSortEnd,
     onDataSourceChange,
-    columns: propsColumns,
     defaultData,
     dataSource: originDataSource,
     onLoad,
     ...otherProps
   } = props;
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const [dataSource, setMergedDs] = useMergedState<T[]>(
+  const [dataSource, setDataSource] = useMergedState<T[]>(
     () => defaultData || [],
     {
       value: originDataSource as T[],
@@ -48,105 +42,66 @@ function DragSortTable<
     },
   );
 
+  const { wrapSSR, hashId } = useStyle(getPrefixCls('pro-table-drag'));
+
   // 默认拖拽把手
-  const DragHandle = useMemo(
-    () =>
-      handleCreator(
-        <MenuOutlined className={getPrefixCls('pro-table-drag-icon')} />,
-      ),
-    [getPrefixCls],
-  );
+  const DragHandle = useMemo(() => {
+    return (dragHandleProps: any) => {
+      const { rowData, index, className, ...rest } = dragHandleProps;
+      const defaultDom = (
+        <HolderOutlined
+          {...rest}
+          className={`${getPrefixCls('pro-table-drag-icon')} ${
+            className || ''
+          } ${hashId || ''}`.trim()}
+        />
+      );
 
-  const { wrapSSR } = useStyle(getPrefixCls('pro-table-drag-icon'));
+      const handel = dragSortHandlerRender
+        ? dragSortHandlerRender(
+            dragHandleProps?.rowData,
+            dragHandleProps?.index,
+          )
+        : defaultDom;
+      return <>{handel}</>;
+    };
+  }, [getPrefixCls]);
 
-  const isDragSortColumn = useCallback(
-    (item: ProColumns<T, any>) => {
-      return item.key === dragSortKey || item.dataIndex === dragSortKey;
-    },
-    [dragSortKey],
-  );
-  // 根据 dragSortKey 查找目标列配置
-  const handleColumn = useMemo(() => {
-    return propsColumns?.find((item) => isDragSortColumn(item));
-  }, [propsColumns, isDragSortColumn]);
-
-  // 记录原始列配置
-  const originColumnRef = useRef<ProColumns<T, 'text'> | undefined>({
-    ...handleColumn,
-  });
   // 使用自定义hooks获取拖拽相关组件的components集合
-  const { components } = useDragSort<T>({
+  const { components, DndContext } = useDragSort<T>({
     dataSource: dataSource?.slice(),
     dragSortKey,
     onDragSortEnd,
     components: props.components,
     rowKey,
+    DragHandle,
   });
 
-  // 重写列配置的render
-  const columns: any = useMemo(() => {
-    const originColumn = originColumnRef.current!;
-    if (!handleColumn) return propsColumns;
-    const dargRender = (...args: any[]) => {
-      const [dom, rowData, index, action, schema] = args;
-      const RealHandle = dragSortHandlerRender
-        ? handleCreator(dragSortHandlerRender(rowData, index))
-        : DragHandle;
-      return (
-        <div className={getPrefixCls('pro-table-drag-visible-cell')}>
-          <>
-            <RealHandle />
-            {originColumn.render?.(dom, rowData, index, action, schema)}
-          </>
-        </div>
-      );
-    };
-    // 重新生成数据
-    return propsColumns?.map((item) => {
-      if (!isDragSortColumn(item)) {
-        return item;
-      }
-      return {
-        ...item,
-        render: dargRender,
-      };
-    });
-  }, [
-    DragHandle,
-    dragSortHandlerRender,
-    getPrefixCls,
-    handleColumn,
-    isDragSortColumn,
-    propsColumns,
-  ]);
-
   const wrapOnload = async (ds: T[]) => {
-    setMergedDs(ds);
+    setDataSource(ds);
     return onLoad?.(ds);
   };
 
   return wrapSSR(
-    handleColumn ? (
-      <ProTable<T, U, ValueType>
-        {...(otherProps as ProTableProps<T, U, ValueType>)}
-        onLoad={wrapOnload}
-        rowKey={rowKey}
-        dataSource={dataSource}
-        components={components}
-        columns={columns}
-        onDataSourceChange={onDataSourceChange}
-      />
-    ) : (
-      /* istanbul ignore next */
-      <ProTable<T, U, ValueType>
-        {...(otherProps as ProTableProps<T, U, ValueType>)}
-        onLoad={wrapOnload}
-        rowKey={rowKey}
-        dataSource={dataSource}
-        columns={columns}
-        onDataSourceChange={onDataSourceChange}
-      />
-    ),
+    <ProTable<T, U, ValueType>
+      {...(otherProps as ProTableProps<T, U, ValueType>)}
+      columns={otherProps.columns?.map((item): any => {
+        if (item.dataIndex == dragSortKey || item.key === dragSortKey) {
+          if (!item.render) {
+            item.render = () => null;
+          }
+        }
+        return item;
+      })}
+      onLoad={wrapOnload}
+      rowKey={rowKey}
+      tableViewRender={(_, defaultDom) => {
+        return <DndContext>{defaultDom}</DndContext>;
+      }}
+      dataSource={dataSource}
+      components={components}
+      onDataSourceChange={onDataSourceChange}
+    />,
   );
 }
 

packages/table/src/components/DragSortTable/style.ts

@@ -8,8 +8,18 @@ export interface ProListToken extends ProAliasToken {
 const genProListStyle: GenerateStyle<ProListToken> = (token) => {
   return {
     [token.componentCls]: {
-      '&-visible-cell': { display: 'flex', alignItems: 'center' },
-      '&-icon': { marginInlineEnd: 8, color: '#999', cursor: 'grab' },
+      '&-icon': {
+        marginInlineEnd: 8,
+        color: token.colorTextSecondary,
+        cursor: 'grab !important',
+        padding: 4,
+        fontSize: 12,
+        borderRadius: token.borderRadius,
+        '&:hover': {
+          color: token.colorText,
+          backgroundColor: token.colorInfoBg,
+        },
+      },
     },
   };
 };
@@ -20,7 +30,6 @@ export function useStyle(prefixCls: string) {
       ...token,
       componentCls: `.${prefixCls}`,
     };
-
     return [genProListStyle(proListToken)];
   });
 }

packages/table/src/components/ListToolBar/index.tsx

@@ -5,10 +5,10 @@ import { ConfigProvider, Input, Tabs, Tooltip } from 'antd';
 import type { LabelTooltipType } from 'antd/lib/form/FormItemLabel';
 import type { SearchProps } from 'antd/lib/input';
 import classNames from 'classnames';
+import ResizeObserver from 'rc-resize-observer';
 import React, { useContext, useMemo, useState } from 'react';
 import type { ListToolBarHeaderMenuProps } from './HeaderMenu';
 import HeaderMenu from './HeaderMenu';
-import ResizeObserver from 'rc-resize-observer';
 import { useStyle } from './style';
 
 export type ListToolBarSetting = {

packages/table/src/demos/intl.tsx

@@ -13,10 +13,10 @@ import msMYIntl from 'antd/lib/locale/ms_MY';
 import ptBRIntl from 'antd/lib/locale/pt_BR';
 import ruRUIntl from 'antd/lib/locale/ru_RU';
 import srRSIntl from 'antd/lib/locale/sr_RS';
+import thTHIntl from 'antd/lib/locale/th_TH';
 import viVNIntl from 'antd/lib/locale/vi_VN';
 import zhCNIntl from 'antd/lib/locale/zh_CN';
 import zhTWIntl from 'antd/lib/locale/zh_TW';
-import thTHIntl from 'antd/lib/locale/th_TH';
 import dayjs from 'dayjs';
 import { useRef, useState } from 'react';
 

packages/table/src/demos/single-test.tsx

@@ -1,7 +1,7 @@
 import { PlusOutlined } from '@ant-design/icons';
 import type { ActionType, ProColumns } from '@ant-design/pro-components';
 import { ProTable, TableDropdown } from '@ant-design/pro-components';
-import { Button, Input, Space, Tag, ConfigProvider } from 'antd';
+import { Button, ConfigProvider, Input, Space, Tag } from 'antd';
 import { useRef } from 'react';
 
 type GithubIssueItem = {

packages/table/src/utils/cellRenderToFromItem.tsx

@@ -23,8 +23,8 @@ import React, {
   useMemo,
   useState,
 } from 'react';
-import type { ContainerType } from '../Store/Provide';
 import type { ProColumnType } from '../index';
+import type { ContainerType } from '../Store/Provide';
 
 const SHOW_EMPTY_TEXT_LIST = ['', null, undefined];
 

packages/table/src/utils/index.ts

@@ -1,6 +1,5 @@
 import type { IntlType } from '@ant-design/pro-provider';
 import type { UseEditableUtilType } from '@ant-design/pro-utils';
-import { arrayMoveImmutable } from '@ant-design/pro-utils';
 import type { TablePaginationConfig } from 'antd';
 import type { SortOrder } from 'antd/lib/table/interface';
 import type React from 'react';
@@ -219,28 +218,3 @@ export function parseDefaultColumnConfig<T, Value>(
   });
   return { sort, filter };
 }
-
-export type SortDataParams = { oldIndex: number; newIndex: number };
-
-/**
- * 数据排序核心逻辑
- *
- * @param oldIndex 原始位置
- * @param newIndex 新位置
- * @param data 原始数组
- */
-export function sortData<T>(
-  { oldIndex, newIndex }: SortDataParams,
-  data: T[],
-): T[] | null {
-  if (oldIndex !== newIndex) {
-    const newData = arrayMoveImmutable<T>({
-      array: [...(data || [])],
-      fromIndex: oldIndex,
-      toIndex: newIndex,
-    }).filter((el) => !!el);
-    return [...newData];
-  }
-  /* istanbul ignore next */
-  return null;
-}

packages/table/src/utils/useDragSort.tsx

@@ -1,8 +1,111 @@
 import { useRefFunction } from '@ant-design/pro-utils';
+import type { DragEndEvent } from '@dnd-kit/core';
+import {
+  closestCenter,
+  DndContext,
+  MouseSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import type { TableComponents } from 'rc-table/lib/interface';
-import { SortableContainer, SortableElement } from 'react-sortable-hoc';
-import type { SortDataParams } from './index';
-import { sortData } from './index';
+import React, { createContext, useContext } from 'react';
+
+const SortableItemContextValue = createContext<{
+  handle: React.ReactNode;
+}>({ handle: null });
+
+/**
+ * 拖拽排序表格的行，
+ * 如果有 DragHandle 回给 dragSortKey 所在的行注入 provide 和 handle
+ * 如果没有整个行都支持拖拽
+ * @param props
+ * @returns
+ */
+const SortableRow = (props: any) => {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: props.id });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    ...props?.style,
+  };
+  const { DragHandle, dragSortKey, ...rest } = props;
+
+  if (dragSortKey) {
+    const doms: React.ReactNode[] = [];
+    React.Children.forEach(rest.children, (child: any, index) => {
+      if (child.key === dragSortKey) {
+        doms.push(
+          <SortableItemContextValue.Provider
+            key={child.key || index}
+            value={{
+              handle: (
+                <DragHandle
+                  rowData={child?.props?.record}
+                  index={child?.props?.index}
+                  {...listeners}
+                  {...attributes}
+                />
+              ),
+            }}
+          >
+            {child}
+          </SortableItemContextValue.Provider>,
+        );
+        return;
+      }
+      doms.push(child);
+    });
+    return (
+      <tr {...rest} ref={setNodeRef} style={style}>
+        {doms}
+      </tr>
+    );
+  }
+
+  return (
+    <tr
+      {...rest}
+      ref={setNodeRef}
+      style={style}
+      {...attributes}
+      {...listeners}
+    />
+  );
+};
+
+/**
+ * 拖拽排序表格的 cell，用与判断要不要展示 handle
+ */
+const SortableItemCell = React.memo((props: any) => {
+  const { dragSortKey, ...rest } = props;
+  const { handle } = useContext(SortableItemContextValue);
+  if (handle) {
+    return (
+      <td {...rest}>
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          {handle} {rest.children}
+        </div>
+      </td>
+    );
+  }
+
+  return <td {...rest} />;
+});
 
 export interface UseDragSortOptions<T> {
   dataSource?: T[];
@@ -10,44 +113,56 @@ export interface UseDragSortOptions<T> {
   dragSortKey?: string;
   components?: TableComponents<T>;
   rowKey: any;
+  DragHandle: React.FC<any>;
 }
 
-const SortableItem = SortableElement((p: any) => <tr {...p} />);
-const SortContainer = SortableContainer((p: any) => <tbody {...p} />);
+const SortContainer = (p: any) => <tbody {...p} />;
 
 export function useDragSort<T>(props: UseDragSortOptions<T>) {
-  const { dataSource = [], onDragSortEnd, dragSortKey } = props;
+  const { dataSource = [], onDragSortEnd, DragHandle, dragSortKey } = props;
 
-  // 拖拽排序相关逻辑
-  /* istanbul ignore next */
-  const handleSortEnd = useRefFunction((params: SortDataParams) => {
-    /* istanbul ignore next */
-    const newDataSource: T[] | null = sortData<T>(params, dataSource);
-    /* istanbul ignore next */
-    if (newDataSource && onDragSortEnd) {
-      /* istanbul ignore next */
-      onDragSortEnd(newDataSource);
+  const sensors = useSensors(useSensor(PointerSensor), useSensor(MouseSensor));
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (over?.id?.toString() && active.id !== over?.id) {
+      const newData = arrayMove<T>(
+        dataSource || [],
+        parseInt(active.id as string),
+        parseInt(over.id as string),
+      );
+      onDragSortEnd?.(newData || []);
     }
-  });
+  }
 
   const DraggableContainer = useRefFunction((p: any) => (
-    <SortContainer
-      useDragHandle
-      disableAutoscroll
-      helperClass="row-dragging"
-      onSortEnd={handleSortEnd}
-      {...p}
-    />
+    <SortableContext
+      items={dataSource.map((_, index) => index?.toString())}
+      strategy={verticalListSortingStrategy}
+    >
+      <SortContainer {...p} />
+    </SortableContext>
   ));
 
   const DraggableBodyRow = useRefFunction((p: any) => {
     const { ...restProps } = p;
     // function findIndex base on Table rowKey props and should always be a right array index
-    const index = dataSource.findIndex(
-      (item: any) =>
-        item[props.rowKey ?? 'index'] === restProps['data-row-key'],
+    const index = dataSource
+      .findIndex(
+        (item: any) =>
+          item[props.rowKey ?? 'index'] === restProps['data-row-key'],
+      )
+      ?.toString();
+
+    return (
+      <SortableRow
+        id={index}
+        dragSortKey={dragSortKey}
+        DragHandle={DragHandle}
+        key={index}
+        {...restProps}
+      />
     );
-    return <SortableItem index={index} {...restProps} />;
   });
 
   const components: TableComponents<T> = props.components || {};
@@ -57,10 +172,22 @@ export function useDragSort<T>(props: UseDragSortOptions<T>) {
       ...(props.components?.body || {}),
       wrapper: DraggableContainer,
       row: DraggableBodyRow,
+      cell: SortableItemCell,
     };
   }
 
   return {
+    DndContext: (contextProps: any) => {
+      return (
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          {contextProps.children}
+        </DndContext>
+      );
+    },
     components,
   };
 }

packages/utils/src/array-move/index.ts

@@ -1,38 +0,0 @@
-/**
- * @param  {ValueType[]} array
- * @param  {number} fromIndex
- * @param  {number} toIndex
- */
-export function arrayMoveMutable<ValueType>(
-  array: ValueType[],
-  fromIndex: number,
-  toIndex: number,
-) {
-  const startIndex = fromIndex < 0 ? array.length + fromIndex : fromIndex;
-
-  if (startIndex >= 0 && startIndex < array.length) {
-    const endIndex = toIndex < 0 ? array.length + toIndex : toIndex;
-    const [item] = array.splice(fromIndex, 1);
-    array.splice(endIndex, 0, item);
-  }
-}
-
-/**
- * @param  {T[]} array
- * @param  {number} fromIndex
- * @param  {number} toIndex
- * @returns T
- */
-export function arrayMoveImmutable<T = string>({
-  array,
-  fromIndex,
-  toIndex,
-}: {
-  array: T[];
-  fromIndex: number;
-  toIndex: number;
-}): T[] {
-  const newArray = [...array];
-  arrayMoveMutable(newArray, fromIndex, toIndex);
-  return newArray;
-}

packages/utils/src/components/FilterDropdown/index.tsx

@@ -3,11 +3,11 @@ import React, { useContext, useRef } from 'react';
 import type { DropdownFooterProps } from '../DropdownFooter';
 import { DropdownFooter } from '../DropdownFooter';
 
-import { useStyle } from './style';
-import classNames from 'classnames';
 import 'antd/lib/dropdown/style';
-import { openVisibleCompatible } from '../../compareVersions/openVisibleCompatible';
 import type { TooltipPlacement } from 'antd/lib/tooltip';
+import classNames from 'classnames';
+import { openVisibleCompatible } from '../../compareVersions/openVisibleCompatible';
+import { useStyle } from './style';
 
 export type FooterRender =
   | ((

packages/utils/src/components/InlineErrorFormItem/index.tsx

@@ -1,9 +1,9 @@
 import { LoadingOutlined } from '@ant-design/icons';
-import { openVisibleCompatible } from '../../compareVersions/openVisibleCompatible';
 import type { FormItemProps, PopoverProps } from 'antd';
 import { ConfigProvider, Form, Popover } from 'antd';
 import type { NamePath } from 'rc-field-form/lib/interface';
 import React, { useContext, useEffect, useState } from 'react';
+import { openVisibleCompatible } from '../../compareVersions/openVisibleCompatible';
 import { useStyle } from './style';
 
 interface InlineErrorFormItemProps extends FormItemProps {

packages/utils/src/conversionMomentValue/index.ts

@@ -1,9 +1,9 @@
 import type { InternalNamePath, NamePath } from 'antd/lib/form/interface';
 import dayjs from 'dayjs';
+import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 import get from 'rc-util/lib/utils/get';
 import { isNil } from '../isNil';
 import type { ProFieldValueType } from '../typing';
-import quarterOfYear from 'dayjs/plugin/quarterOfYear';
 
 dayjs.extend(quarterOfYear);
 

packages/utils/src/hooks/useReactiveRef/index.ts

@@ -1,6 +1,6 @@
 import type { MutableRefObject, RefObject } from 'react';
-import { useRefCallback } from '../useRefCallback';
 import useForceRender from '../useForceRender';
+import { useRefCallback } from '../useRefCallback';
 
 export function useReactiveRef<T>(initialValue: T): MutableRefObject<T>;
 

packages/utils/src/index.tsx

@@ -1,4 +1,3 @@
-import { arrayMoveImmutable } from './array-move';
 import { DropdownFooter } from './components/DropdownFooter';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { FieldLabel } from './components/FieldLabel';
@@ -16,6 +15,16 @@ import { dateArrayFormatter } from './dateArrayFormatter';
 import { genCopyable } from './genCopyable';
 import { getFieldPropsOrFormItemProps } from './getFieldPropsOrFormItemProps';
 /** Hooks */
+import {
+  lighten,
+  operationUnit,
+  resetComponent,
+  setAlpha,
+  useStyle,
+} from '@ant-design/pro-provider';
+import { compareVersions } from './compareVersions';
+import { menuOverlayCompatible } from './compareVersions/menuOverlayCompatible';
+import { openVisibleCompatible } from './compareVersions/openVisibleCompatible';
 import { useDebounceFn } from './hooks/useDebounceFn';
 import { useDebounceValue } from './hooks/useDebounceValue';
 import {
@@ -27,9 +36,9 @@ import type { ProRequestData } from './hooks/useFetchData';
 import { useFetchData } from './hooks/useFetchData';
 import { useLatest } from './hooks/useLatest';
 import { usePrevious } from './hooks/usePrevious';
-import { useRefFunction } from './hooks/useRefFunction';
 import { useReactiveRef } from './hooks/useReactiveRef';
 import { useRefCallback } from './hooks/useRefCallback';
+import { useRefFunction } from './hooks/useRefFunction';
 import { isBrowser } from './isBrowser';
 import { isDeepEqualReact } from './isDeepEqualReact';
 import { isDropdownValueType } from './isDropdownValueType';
@@ -46,15 +55,6 @@ import { pickProFormItemProps } from './pickProFormItemProps';
 import { pickProProps } from './pickProProps';
 import { runFunction } from './runFunction';
 import { transformKeySubmitValue } from './transformKeySubmitValue';
-import {
-  lighten,
-  operationUnit,
-  resetComponent,
-  setAlpha,
-  useStyle,
-} from '@ant-design/pro-provider';
-
-export * from './typing';
 import type {
   RowEditableConfig,
   RowEditableType,
@@ -72,10 +72,8 @@ import type {
 } from './useEditableMap';
 import { useEditableMap } from './useEditableMap';
 import { useMountMergeState } from './useMountMergeState';
-import { compareVersions } from './compareVersions';
-import { openVisibleCompatible } from './compareVersions/openVisibleCompatible';
-import { menuOverlayCompatible } from './compareVersions/menuOverlayCompatible';
 
+export * from './typing';
 export type {
   ProFormInstanceType,
   RowEditableConfig,
@@ -86,7 +84,6 @@ export type {
   UseEditableMapType,
   UseEditableMapUtilType,
 };
-
 export {
   LabelIconTip,
   ProFormContext,
@@ -94,7 +91,6 @@ export {
   FilterDropdown,
   menuOverlayCompatible,
   FieldLabel,
-  arrayMoveImmutable,
   InlineErrorFormItem,
   DropdownFooter,
   ErrorBoundary,

packages/utils/src/parseValueToMoment/index.ts

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs';
-import { isNil } from '../isNil';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
+import { isNil } from '../isNil';
 
 dayjs.extend(customParseFormat);
 

packages/utils/src/useEditableArray/index.tsx

@@ -970,7 +970,7 @@ export function useEditableArray<RecordType>(
       };
       const res = await props?.onDelete?.(recordKey, editRow);
       // 不传递 false时，重新form.setFieldsValue同一份静态数据，会导致该行始终处于不可编辑状态
-      await cancelEditable(recordKey,false);
+      await cancelEditable(recordKey, false);
       props.setDataSource(editableRowByKey(actionProps, 'delete'));
 
       return res;

tests/field/fixtures/demo.tsx

@@ -1,5 +1,5 @@
-import Field from '@ant-design/pro-field';
 import type { ProFieldFCMode } from '@ant-design/pro-components';
+import Field from '@ant-design/pro-field';
 import { Descriptions } from 'antd';
 import dayjs from 'dayjs';
 

tests/form/fieldSet.test.tsx

@@ -4,9 +4,9 @@
   ProFormText,
   ProFormTextArea,
 } from '@ant-design/pro-form';
-import { Input } from 'antd';
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { Input } from 'antd';
 
 describe('ProFormFieldSet', () => {
   it('😊 ProFormFieldSet onChange', async () => {

tests/form/formList.test.tsx

@@ -1,12 +1,14 @@
 import { CloseOutlined, SnippetsOutlined } from '@ant-design/icons';
+import { ProCard } from '@ant-design/pro-components';
 import type { FormListActionType } from '@ant-design/pro-form';
-import { ModalForm, StepsForm } from '@ant-design/pro-form';
 import ProForm, {
+  ModalForm,
   ProFormDatePicker,
   ProFormDependency,
   ProFormGroup,
   ProFormList,
   ProFormText,
+  StepsForm,
 } from '@ant-design/pro-form';
 import {
   act,
@@ -20,7 +22,6 @@ import type { NamePath } from 'antd/lib/form/interface';
 import _ from 'lodash';
 import React from 'react';
 import { waitForWaitTime } from '../util';
-import { ProCard } from '@ant-design/pro-components';
 
 describe('ProForm List', () => {
   it('⛲ ProForm.List', async () => {

tests/form/formitem.test.tsx

@@ -1,6 +1,6 @@
 import ProForm, { ProFormText } from '@ant-design/pro-form';
-import { Input } from 'antd';
 import { fireEvent, render } from '@testing-library/react';
+import { Input } from 'antd';
 
 describe('ProForm.Item', () => {
   it('📦 ProForm support fieldProps.onBlur', async () => {