[DataGridPro] Fix column reordering on Android

[m4theushw]

Partially fixes #9330

Preview: https://deploy-preview-9394--material-ui-x.netlify.app/x/react-data-grid/column-ordering/

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-9394--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	428.7	883.8	678.1	630.52	171.745
Sort 100k rows	ms	474	880.5	819.7	766.04	147.712
Select 100k rows	ms	186.7	291.7	253.8	250.92	35.327
Deselect 100k rows	ms	128.7	296	202.3	195.34	58.293

Generated by 🚫 dangerJS against 71feb8b

[m4theushw]

@mui/xgrid Could someone test on an iPhone/iPad if the fix works?

[cherniavskii]

We can avoid typing arguments here by adding this overload for useEventCallback that would match the React.useCallback signature:

declare module '@mui/utils' {
  // eslint-disable-next-line @typescript-eslint/naming-convention
  export function unstable_useEventCallback<T extends Function>(fn: T): T;
}

Then it will be easier to switch from React.useCallback to useEventCallback:

-const handleDragEnter = React.useCallback<
+const handleDragEnter = useEventCallback<
    GridEventListener<'cellDragEnter' | 'columnHeaderDragEnter'>
  >((params, event) => {

Meanwhile, I'll add this overload for unstable_useEventCallback in the core repo.

[m4theushw]

@cherniavskii could you test again on iOS? After changing the MIME type to text/html it stopped working on Android so I'm trying text now.

[cherniavskii]

I've checked different MIME types on iOS 16.5.1:

MIME type	Safari	Chrome
text	❌ (opens search page on drag end)	✅
text/plain	❌ (opens search page on drag end)	✅
text/html	✅	✅
text/x-data-grid	✅	✅

[cherniavskii]

Unfortunately, this doesn't work in Safari.
For some reason, clientX/clientY values are wrong during the dragend event:

safari-clientY.mov

I've found a similar issue mentioned here:

the clientX/screenX and clientY/screenY coordinates are simply wrong. I have no idea what they report. They don't even depend on where you touch.
https://horstmann.com/unblog/2018-12-16/index.html

[m4theushw]

I tried text/x-data-grid and it also doesn't work on Android. I don't know which MIME type to use since no one works correctly in both platforms. I think it would be better to ditch the HTML drag'n'drop API on mobile and use touch events like https://github.com/react-dnd/react-dnd/ does.

[m4theushw]

@cherniavskii could you test again? I added a condition to use different MIME types depending on the platform.

[cherniavskii]

@m4theushw Yes, the MIME type works in both Safari and Chrome on iOS.
But there's still an issue with clientX/clientY in Safari - see #9394 (comment)
Maybe we could use event.dataTransfer.dropEffect by default, and calculate hasDroppedOutside on Android only?

[flaviendelangle]

@cherniavskii @DanailH does it make sense to keep this PR?
If so, somebody should probably take the ownership

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.