[charts] Refactor `useRegisterPointerEventHandlers` by bernardobelchior · Pull Request #20824 · mui/mui-x

bernardobelchior · 2026-01-05T17:39:02Z

Refactor useRegisterPointerEventHandlers into two hooks:

useRegisterPointerInteractions that listens to pointer movements and will be shared by the batch bar and heatmap charts.
useRegisterItemClickHandlers that handles the item click on batch bar charts

Screen.Recording.2026-01-05.at.17.40.15.mov

mui-bot · 2026-01-05T17:40:45Z

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

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-data-grid-premium	0B^(0.00%)	0B^(0.00%)
@mui/x-charts	🔺+79B^(+0.02%)	🔺+90B^(+0.08%)
@mui/x-charts-pro	🔺+79B^(+0.02%)	🔺+90B^(+0.06%)
@mui/x-charts-premium	🔺+79B^(+0.02%)	🔺+83B^(+0.06%)
@mui/x-date-pickers	0B^(0.00%)	0B^(0.00%)
@mui/x-date-pickers-pro	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view	0B^(0.00%)	0B^(0.00%)
@mui/x-tree-view-pro	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 10d2424

codspeed-hq · 2026-01-05T18:00:34Z

CodSpeed Performance Report

Merging #20824 will not alter performance

_{Comparing bernardobelchior:extract-register-click-handlers (10d2424) with master (593a7a5)¹}

Summary

✅ 14 untouched

No successful run was found on master (9dec0ac) during the generation of this report, so 593a7a5 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

packages/x-charts/src/internals/plugins/featurePlugins/shared/useRegisterPointerInteractions.ts

JCQuintas · 2026-01-05T20:46:44Z

packages/x-charts/src/BarChart/BatchBarPlot/BatchBarPlot.tsx

+    ? () => {
+        if (prevCursorRef.current == null) {
+          prevCursorRef.current = document.body.style.cursor;
+          document.body.style.cursor = 'pointer';


Why are we changing the cursor of the body? 🤔

I can also change the cursor of the SVG, I think. I'll do that instead

packages/x-charts/src/BarChart/useRegisterItemClickHandlers.ts

JCQuintas

small suggestions to simplify logic

JCQuintas · 2026-01-06T12:03:56Z

packages/x-charts/src/BarChart/BatchBarPlot/BatchBarPlot.tsx

+        if (!svg) {
+          return;
+        }
+
+        if (prevCursorRef.current == null) {
+          prevCursorRef.current = svg.style.cursor;
+          // eslint-disable-next-line react-compiler/react-compiler
+          svg.style.cursor = 'pointer';
+        }


Suggested change

if (!svg) {

return;

}

if (prevCursorRef.current == null) {

prevCursorRef.current = svg.style.cursor;

// eslint-disable-next-line react-compiler/react-compiler

svg.style.cursor = 'pointer';

}

if (!svg || prevCursorRef.current) {

return;

}

prevCursorRef.current = svg.style.cursor;

// eslint-disable-next-line react-compiler/react-compiler

svg.style.cursor = 'pointer';

This does shorten the number of lines of code, but I find it harder to read, so if you don't mind I'll keep it as is.

We can discuss this here and I'll change it in a follow-up if needed.

Yeah my point was mostly regarding the == null which is a bit useless

I don't think it is. If you get the cursor style of an element, it can be an empty string, so we want to make the distinction between an empty string (the style of the element) and null/undefined (the cursor hasn't been set previously)

JCQuintas · 2026-01-06T12:04:36Z

packages/x-charts/src/BarChart/BatchBarPlot/BatchBarPlot.tsx

+        if (!svg) {
+          return;
+        }
+
+        if (prevCursorRef.current != null) {
+          svg.style.cursor = prevCursorRef.current;
+          prevCursorRef.current = null;
+        }


Suggested change

if (!svg) {

return;

}

if (prevCursorRef.current != null) {

svg.style.cursor = prevCursorRef.current;

prevCursorRef.current = null;

}

if (!svg || !prevCursorRef.current) {

return;

}

svg.style.cursor = prevCursorRef.current;

prevCursorRef.current = null;

[charts] Extract useRegisterItemClickHandlers

ef57a81

bernardobelchior added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: charts Changes related to the charts. labels Jan 5, 2026

bernardobelchior marked this pull request as ready for review January 5, 2026 18:00

bernardobelchior requested a review from a team as a code owner January 5, 2026 18:00

JCQuintas reviewed Jan 5, 2026

View reviewed changes

bernardobelchior force-pushed the extract-register-click-handlers branch from 4faa064 to 20d6f21 Compare January 6, 2026 10:00

Delete unused hook. Accept suggestions

10d2424

bernardobelchior force-pushed the extract-register-click-handlers branch from 20d6f21 to 10d2424 Compare January 6, 2026 10:01

bernardobelchior requested a review from JCQuintas January 6, 2026 10:01

bernardobelchior enabled auto-merge (squash) January 6, 2026 11:27

bernardobelchior disabled auto-merge January 6, 2026 11:38

JCQuintas approved these changes Jan 6, 2026

View reviewed changes

bernardobelchior merged commit 7cf9f28 into mui:master Jan 6, 2026
22 checks passed

bernardobelchior deleted the extract-register-click-handlers branch January 6, 2026 14:02

bernardobelchior mentioned this pull request Jan 6, 2026

[charts-pro] Add onItemClick to the heatmap #20817

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[charts] Refactor `useRegisterPointerEventHandlers`#20824

[charts] Refactor `useRegisterPointerEventHandlers`#20824
bernardobelchior merged 2 commits intomui:masterfrom
bernardobelchior:extract-register-click-handlers

bernardobelchior commented Jan 5, 2026 •

edited

Loading

Uh oh!

mui-bot commented Jan 5, 2026 •

edited

Loading

Uh oh!

codspeed-hq bot commented Jan 5, 2026 •

edited

Loading

Uh oh!

Uh oh!

JCQuintas Jan 5, 2026

Uh oh!

bernardobelchior Jan 6, 2026

Uh oh!

Uh oh!

JCQuintas left a comment

Uh oh!

JCQuintas Jan 6, 2026

Uh oh!

bernardobelchior Jan 6, 2026

Uh oh!

JCQuintas Jan 6, 2026

Uh oh!

bernardobelchior Jan 6, 2026

Uh oh!

JCQuintas Jan 6, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

bernardobelchior commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

codspeed-hq bot commented Jan 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging #20824 will not alter performance

Summary

Footnotes

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

JCQuintas left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bernardobelchior commented Jan 5, 2026 •

edited

Loading

mui-bot commented Jan 5, 2026 •

edited

Loading

codspeed-hq bot commented Jan 5, 2026 •

edited

Loading