Merge branch 'master' into tree-item-indentation

.github/workflows/cherry-pick-next-to-master.yml → .github/workflows/cherry-pick-master-to-v7.yml

@@ -1,17 +1,17 @@
-name: Cherry pick next to master
+name: Cherry pick master to v7
 
 on:
   pull_request_target:
     branches:
-      - next
+      - master
     types: ['closed']
 
 permissions: {}
 
 jobs:
-  cherry_pick_to_master:
+  cherry_pick_to_v7:
     runs-on: ubuntu-latest
-    name: Cherry pick into master
+    name: Cherry pick into v7
     permissions:
       pull-requests: write
       contents: write
@@ -26,7 +26,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         uses: carloscastrojumo/github-cherry-pick-action@503773289f4a459069c832dc628826685b75b4b3 # v1.0.10
         with:
-          branch: master
+          branch: v7.x
           body: 'Cherry-pick of #{old_pull_request_id}'
           cherry-pick-branch: ${{ format('cherry-pick-{0}', github.event.number) }}
           title: '{old_title} (@${{ github.event.pull_request.user.login }})'

.github/workflows/cherry-pick-master-to-v6.yml → .github/workflows/cherry-pick-v7-to-v6.yml

@@ -1,17 +1,17 @@
-name: Cherry pick master to v6
+name: Cherry pick v7 to v6
 
 on:
   pull_request_target:
     branches:
-      - master
+      - v7.x
     types: ['closed']
 
 permissions: {}
 
 jobs:
-  cherry_pick_to_v6:
+  cherry_pick_v7_to_v6:
     runs-on: ubuntu-latest
-    name: Cherry pick into v6
+    name: Cherry pick v7 into v6
     permissions:
       pull-requests: write
       contents: write

CHANGELOG.md

@@ -69,7 +69,7 @@ Same changes as in `@mui/[email protected]`.
 
 #### `@mui/[email protected]`
 
