[DataGrid] DataGridPro type check fails at build with themeAugmentation

[AntonWiliot]

The problem in depth 🔍

After we switched the type definitions in our MUI theme settings from "@mui/x-data-grid/themeAugmentation" to "@mui/x-data-grid-pro/themeAugmentation" - import type {} from "@mui/x-data-grid-pro/themeAugmentation"; - the next typescript errors appeared:

[build:types] node_modules/@mui/x-data-grid-pro/models/dataGridProProps.d.ts(177,41): error TS2344: Type '"rowsScrollEnd"' does not satisfy the constraint 'keyof GridEventLookup'.
[build:types] node_modules/@mui/x-data-grid-pro/models/dataGridProProps.d.ts(214,42): error TS2344: Type '"rowOrderChange"' does not satisfy the constraint 'keyof GridEventLookup'.
[build:types] node_modules/@mui/x-data-grid-pro/models/dataGridProProps.d.ts(221,37): error TS2344: Type '"fetchRows"' does not satisfy the constraint 'keyof GridEventLookup'.

The issue appears at build stage when tsc command is run. The problem is observed for Pro version only, Community version has no issues. Please could you check is it the issue in the library types or may be the problem in our configuration (envinfo details are added).

Your environment 🌎

`npx @mui/envinfo`

System: OS: macOS 14.0 Binaries: Node: 18.17.1 - /usr/local/bin/node Yarn: 1.22.18 - /usr/local/bin/yarn npm: 9.6.7 - /usr/local/bin/npm Browsers: Chrome: 120.0.6099.71 Edge: Not Found Safari: 17.0 npmPackages: @emotion/react: ^11.11.0 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.26 @mui/core-downloads-tracker: 5.14.20 @mui/icons-material: ^5.14.0 => 5.14.19 @mui/lab: ^5.0.0-alpha.140 => 5.0.0-alpha.155 @mui/material: ^5.14.0 => 5.14.20 @mui/private-theming: 5.14.20 @mui/styled-engine: 5.14.20 @mui/styled-engine-sc: ^5.14.0 => 5.14.12 @mui/system: 5.14.20 @mui/types: 7.2.10 @mui/utils: 5.14.20 @mui/x-data-grid: 6.18.4 @mui/x-data-grid-pro: ^6.18.0 => 6.18.4 @mui/x-license-pro: 6.10.2 @types/react: ^17.0.19 => 17.0.71 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 styled-components: ^5.3.9 => 5.3.11 typescript: ^5.3.0 => 5.3.3

Search keywords: datagridpro typescript error
Order ID: 71637

[michelengelen]

Hey @AntonWiliot I guess you are still using GridEventLookup, but the data grid pro augmentation uses GridEventLookupPro.
Could you check if you import and use GridEventLookup in your implementation? In that case changing this to GridEventLookupPro should be sufficient to satisfy the key constraint!
Thanks!

[AntonWiliot]

I guess you are still using GridEventLookup, but the data grid pro augmentation uses GridEventLookupPro. Could you check if you import and use GridEventLookup in your implementation? In that case changing this to GridEventLookupPro should be sufficient to satisfy the key constraint! Thanks!

No, we don't use explicit imports of GridEventLookup. Only type {} from "@mui/x-data-grid-pro/themeAugmentation" is imported in MUI theme settings. The error appears just after change @mui/x-data-grid to @mui/x-data-grid-pro, without any other changes. The application works, only type check fails. The issue looks to be in type definitions inside the pro package

[michelengelen]

@AntonWiliot I tried, but cannot reproduce the issue. Could you provide us with a minimal reproduction example and include your typescript config?

@cherniavskii The only thing that I could find (that did not make much sense to me - or maybe i am missing something) was this part in the typeOverloads/modules.ts file:

for Prop

mui-x/packages/grid/x-data-grid-pro/src/typeOverloads/modules.ts

Lines 64 to 76 in c85d38b

	declare module '@mui/x-data-grid' {
	interface GridEventLookup extends GridEventLookupPro {}
	interface GridControlledStateEventLookup extends GridControlledStateEventLookupPro {}
	interface GridPipeProcessingLookup extends GridPipeProcessingLookupPro {}
	}
	declare module '@mui/x-data-grid/internals' {
	interface GridApiCaches extends GridApiCachesPro {}
	interface GridBaseColDef extends GridColDefPro {}
	}

