Merge branch 'master' into make-data-source-MIT

mui · Feb 9, 2025 · c06aa7a · c06aa7a
2 parents 007008e + 5ed0b65
commit c06aa7a
Show file tree

Hide file tree

Showing 141 changed files with 2,012 additions and 1,297 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,110 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## **8.0.0-alpha.11**
+
+_Feb 7, 2025_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚡ Mount and resize performance improvements for the Data Grid
+
+Special thanks go out to the community contributors who have helped make this release possible:
+@lauri865.
+Following are all team members who have contributed to this release:
+@alexfauquette, @arminmeh, @bernardobelchior, @flaviendelangle, @Janpot, @KenanYusuf, @LukasTy, @MBilalShafi, @noraleonte, @romgrk.
+
+<!--/ HIGHLIGHT_ABOVE_SEPARATOR /-->
+
+### Data Grid
+
+#### Breaking changes
+
+- `createUseGridApiEventHandler()` is not exported anymore.
+- The `filteredRowsLookup` object of the filter state does not contain `true` values anymore. If the row is filtered out, the value is `false`. Otherwise, the row id is not present in the object.
+  This change only impacts you if you relied on `filteredRowsLookup` to get ids of filtered rows. In this case,use `gridDataRowIdsSelector` selector to get row ids and check `filteredRowsLookup` for `false` values:
+
+  ```diff
+   const filteredRowsLookup = gridFilteredRowsLookupSelector(apiRef);
+  -const filteredRowIds = Object.keys(filteredRowsLookup).filter((rowId) => filteredRowsLookup[rowId] === true);
+  +const rowIds = gridDataRowIdsSelector(apiRef);
+  +const filteredRowIds = rowIds.filter((rowId) => filteredRowsLookup[rowId] !== false);
+  ```
+
+- The `visibleRowsLookup` state does not contain `true` values anymore. If the row is not visible, the value is `false`. Otherwise, the row id is not present in the object:
+
+  ```diff
+   const visibleRowsLookup = gridVisibleRowsLookupSelector(apiRef);
+  -const isRowVisible = visibleRowsLookup[rowId] === true;
+  +const isRowVisible = visibleRowsLookup[rowId] !== false;
+  ```
+
+#### `@mui/[email protected]`
+
+- [DataGrid] Avoid `<GridRoot />` double-render pass on mount in SPA mode (#15648) @lauri865
+- [DataGrid] Fix loading overlay not in sync with scroll (#16437) @MBilalShafi
+- [DataGrid] Refactor: remove material `MenuList` import (#16444) @romgrk
+- [DataGrid] Refactor: simplify `useGridApiEventHandler()` (#16479) @romgrk
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`, plus:
+
+- [DataGridPro] Fix the return type of `useGridApiContext()` for Pro and Premium packages on React < 19 (#16441) @arminmeh
+
+#### `@mui/[email protected]` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/[email protected]`, plus:
+
+- [DataGridPremium] Fix "no rows" overlay not showing with active aggregation (#16466) @KenanYusuf
+
+### Date and Time Pickers
+
+#### `@mui/[email protected]`
+
+Internal changes.
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`, plus:
+
+- [DateRangeCalendar] Support arrow navigation with multiple months rendered (#16363) @flaviendelangle
+- [DateRangePicker] Fix `currentMonthCalendarPosition` prop behavior on mobile (#16455) @LukasTy
+- [DateRangePicker] Fix vertical alignment for multi input fields (#16489) @noraleonte
+
+### Charts
+
+#### `@mui/[email protected]`
+
+- [charts] Add `color` prop to `Sparkline` and deprecate `colors` (#16477) @bernardobelchior
+- [charts] Make typescript more flexible about plugins and their params (#16478) @alexfauquette
+- [charts] Remove component for axis event listener (#16314) @alexfauquette
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Tree View
+
+#### `@mui/[email protected]`
+
+Internal changes.
+
+#### `@mui/[email protected]` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/[email protected]`.
+
+### Docs
+
+- [docs] Update charts colors default value (#16484) @bernardobelchior
+
+### Core
+
+- [core] Fix corepack and pnpm installation in CircleCI (#16434) @flaviendelangle
+- [code-infra] Update monorepo (#16112) @Janpot
+- [test] Avoid test warning when running on React 18 (#16486) @LukasTy
+- [test] Disable `react-transition-group` transitions in unit testing (#16288) @lauri865
+
 ## 8.0.0-alpha.10
 
 _Jan 30, 2025_
@@ -50,6 +154,7 @@ Following are all team members who have contributed to this release:
   +  },
    });
   ```
+
 - The `detailPanels`, `pinnedColumns`, and `pinnedRowsRenderZone` classes have been removed.
 - Return type of the `useGridApiRef()` hook and the type of `apiRef` prop are updated to explicitly include the possibilty of `null`. In addition to this, `useGridApiRef()` returns a reference that is initialized with `null` instead of `{}`.
 
@@ -91,7 +196,7 @@ Same changes as in `@mui/[email protected]`.
 
 #### Breaking changes
 
-- The component passed to the `field` slot no longer receives the `ref`,  `disabled`, `className`, `sx`, `label`, `name`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections`, `onSelectedSectionsChange` and `inputRef` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
+- The component passed to the `field` slot no longer receives the `ref`, `disabled`, `className`, `sx`, `label`, `name`, `formatDensity`, `enableAccessibleFieldDOMStructure`, `selectedSections`, `onSelectedSectionsChange` and `inputRef` props — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#slot-field)
 - The `MuiPickersPopper` theme entry have been renamed `MuiPickerPopper` and some of its props have been removed — [Learn more](https://next.mui.com/x/migration/migration-pickers-v7/#muipickerspopper)
 
 #### `@mui/[email protected]`
@@ -111,7 +216,7 @@ Same changes as in `@mui/[email protected]`.
 
 - Replace `legend.position.horizontal` from `"left" | "middle" | "right"` to `"start" | "center" | "end"`.
   This is to align with the CSS values and reflect the RTL ability of the legend component.
-- The default colors have changed. To keep using the old palette. It is possible to import `blueberryTwilightPalette` from  `@mui/x-charts/colorPalettes` and set it on the `colors` property of charts.
+- The default colors have changed. To keep using the old palette. It is possible to import `blueberryTwilightPalette` from `@mui/x-charts/colorPalettes` and set it on the `colors` property of charts.
 - The `id` property is now optional on the `Pie` and `Scatter` data types.
 
 #### `@mui/[email protected]`

diff --git a/README.md b/README.md
@@ -40,10 +40,10 @@ Get started in the [MUI X documentation](https://mui.com/x/introduction/).
 
 ### Installation
 
-- [Data Grid installation](https://mui.com/x/react-data-grid/getting-started/#installation)
-- [Date and Time Pickers installation](https://mui.com/x/react-date-pickers/getting-started/#installation)
-- [Charts installation](https://mui.com/x/react-charts/getting-started/#installation)
-- [Tree View installation](https://mui.com/x/react-tree-view/getting-started/#installation)
+- [Data Grid installation](https://mui.com/x/react-data-grid/quickstart/#installation)
+- [Date and Time Pickers installation](https://mui.com/x/react-date-pickers/quickstart/#installation)
+- [Charts installation](https://mui.com/x/react-charts/quickstart/#installation)
+- [Tree View installation](https://mui.com/x/react-tree-view/quickstart/#installation)
 
 ## Licensing
 

diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt
@@ -1,5 +1,12 @@
 Broken links found by `docs:link-check` that exist:
 
+- https://mui.com/x/react-charts/getting-started/
 - https://mui.com/x/react-data-grid/#premium-plan
+- https://mui.com/x/react-data-grid/getting-started/
 - https://mui.com/x/react-data-grid/getting-started/#feature-comparison
 - https://mui.com/x/react-date-pickers/fields/#accessible-dom-structure
+- https://mui.com/x/react-date-pickers/getting-started/
+- https://mui.com/x/react-date-pickers/quickstart/#date-and-time-types
+- https://mui.com/x/react-tree-view/#rich-tree-view
+- https://mui.com/x/react-tree-view/#simple-tree-view
+- https://mui.com/x/react-tree-view/getting-started/
diff --git a/docs/data/charts/components/SeriesDemo.js b/docs/data/charts/components/SeriesDemo.js
@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { useLineSeries, useXAxis, useXScale, useYScale } from '@mui/x-charts/hooks';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+function ExtremaLabels() {
+  const lineSeries = useLineSeries();
+
+  if (!lineSeries) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      {lineSeries.seriesOrder.map((seriesId) => (
+        <SingleSeriesExtremaLabels series={lineSeries.series[seriesId]} />
+      ))}
+    </React.Fragment>
+  );
+}
+
+function SingleSeriesExtremaLabels({ series }) {
+  const xAxis = useXAxis('x');
+
+  const min = series.data.reduce(
+    (acc, value, index) =>
+      value != null && value < acc.value ? { index, value } : acc,
+    { index: -1, value: Infinity },
+  );
+  const max = series.data.reduce(
+    (acc, value, index) =>
+      value != null && value > acc.value ? { index, value } : acc,
+    { index: -1, value: -Infinity },
+  );
+
+  return (
+    <React.Fragment>
+      <PointLabel
+        x={xAxis.data?.[min.index]}
+        y={min.value}
+        placement="below"
+        color={series.color}
+      />
+      <PointLabel
+        x={xAxis.data?.[max.index]}
+        y={max.value}
+        placement="above"
+        color={series.color}
+      />
+    </React.Fragment>
+  );
+}
+
+function PointLabel({ x, y, placement, color }) {
+  const xAxisScale = useXScale();
+  const yAxisScale = useYScale();
+
+  const left = xAxisScale(x) ?? 0;
+  const top = (yAxisScale(y) ?? 0) + (placement === 'below' ? 20 : -20);
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        left,
+        top,
+        translate: '-50% -50%',
+        border: `2px solid ${color}`,
+        borderRadius: 1,
+        px: 1,
+      }}
+    >
+      <Typography variant="caption">{y}</Typography>
+    </Box>
+  );
+}
+
+export default function SeriesDemo() {
+  return (
+    <Box sx={{ position: 'relative', width: '100%' }}>
+      <ChartDataProvider
+        xAxis={[{ id: 'x', data: [1, 2, 3, 5, 8, 10] }]}
+        series={[
+          { id: 'a', type: 'line', data: [4, 6, 4, 9, 3, 5] },
+          { id: 'b', type: 'line', data: [3, 7, 8, 2, 4, 9] },
+        ]}
+        yAxis={[{ min: 0, max: 10 }]}
+        height={300}
+      >
+        <ChartsSurface>
+          <LinePlot />
+          <ChartsXAxis />
+          <ChartsYAxis />
+        </ChartsSurface>
+        <ExtremaLabels />
+      </ChartDataProvider>
+    </Box>
+  );
+}
diff --git a/docs/data/charts/components/SeriesDemo.tsx b/docs/data/charts/components/SeriesDemo.tsx
@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
+import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
+import { LinePlot } from '@mui/x-charts/LineChart';
+import { useLineSeries, useXAxis, useXScale, useYScale } from '@mui/x-charts/hooks';
+import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
+import { ChartDataProvider } from '@mui/x-charts/ChartDataProvider';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { DefaultizedLineSeriesType } from '@mui/x-charts/models';
+
+function ExtremaLabels() {
+  const lineSeries = useLineSeries();
+
+  if (!lineSeries) {
+    return null;
+  }
+
+  return (
+    <React.Fragment>
+      {lineSeries.seriesOrder.map((seriesId) => (
+        <SingleSeriesExtremaLabels series={lineSeries.series[seriesId]} />
+      ))}
+    </React.Fragment>
+  );
+}
+
+function SingleSeriesExtremaLabels({
+  series,
+}: {
+  series: DefaultizedLineSeriesType;
+}) {
+  const xAxis = useXAxis('x');
+
+  const min = series.data.reduce(
+    (acc, value, index) =>
+      value != null && value < acc.value ? { index, value } : acc,
+    { index: -1, value: Infinity },
+  );
+  const max = series.data.reduce(
+    (acc, value, index) =>
+      value != null && value > acc.value ? { index, value } : acc,
+    { index: -1, value: -Infinity },
+  );
+
+  return (
+    <React.Fragment>
+      <PointLabel
+        x={xAxis.data?.[min.index]}
+        y={min.value}
+        placement="below"
+        color={series.color}
+      />
+      <PointLabel
+        x={xAxis.data?.[max.index]}
+        y={max.value}
+        placement="above"
+        color={series.color}
+      />
+    </React.Fragment>
+  );
+}
+
+function PointLabel({
+  x,
+  y,
+  placement,
+  color,
+}: {
+  x: number;
+  y: number;
+  placement: 'above' | 'below';
+  color: string;
+}) {
+  const xAxisScale = useXScale();
+  const yAxisScale = useYScale();
+
+  const left = xAxisScale(x) ?? 0;
+  const top = (yAxisScale(y) ?? 0) + (placement === 'below' ? 20 : -20);
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        left,
+        top,
+        translate: '-50% -50%',
+        border: `2px solid ${color}`,
+        borderRadius: 1,
+        px: 1,
+      }}
+    >
+      <Typography variant="caption">{y}</Typography>
+    </Box>
+  );
+}
+
+export default function SeriesDemo() {
+  return (
+    <Box sx={{ position: 'relative', width: '100%' }}>
+      <ChartDataProvider
+        xAxis={[{ id: 'x', data: [1, 2, 3, 5, 8, 10] }]}
+        series={[
+          { id: 'a', type: 'line', data: [4, 6, 4, 9, 3, 5] },
+          { id: 'b', type: 'line', data: [3, 7, 8, 2, 4, 9] },
+        ]}
+        yAxis={[{ min: 0, max: 10 }]}
+        height={300}
+      >
+        <ChartsSurface>
+          <LinePlot />
+          <ChartsXAxis />
+          <ChartsYAxis />
+        </ChartsSurface>
+        <ExtremaLabels />
+      </ChartDataProvider>
+    </Box>
+  );
+}