[DataGridPro] Type the event publisher and listener

[flaviendelangle]

Preview: https://deploy-preview-3022--material-ui-x.netlify.app/components/data-grid/events/#catalog-of-events

The goal is to have a strict typing on our event publisher / listener arguments. This have several benefits:

• hep us tracking errors in our code
• have a single source of truth to link event name, params and event object
• improve 3rd party developer DX when using subscribeEvent
• allow to auto-generate documentation basic examples

Changes

• Use the lookup to generate the description of the event name instead of hardcoding it
• Use the lookup to define the prop callback type (props.onRowClick)
• Type useGridApiEventHandler
• Type apiRef.current.publishEvent
• Type apiRef.current.subscribeEvent
• Accept GridEvents.someEvent and "someEvent" everywhere

We still have the signature of the prop callbacks hardcoded in the comment because otherwise the documentation is not generated correctly from the prop-types.
We could autogen the comments of the TS file at some point but I don't want to over-engineer.

I improved the event table in the doc with a small example of subscription than shows the types and the params available.
This part can be moved to a follow up PR if you want.

Typing of the event params

• Type as narrow as possible if the event comes from the DOM / the internal code
• Accept MuiBaseEvent if the event potentially come from a apiRef method (ex: rowEditCommit is triggered via commitRowChange)

Bug fixes

I found a few bugs / behavior inconsistencies after typing the events

• The cellNavigationKeyDown event can receive a GridRowParams as params argument when fired by handleRowEditStop in useGridEditRows. In this scenario it does not have a field and should pick the 1st column. It was working but was not safe since it called getColumnIndex with field=undefined.

Public API changes :

• onCellValueChange removed because never called
• cellDragStart and cellDragEnd events removed because never published

I don't think any of this count as breaking change, it's only type modification and bug fixes.

Changelog

• 🎁 Add strict typing to the event publisher and listener [DataGridPro] Type the event publisher and listener #3022 (@flaviendelangle)

  apiRef.current.subscribeEvent / apiRef.current.publishEvent and useGridApiEventHandler are now fully typed and gives you the correct arguments based on the event you are listening to or emitting.

  const handleRowClick: GridEventListener<'rowClick'> = (
    params, // has type `GridRowParams`
    event, // has type `MuiEvent<React.MouseEvent<HTMLElement>>
    details, // has type `GridCallbackDetails
  ) => {
    /* ... */
  };
  
  // with string event name
  apiRef.current.subscribeEvent('rowClick', handleRowClick)
  useGridApiEventHandler(apiRef, 'rowClick', handleRowClick)
  
  // or with enum event name
  apiRef.current.subscribeEvent(GridEvents.rowClick, handleRowClick)
  useGridApiEventHandler(apiRef, GridEvents.rowClick, handleRowClick)

[github-actions]

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

[github-actions]

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

[github-actions]

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

[m4theushw]

This created one problem:

[flaviendelangle]

Fixed, I did the escape on the docs instead of doing it during the build

[github-actions]

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

[github-actions]

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

[m4theushw]

The indentation is not the same as https://deploy-preview-3022--material-ui-x.netlify.app/components/data-grid/events/#subscribing-to-events

[m4theushw]

It's not formatting correctly.

[flaviendelangle]

Fixed