fix: resolve issue with drag-and-drop sorting not working (#6937)

* fix: resolve issue with drag-and-drop sorting not working

* fix: error TS2322: Type 'UniqueIdentifier' is not assignable to type 'string'

* fix: build error

packages/core/build/src/buildPlugin.ts

@@ -105,11 +105,8 @@ const external = [
   'react-i18next',
 
   // dnd-kit 相关
-  '@dnd-kit/accessibility',
   '@dnd-kit/core',
-  '@dnd-kit/modifiers',
   '@dnd-kit/sortable',
-  '@dnd-kit/utilities',
 
   // formily 相关
   '@formily/antd-v5',

packages/core/client/package.json

@@ -13,9 +13,8 @@
     "@antv/g2plot": "^2.4.18",
     "@budibase/handlebars-helpers": "0.14.0",
     "@ctrl/tinycolor": "^3.6.0",
-    "@dnd-kit/core": "^5.0.1",
-    "@dnd-kit/modifiers": "^6.0.0",
-    "@dnd-kit/sortable": "^6.0.0",
+    "@dnd-kit/core": "^6.0.0",
+    "@dnd-kit/sortable": "^7.0.0",
     "@emotion/css": "^11.7.1",
     "@formily/antd-v5": "1.1.9",
     "@formily/core": "^2.2.27",

packages/core/client/src/application/utils/globalDeps.ts

@@ -9,11 +9,8 @@
 
 import * as antdCssinjs from '@ant-design/cssinjs';
 import * as antdIcons from '@ant-design/icons';
-import * as dndKitAccessibility from '@dnd-kit/accessibility';
 import * as dndKitCore from '@dnd-kit/core';
-import * as dndKitModifiers from '@dnd-kit/modifiers';
 import * as dndKitSortable from '@dnd-kit/sortable';
-import * as dndKitUtilities from '@dnd-kit/utilities';
 import * as emotionCss from '@emotion/css';
 import * as formilyAntdV5 from '@formily/antd-v5';
 import * as formilyCore from '@formily/core';
@@ -88,12 +85,8 @@ export function defineGlobalDeps(requirejs: RequireJS) {
   requirejs.define('@nocobase/evaluators/client', () => nocobaseEvaluators);
   requirejs.define('@nocobase/sdk', () => nocobaseSDK);
 
-  // dnd-kit 相关
-  requirejs.define('@dnd-kit/accessibility', () => dndKitAccessibility);
   requirejs.define('@dnd-kit/core', () => dndKitCore);
-  requirejs.define('@dnd-kit/modifiers', () => dndKitModifiers);
   requirejs.define('@dnd-kit/sortable', () => dndKitSortable);
-  requirejs.define('@dnd-kit/utilities', () => dndKitUtilities);
 
   // utils
   requirejs.define('axios', () => axios);

packages/core/client/src/schema-component/antd/grid/Grid.tsx

@@ -38,7 +38,7 @@ const breakRemoveOnRow = (s: Schema) => s['x-component'] === 'Grid.Row';
 
 const ColDivider = (props) => {
   const { token } = useToken();
-  const dragIdRef = useRef<string | null>(null);
+  const dragIdRef = useRef<any>(null);
   const { dn, designable } = useDesignable();
   const { isOver, setNodeRef } = useDroppable({
     id: props.id,

packages/core/server/src/plugin-manager/constants.ts

@@ -80,11 +80,8 @@ export const EXTERNAL = [
   'react-i18next',
 
   // dnd-kit 相关
-  '@dnd-kit/accessibility',
   '@dnd-kit/core',
-  '@dnd-kit/modifiers',
   '@dnd-kit/sortable',
-  '@dnd-kit/utilities',
 
   // formily 相关
   '@formily/antd-v5',

packages/core/server/src/plugin-manager/deps.ts

@@ -42,11 +42,8 @@ const deps: Record<string, string> = {
   '@ant-design/cssinjs': '1.x',
   i18next: '22.x',
   'react-i18next': '11.x',
-  '@dnd-kit/accessibility': '3.x',
-  '@dnd-kit/core': '5.x',
-  '@dnd-kit/modifiers': '6.x',
-  '@dnd-kit/sortable': '6.x',
-  '@dnd-kit/utilities': '3.x',
+  '@dnd-kit/core': '6.x',
+  '@dnd-kit/sortable': '7.x',
   dayjs: '1.x',
   mysql2: '3.x',
   pg: '8.x',

packages/plugins/@nocobase/plugin-backup-restore/src/server/dumper.ts

@@ -11,9 +11,9 @@ import { Collection, CollectionGroupManager as DBCollectionGroupManager, DumpRul
 import archiver from 'archiver';
 import dayjs from 'dayjs';
 import fs from 'fs';
+import fse from 'fs-extra';
 import fsPromises from 'fs/promises';
 import { default as _, default as lodash } from 'lodash';
-import mkdirp from 'mkdirp';
 import path from 'path';
 import * as process from 'process';
 import stream from 'stream';
@@ -225,7 +225,7 @@ export class Dumper extends AppMigrator {
 
   async writeLockFile(fileName: string) {
     const dirname = this.backUpStorageDir();
-    await mkdirp(dirname);
+    await fse.mkdirp(dirname);
 
     const filePath = this.lockFilePath(fileName);
     await fsPromises.writeFile(filePath, 'lock', 'utf8');
@@ -490,7 +490,7 @@ export class Dumper extends AppMigrator {
 
   async packDumpedDir(fileName: string) {
     const dirname = this.backUpStorageDir();
-    await mkdirp(dirname);
+    await fse.mkdirp(dirname);
 
     const filePath = path.resolve(dirname, fileName);
     const output = fs.createWriteStream(filePath);

packages/plugins/@nocobase/plugin-block-workbench/package.json

@@ -9,7 +9,8 @@
   "peerDependencies": {
     "@nocobase/client": "1.x",
     "@nocobase/server": "1.x",
-    "@nocobase/test": "1.x"
+    "@nocobase/test": "1.x",
+    "@nocobase/plugin-mobile": "1.x"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.x",

packages/plugins/@nocobase/plugin-block-workbench/src/client/components/qrcode-scanner/useScanner.ts

@@ -7,7 +7,7 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 import { useApp } from '@nocobase/client';
-import MobileManager from '@nocobase/plugin-mobile/client';
+import PluginMobileClient from '@nocobase/plugin-mobile/client';
 import { Html5Qrcode, Html5QrcodeScannerState } from 'html5-qrcode';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -22,8 +22,8 @@ function removeStringIfStartsWith(text: string, prefix: string): string {
 
 export function useScanner({ onScannerSizeChanged, elementId, onScanSuccess }) {
   const app = useApp();
-  const mobileManager = app.pm.get(MobileManager);
-  const { mobileRouter } = mobileManager;
+  const mobileManager = app.pm.get(PluginMobileClient) as PluginMobileClient;
+  const mobileRouter = mobileManager.mobileRouter;
   const appRouter = app.router;
 
   const rawBasename = mobileRouter?.router ? mobileRouter?.basename : appRouter.basename;

packages/plugins/@nocobase/plugin-data-source-manager/package.json

@@ -14,9 +14,6 @@
     "@nocobase/server": "1.x",
     "@nocobase/test": "1.x"
   },
-  "devDependencies": {
-    "@dnd-kit/core": "^5.0.1"
-  },
   "keywords": [
     "Data model tools"
   ],

packages/plugins/@nocobase/plugin-data-source-manager/src/client/component/MainDataSourceManager/Configuration/ConfigurationTabs.tsx

@@ -20,18 +20,18 @@ import {
 } from '@dnd-kit/core';
 import { RecursionField, observer } from '@formily/react';
 import { uid } from '@formily/shared';
+import {
+  CollectionCategoriesContext,
+  SchemaComponent,
+  SchemaComponentOptions,
+  useAPIClient,
+  useCompile,
+  useResourceActionContext,
+} from '@nocobase/client';
 import { App, Badge, Card, Dropdown, Space, Tabs } from 'antd';
 import _ from 'lodash';
 import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  useAPIClient,
-  SchemaComponent,
-  SchemaComponentOptions,
-  useCompile,
-  useResourceActionContext,
-  CollectionCategoriesContext,
-} from '@nocobase/client';
 import { CollectionFields } from './CollectionFields';
 import { collectionTableSchema } from './schemas/collections';
 

packages/plugins/@nocobase/plugin-file-manager/src/server/storages/local.ts

@@ -9,7 +9,6 @@
 
 import { isURL } from '@nocobase/utils';
 import fs from 'fs/promises';
-import mkdirp from 'mkdirp';
 import multer from 'multer';
 import path from 'path';
 import urlJoin from 'url-join';
@@ -46,6 +45,7 @@ export default class extends StorageType {
     return multer.diskStorage({
       destination: (req, file, cb) => {
         const destPath = path.join(getDocumentRoot(this.storage), this.storage.path || '');
+        const mkdirp = require('mkdirp');
         mkdirp(destPath, (err: Error | null) => cb(err, destPath));
       },
       filename: getFilename,

packages/plugins/@nocobase/plugin-mobile/src/client/mobile-layout/mobile-tab-bar/MobileTabBar.tsx

@@ -39,8 +39,8 @@ export const MobileTabBar: FC<MobileTabBarProps> & {
   const handleDragEnd: DndContextProps['onDragEnd'] = useCallback(
     async (event) => {
       const { active, over } = event;
-      const activeIdName = active?.id;
-      const overIdName = over?.id;
+      const activeIdName = active?.id as string;
+      const overIdName = over?.id as string;
 
       if (!activeIdName || !overIdName || activeIdName === overIdName) {
         return;