-- [TreeView] Fix `alpha` usage with CSS variables (#14969) @wangkailang
+- [TreeView] Fix `alpha()` usage with CSS variables (#14969) @wangkailang
 - [TreeView] Fix usage of the `aria-selected` attribute (#14991) @flaviendelangle
 - [TreeView] Fix hydration error (#15002) @flaviendelangle
 
@@ -405,7 +405,7 @@ We'd like to offer a big thanks to the 12 contributors who made this release pos
 
 - [DataGrid] Add "does not equal" and "does not contain" filter operators (#14489) @KenanYusuf
 - [DataGrid] Add demo to the "Custom columns" page that does not use generator (#13695) @arminmeh
-- [DataGrid] Fix Voice Over reading the column name twice (#14482) @arminmeh
+- [DataGrid] Fix VoiceOver reading the column name twice (#14482) @arminmeh
 - [DataGrid] Fix bug in CRUD example (#14513) @michelengelen
 - [DataGrid] Fix failing jsdom tests caused by `:has()` selectors (#14559) @KenanYusuf
 - [DataGrid] Refactor string operator filter functions (#14564) @KenanYusuf
@@ -1225,7 +1225,7 @@ _Jul 5, 2024_
 We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
 
 - 🔄 Add loading overlay variants, including a skeleton loader option to the Data Grid component. See [Loading overlay docs](https://mui.com/x/react-data-grid/overlays/#loading-overlay) for more details.
-- 🌳 Add `selectItem` and `getItemDOMElement` methods to the TreeView component public API
+- 🌳 Add `selectItem()` and `getItemDOMElement()` methods to the TreeView component public API
 - ⛏️ Make the `usePickersTranslations` hook public in the pickers component
 - 🐞 Bugfixes
 
@@ -1270,7 +1270,7 @@ Same changes as in `@mui/[email protected]`.
 
 #### `@mui/[email protected]`
 
-- [TreeView] Add `selectItem` and `getItemDOMElement` methods to the public API (#13485) @flaviendelangle
+- [TreeView] Add `selectItem()` and `getItemDOMElement()` methods to the public API (#13485) @flaviendelangle
 
 ### Docs
 

codecov.yml

@@ -10,15 +10,15 @@ coverage:
       adapters:
         target: 100%
         paths:
-          - 'packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts'
-          - 'packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts'
-          - 'packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts'
-          - 'packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.ts'
-          - 'packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts'
-          - 'packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts'
-          - 'packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts'
-          - 'packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts'
-          - 'packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts'
+          - packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts
+          - packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts
+          - packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts
+          - packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.ts
+          - packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts
+          - packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts
+          - packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts
+          - packages/x-date-pickers/src/AdapterMomentHijri/AdapterMomentHijri.ts
+          - packages/x-date-pickers/src/AdapterMomentJalaali/AdapterMomentJalaali.ts
     patch: off
 
 comment: false

docs/data/charts/areas-demo/areas-demo.md

@@ -36,7 +36,7 @@ You can pass this gradient definition as a children of the `<LineChart />` and u
 To do so you will need to use the [`<linearGradient />`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient) and [`<stop />`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop) SVG elements.
 
 The first part is to get the SVG total height.
-Which can be done with the `useDrawingArea` hook.
+Which can be done with the `useDrawingArea()` hook.
 It's useful to define the `<linearGradient />` as a vector that goes from the top to the bottom of our SVG container.
 
 Then to define where the gradient should switch from one color to another, you can use the `useYScale` hook to get the y coordinate of value 0.

docs/data/charts/axis/axis.md

@@ -56,7 +56,7 @@ Which expects an array of value coherent with the `scaleType`:
 Some series types also require specific axis attributes:
 
 - line plots require an `xAxis` to have `data` provided
-- bar plots require an `xAxis` with `scaleType='band'` and some `data` provided.
+- bar plots require an `xAxis` with `scaleType="band"` and some `data` provided.
 
 ### Axis formatter
 

docs/data/charts/bars/bars.md

@@ -100,7 +100,7 @@ Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts
 
 {{"demo": "ColorScale.js"}}
 
-### Border Radius
+### Border radius
 
 To give your bar chart rounded corners, you can change the value of the `borderRadius` property on the [BarChart](/x/api/charts/bar-chart/#bar-chart-prop-slots).
 
@@ -117,7 +117,7 @@ Or you can pass `'value'` to display the raw value of the bar.
 
 {{"demo": "BarLabel.js"}}
 
-### Custom Labels
+### Custom labels
 
 You can display, change, or hide labels based on conditional logic.
 To do so, provide a function to the `barLabel`.
@@ -174,7 +174,7 @@ import ChartsOnAxisClickHandler from '@mui/x-charts/ChartsOnAxisClickHandler';
 To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop.
 When set to `true` it skips animation powered by `@react-spring/web`.
 
-Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
+Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
 
 ```jsx
 // For a single component chart

docs/data/charts/components/components.md

@@ -20,7 +20,7 @@ Charts dimensions are defined by a few props:
 The term **drawing area** refers to the space available to plot data (scatter points, lines, or pie arcs).
 The `margin` is used to leave some space for extra elements, such as the axes, the legend, or the title.
 
-You can use the `useDrawingArea` hook in the charts subcomponents to get the coordinates of the **drawing area**.
+You can use the `useDrawingArea()` hook in the charts subcomponents to get the coordinates of the **drawing area**.
 
 ```jsx
 import { useDrawingArea } from '@mui/x-charts';

docs/data/charts/gauge/gauge.md

@@ -101,7 +101,7 @@ import {
 
 ### Creating your components
 
-To create your own components, use the `useGaugeState` hook which provides all you need about the gauge configuration:
+To create your own components, use the `useGaugeState()` hook which provides all you need about the gauge configuration:
 
 - information about the value: `value`, `valueMin`, `valueMax`
 - information to plot the arc: `startAngle`, `endAngle`, `outerRadius`, `innerRadius`, `cornerRadius`, `cx`, and `cy`

docs/data/charts/lines/lines.md

@@ -235,7 +235,7 @@ sx={{
 To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop.
 When set to `true` it skips animation powered by `@react-spring/web`.
 
-Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
+Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
 
 :::warning
 If you support interactive ways to add or remove series from your chart, you have to provide the series' id.

docs/data/charts/pie/pie.md

@@ -110,7 +110,7 @@ const onItemClick = (
 To skip animation at the creation and update of your chart you can use the `skipAnimation` prop.
 When set to `true` it skips animation powered by `@react-spring/web`.
 
-Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
+Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important).
 
 ```jsx
 // For a single component chart

docs/data/charts/tooltip/CustomAxisTooltip.js

@@ -3,22 +3,80 @@ import NoSsr from '@mui/material/NoSsr';
 import Popper from '@mui/material/Popper';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import { useAxisTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip';
+import { useAxisTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useSvgRef } from '@mui/x-charts/hooks';
 import { generateVirtualElement } from './generateVirtualElement';
 
+function usePointer() {
+  const svgRef = useSvgRef();
+  const popperRef = React.useRef(null);
+  const virtualElement = React.useRef(generateVirtualElement({ x: 0, y: 0 }));
+
+  // Use a ref to avoid rerendering on every mousemove event.
+  const [pointer, setPointer] = React.useState({
+    isActive: false,
+    isMousePointer: false,
+    pointerHeight: 0,
+  });
+
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null) {
+      return () => {};
+    }
+
+    const handleOut = (event) => {
+      if (event.pointerType !== 'mouse') {
+        setPointer((prev) => ({
+          ...prev,
+          isActive: false,
+        }));
+      }
+    };
+
+    const handleEnter = (event) => {
+      setPointer({
+        isActive: true,
+        isMousePointer: event.pointerType === 'mouse',
+        pointerHeight: event.height,
+      });
+    };
+
+    const handleMove = (event) => {
+      virtualElement.current = generateVirtualElement({
+        x: event.clientX,
+        y: event.clientY,
+      });
+      popperRef.current?.update();
+    };
+
+    element.addEventListener('pointerenter', handleEnter);
+    element.addEventListener('pointerup', handleOut);
+    element.addEventListener('pointermove', handleMove);
+
+    return () => {
+      element.removeEventListener('pointerenter', handleEnter);
+      element.removeEventListener('pointerup', handleOut);
+      element.removeEventListener('pointermove', handleMove);
+    };
+  }, [svgRef]);
+
+  return { ...pointer, popperRef, anchorEl: virtualElement.current };
+}
+
 export function CustomAxisTooltip() {
   const tooltipData = useAxisTooltip();
-  const mousePosition = useMouseTracker(); // Track the mouse position on chart.
+  const { isActive, isMousePointer, pointerHeight, popperRef, anchorEl } =
+    usePointer();
 
-  if (!tooltipData || !mousePosition) {
+  if (!tooltipData || !isActive) {
     // No data to display
     return null;
   }
 
   // The pointer type can be used to have different behavior based on pointer type.
-  const isMousePointer = mousePosition?.pointerType === 'mouse';
   // Adapt the tooltip offset to the size of the pointer.
-  const yOffset = isMousePointer ? 0 : 40 - mousePosition.height;
+  const yOffset = isMousePointer ? 0 : 40 - pointerHeight;
 
   return (
     <NoSsr>
@@ -29,7 +87,8 @@ export function CustomAxisTooltip() {
         }}
         open
         placement={isMousePointer ? 'top-end' : 'top'}
-        anchorEl={generateVirtualElement(mousePosition)}
+        anchorEl={anchorEl}
+        popperRef={popperRef}
         modifiers={[
           {
             name: 'offset',

docs/data/charts/tooltip/CustomAxisTooltip.tsx

@@ -1,24 +1,88 @@
 import * as React from 'react';
 import NoSsr from '@mui/material/NoSsr';
-import Popper from '@mui/material/Popper';
+import Popper, { PopperProps } from '@mui/material/Popper';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import { useAxisTooltip, useMouseTracker } from '@mui/x-charts/ChartsTooltip';
+import { useAxisTooltip } from '@mui/x-charts/ChartsTooltip';
+import { useSvgRef } from '@mui/x-charts/hooks';
 import { generateVirtualElement } from './generateVirtualElement';
 
+type PointerState = {
+  isActive: boolean;
+  isMousePointer: boolean;
+  pointerHeight: number;
+};
+
+function usePointer(): PointerState & Pick<PopperProps, 'popperRef' | 'anchorEl'> {
+  const svgRef = useSvgRef();
+  const popperRef: PopperProps['popperRef'] = React.useRef(null);
+  const virtualElement = React.useRef(generateVirtualElement({ x: 0, y: 0 }));
+
+  // Use a ref to avoid rerendering on every mousemove event.
+  const [pointer, setPointer] = React.useState<PointerState>({
+    isActive: false,
+    isMousePointer: false,
+    pointerHeight: 0,
+  });
+
+  React.useEffect(() => {
+    const element = svgRef.current;
+    if (element === null) {
+      return () => {};
+    }
+
+    const handleOut = (event: PointerEvent) => {
+      if (event.pointerType !== 'mouse') {
+        setPointer((prev) => ({
+          ...prev,
+          isActive: false,
+        }));
+      }
+    };
+
+    const handleEnter = (event: PointerEvent) => {
+      setPointer({
+        isActive: true,
+        isMousePointer: event.pointerType === 'mouse',
+        pointerHeight: event.height,
+      });
+    };
+
+    const handleMove = (event: PointerEvent) => {
+      virtualElement.current = generateVirtualElement({
+        x: event.clientX,
+        y: event.clientY,
+      });
+      popperRef.current?.update();
+    };
+
+    element.addEventListener('pointerenter', handleEnter);
+    element.addEventListener('pointerup', handleOut);
+    element.addEventListener('pointermove', handleMove);
+
+    return () => {
+      element.removeEventListener('pointerenter', handleEnter);
+      element.removeEventListener('pointerup', handleOut);
+      element.removeEventListener('pointermove', handleMove);
+    };
+  }, [svgRef]);
+
+  return { ...pointer, popperRef, anchorEl: virtualElement.current };
+}
+
 export function CustomAxisTooltip() {
   const tooltipData = useAxisTooltip();
-  const mousePosition = useMouseTracker(); // Track the mouse position on chart.
+  const { isActive, isMousePointer, pointerHeight, popperRef, anchorEl } =
+    usePointer();
 
-  if (!tooltipData || !mousePosition) {
+  if (!tooltipData || !isActive) {
     // No data to display
     return null;
   }
 
   // The pointer type can be used to have different behavior based on pointer type.
-  const isMousePointer = mousePosition?.pointerType === 'mouse';
   // Adapt the tooltip offset to the size of the pointer.
-  const yOffset = isMousePointer ? 0 : 40 - mousePosition.height;
+  const yOffset = isMousePointer ? 0 : 40 - pointerHeight;
 
   return (
     <NoSsr>
@@ -29,7 +93,8 @@ export function CustomAxisTooltip() {
         }}
         open
         placement={isMousePointer ? 'top-end' : 'top'}
-        anchorEl={generateVirtualElement(mousePosition)}
+        anchorEl={anchorEl}
+        popperRef={popperRef}
         modifiers={[
           {
             name: 'offset',