[data grid] Focus outline has multiple visual bugs

[aaarichter]

Current behavior 😯

on https://mui.com/x/react-data-grid/layout/ when clicking into a cell of the column header, an outline is shown. This outline has multiple visual bugs:

1. the data-grid has by default a border-radius, which cuts off the outline (see screenshot)
2. the outline is below the header dividers (see screenshot)
3. the top outline is missing due to outline-offset: -1px; set to the .MuiDataGrid-columnHeader:focus-within
   

Expected behavior 🤔

1. those visual bugs should be fixed
2. an API way to turn off the outline. ( I overwrote the styles in my theme but that should be configurable )

Steps to reproduce 🕹

Link to live example: https://mui.com/x/react-data-grid/layout/#flex-layout

Steps:

1. click on the left header cell

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 12.5
  Binaries:
    Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node
    Yarn: 1.22.19 - ~/.yarn/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
  Browsers:
    Chrome: 104.0.5112.79
    Edge: Not Found
    Firefox: 101.0.1
    Safari: 15.6
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3 
    @emotion/styled:  11.9.3 
    @mui/base:  5.0.0-alpha.91 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/lab: ^5.0.0-alpha.92 => 5.0.0-alpha.92 
    @mui/material: ^5.9.2 => 5.9.2 
    @mui/private-theming:  5.9.1 
    @mui/styled-engine:  5.8.7 
    @mui/system: ^5.9.2 => 5.9.2 
    @mui/types:  7.1.5 
    @mui/utils:  5.9.1 
    @mui/x-data-grid: ^5.14.0 => 5.15.0 
    @types/react: 17.0.45 => 17.0.45 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    styled-components: ^5.3.5 => 5.3.5 
    typescript: ^4.7.4 => 4.7.4 

Order ID 💳 (optional)

No response

[m4theushw]

Some items we can only do in v6 because they are visual breaking changes.

the data-grid has by default a border-radius, which cuts off the outline (see screenshot)

Nobody complained about that so far but we can fix it by applying the same border-radius to only the very first and very last column header. This way we create the impression that the column headers react to the grid's radius.

the outline is below the header dividers (see screenshot)

In v6 we want to hide the column separators. See #1623

the top outline is missing due to outline-offset: -1px; set to the .MuiDataGrid-columnHeader:focus-within

Actually it's because .MuiDataGrid-columnHeaders has overflow: hidden. We need overflow: hidden for the virtualization.

---

Instead of outline you can use box-shadow: inset ... to achieve the "outline" effect. We have outline-offset: -1px to simulate the inset shadow.

[aaarichter]

Some items we can only do in v6 because they are visual breaking changes.

the data-grid has by default a border-radius, which cuts off the outline (see screenshot)

Nobody complained about that so far but we can fix it by applying the same border-radius to only the very first and very last column header. This way we create the impression that the column headers react to the grid's radius.

that would be great @m4theushw

[LumaKernel]

Little upvote with Pro plan (order id = 67619) 👍