[data grid] Get correct width for invisible iconContainer

[michelengelen]

Fixes #15388

This is a fix to get the scrollWidth instead of the clientWidth when the column has sorting applied. This is to calculate the columns width on autosize. Previously it was not respecting the sorting button.

The problem before was that we get the headerContainer from the ref stored in the apiRef which was not holding the current state (and therefore visibility) of the sorting button. This resulted in the value stored in clientWidth to always be 0.

For the fix I would much rather rely on the sortModelLookup, but since this is outside of a component or hook we cannot use the grids selectors.

Any ideas how to improve this are welcome!

[mui-bot]

Deploy preview: https://deploy-preview-16399--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against cf165cc

[arminmeh]

Instead of all of this, you can also just remove these styles
https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/components/containers/GridRootStyles.ts#L306

They are actually hiding the icon while autosizing which makes the icon container width 0
@romgrk added those some time ago here https://github.com/mui/mui-x/pull/12013/files#diff-e1db53193a627d36d1cd3f651a954ee1e32ecb93caa020446631d722bb1be75cR232

@mui/xgrid anyone else knows if we need them for something else?

Quick UI test didn't show me anything wrong after removing it and autosize includes the active sort icon

[michelengelen]

Sry for the inconvenience, but I did check the suggestion from @arminmeh and could not find a case where that was not working, so I instead applied that, since it is cleaner.

If we can make this into the release of v7 (when cherry-picking is done) that would be awesome!

[github-actions]

Cherry-pick PRs will be created targeting branches: v7.x