for Premium

mui-x/packages/grid/x-data-grid-premium/src/typeOverloads/modules.ts

Lines 91 to 109 in c85d38b

	declare module '@mui/x-data-grid-pro' {
	interface GridEventLookup extends GridEventLookupPremium {}
	interface GridControlledStateEventLookup
	extends GridControlledStateEventLookupPro,
	GridControlledStateEventLookupPremium {}
	interface GridRenderCellParams<R, V, F> extends GridRenderCellParamsPremium<R, V, F> {}
	interface GridColumnHeaderParams<R, V, F> extends GridColumnHeaderParamsPremium<R, V, F> {}
	interface GridApiCaches extends GridApiCachesPremium {}
	}
	declare module '@mui/x-data-grid-pro/internals' {
	interface GridApiCaches extends GridApiCachesPremium {}
	interface GridBaseColDef<R, V, F> extends GridColDefPremium<R, V, F> {}
	}

Shouldn't this be ...

declare module '@mui/x-data-grid-pro' {
...

... for Pro, and ...

declare module '@mui/x-data-grid-premium' {
...

... for Premium?

[AntonWiliot]

I tried, but cannot reproduce the issue. Could you provide us with a minimal reproduction example and include your typescript config?

Minimal example of file where the problem occurs

import { ThemeOptions, createTheme } from "@mui/material/styles";
import type {} from "@mui/x-data-grid-pro/themeAugmentation";
const themeSettingsMUI: ThemeOptions = {};
export const themeMUI = createTheme(themeSettingsMUI);

Typescript config

{
  "compilerOptions": {
    "esModuleInterop": true,
    "module": "esnext",
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "lib": [
      "dom",
      "es5",
      "scripthost",
      "es2015",
      "es2015.promise",
      "es2016.array.include",
      "es2018"
    ],
    "declaration": true,
    "emitDeclarationOnly": true,
     "jsx": "react-jsx",
    "declarationDir": "dist"
  }
 "include": ["src/**/*"],
  "exclude": ["src/**/*.test*"]
}

[cherniavskii]

Hi @AntonWiliot
Thanks for the minimal example.
Unfortunately, I cannot reproduce the issue you describe - please take a look if you can reproduce it in this repo: https://github.com/cherniavskii/data-grid-pro-theme-augmentation

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

[AntonWiliot]

I've cloned your repository https://github.com/cherniavskii/data-grid-pro-theme-augmentation, installed packages, run tsc and got all the errors mentioned above:

node_modules/@mui/x-data-grid-pro/models/dataGridProProps.d.ts:177:41 - error TS2344: Type '"rowsScrollEnd"' does not satisfy the constraint 'keyof GridEventLookup'.
onRowsScrollEnd?: GridEventListener<'rowsScrollEnd'>;

node_modules/@mui/x-data-grid-pro/models/dataGridProProps.d.ts:214:42 - error TS2344: Type '"rowOrderChange"' does not satisfy the constraint 'keyof GridEventLookup'.
onRowOrderChange?: GridEventListener<'rowOrderChange'>;

node_modules/@mui/x-data-grid-pro/models/dataGridProProps.d.ts:221:37 - error TS2344: Type '"fetchRows"' does not satisfy the constraint 'keyof GridEventLookup'.
onFetchRows?: GridEventListener<'fetchRows'>;

The only thing that you use 4.4.2 typescript. The error occurs starting from 4.5.2. Our project now uses 5.1.6 typescript. So the error is recreated in the reported minimal configuration

[cherniavskii]

Thanks, I've upgraded typescript and can reproduce the issue now.
Is there a reason you don't have skipLibCheck enabled in tsconfig.json?

[AntonWiliot]

We'd prefer to see the issues in the packages we use. Sure if something not critical blocks our deployment skipLibCheck option may be added. Currently we temporarily use community DataGrid type augmentation until Pro types will be fixed

[michelengelen]

@cherniavskii i'll add this to the board, ok?