onColumnProposeMove should prevent drag (#963)

* onColumnProposeMove should prevent drag

* fix lint

* fix react 18 test

Author: BrianHung

package.json

@@ -50,7 +50,8 @@
         "@storybook/react": "^7.6.12",
         "@storybook/react-vite": "^7.6.12",
         "@storybook/react-webpack5": "^7.6.12",
-        "@testing-library/react": "^12.1.2",
+        "@testing-library/dom": "^10.1.0",
+        "@testing-library/react": "^16.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@testing-library/user-event": "^14.5.1",
         "@types/cheerio": "^0.22.30",
@@ -85,11 +86,12 @@
         "marked": "^4.0.10",
         "mini-css-extract-plugin": "^2.6.1",
         "prettier": "^3.0.2",
-        "react": "^16.12.0 || 17.x",
-        "react-dom": "^16.12.0 || 17.x",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
         "react-laag": "^2.0.3",
         "react-responsive-carousel": "^3.2.7",
         "react-syntax-highlighter": "^15.4.5",
+        "react-test-renderer": "^18.3.1",
         "resolve-typescript-plugin": "^2.0.1",
         "storybook": "^7.6.12",
         "tsc-esm-fix": "^2.7.8",

packages/core/src/internal/data-grid-dnd/data-grid-dnd.tsx

@@ -252,7 +252,7 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
                 }
 
                 clearAll();
-                if (dragCol !== undefined && dropCol !== undefined) {
+                if (dragCol !== undefined && dropCol !== undefined && onColumnProposeMove?.(dragCol, dropCol) !== false) {
                     onColumnMoved?.(dragCol, dropCol);
                 }
                 if (dragRow !== undefined && dropRow !== undefined) {
@@ -277,6 +277,7 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
             onColumnMoved,
             onRowMoved,
             clearAll,
+            onColumnProposeMove,
         ]
     );