Merge branch 'mui:master' into replace-has-selector

.circleci/config.yml

@@ -212,6 +212,12 @@ jobs:
       - run:
           name: '`pnpm l10n` changes committed?'
           command: git add -A && git diff --exit-code --staged
+      - run:
+          name: Sync RSC "use client" directives
+          command: pnpm rsc:build
+      - run:
+          name: '`pnpm rsc:build` changes committed?'
+          command: git add -A && git diff --exit-code --staged
       - run:
           name: '`pnpm docs:link-check` changes committed?'
           command: |

.github/workflows/codspeed.yml

@@ -45,7 +45,7 @@ jobs:
           cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies
       - run: pnpm install --frozen-lockfile
       # Ensure we are running on the prod version of our libs
-      # Only charts and license are needed for the benchmarks
+      - run: pnpm --filter @mui/x-internals build
       - run: pnpm --filter @mui/x-license build
       - run: pnpm --filter @mui/x-charts build
       - run: pnpm --filter @mui/x-charts-pro build

docs/data/charts/legend/LegendClickNoSnap.js

@@ -0,0 +1,148 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import UndoOutlinedIcon from '@mui/icons-material/UndoOutlined';
+
+import { ChartsLegend, PiecewiseColorLegend } from '@mui/x-charts/ChartsLegend';
+
+import { HighlightedCode } from '@mui/docs/HighlightedCode';
+import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer';
+
+const pieSeries = [
+  {
+    type: 'pie',
+    id: 'series-1',
+    label: 'Series 1',
+    data: [
+      { label: 'Pie A', id: 'P1-A', value: 400 },
+      { label: 'Pie B', id: 'P2-B', value: 300 },
+    ],
+  },
+];
+
+const barSeries = [
+  {
+    type: 'bar',
+    id: 'series-1',
+    label: 'Series 1',
+    data: [0, 1, 2],
+  },
+  {
+    type: 'bar',
+    id: 'series-2',
+    label: 'Series 2',
+    data: [0, 1, 2],
+  },
+];
+
+const lineSeries = [
+  {
+    type: 'line',
+    id: 'series-1',
+    label: 'Series 1',
+    data: [0, 1, 2],
+  },
+  {
+    type: 'line',
+    id: 'series-2',
+    label: 'Series 2',
+    data: [0, 1, 2],
+  },
+];
+
+export default function LegendClickNoSnap() {
+  const [itemData, setItemData] = React.useState();
+
+  return (
+    <Stack
+      direction={{ xs: 'column', md: 'row' }}
+      spacing={{ xs: 0, md: 4 }}
+      sx={{ width: '100%' }}
+    >
+      <Box sx={{ flexGrow: 1 }}>
+        <Typography>Chart Legend</Typography>
+        <ResponsiveChartContainer series={barSeries} width={400} height={60}>
+          <ChartsLegend
+            direction="row"
+            position={{
+              horizontal: 'left',
+              vertical: 'top',
+            }}
+            onItemClick={(event, context, index) => setItemData([context, index])}
+          />
+        </ResponsiveChartContainer>
+        <Typography>Pie Chart Legend</Typography>
+        <ResponsiveChartContainer series={pieSeries} width={400} height={60}>
+          <ChartsLegend
+            direction="row"
+            position={{
+              horizontal: 'left',
+              vertical: 'top',
+            }}
+            onItemClick={(event, context, index) => setItemData([context, index])}
+          />
+        </ResponsiveChartContainer>
+        <Typography>Pie Chart Legend</Typography>
+        <ResponsiveChartContainer
+          series={lineSeries}
+          width={400}
+          height={60}
+          xAxis={[
+            {
+              scaleType: 'linear',
+              data: [0, 1, 3],
+              disableLine: true,
+              colorMap: {
+                type: 'piecewise',
+                thresholds: [0, 2],
+                colors: ['blue', 'gray', 'red'],
+              },
+            },
+          ]}
+        >
+          <PiecewiseColorLegend
+            direction="row"
+            position={{
+              horizontal: 'left',
+              vertical: 'top',
+            }}
+            axisDirection="x"
+            onItemClick={(event, context, index) => setItemData([context, index])}
+          />
+        </ResponsiveChartContainer>
+      </Box>
+
+      <Stack direction="column" sx={{ width: { xs: '100%', md: '40%' } }}>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}
+        >
+          <Typography>Click on the chart</Typography>
+          <IconButton
+            aria-label="reset"
+            size="small"
+            onClick={() => {
+              setItemData(null);
+            }}
+          >
+            <UndoOutlinedIcon fontSize="small" />
+          </IconButton>
+        </Box>
+        <HighlightedCode
+          code={`// Index from item click: ${itemData ? itemData[1] : ''}
+
+// Context from item click
+${itemData ? JSON.stringify(itemData[0], null, 2) : '// The data will appear here'}
+`}
+          language="json"
+          copyButtonHidden
+        />
+      </Stack>
+    </Stack>
+  );
+}

docs/data/charts/legend/legend.md

@@ -111,3 +111,21 @@ labelFormatter = ({ min, max, formattedMin, formattedMax }) => string | null;
 ```
 
 {{"demo": "PiecewiseInteractiveDemoNoSnap.js", "hideToolbar": true, "bg": "playground"}}
+
+## Click event
+
+You can pass an `onItemClick` function to the `ChartsLegend` or `PiecewiseColorLegend` components to handle click events.
+They both provide the following signature.
+
+```js
+const clickHandler = (
+  event, // The click event.
+  context, // An object that identifies the clicked item.
+  index, // The index of the clicked item.
+) => {};
+```
+
+The `context` object contains different properties depending on the legend type.
+Click the legend items to see their content.
+
+{{"demo": "LegendClickNoSnap.js"}}

docs/data/data-grid/custom-columns/CustomColumnFullExample.js

@@ -0,0 +1,159 @@
+import * as React from 'react';
+import {
+  randomColor,
+  randomEmail,
+  randomInt,
+  randomName,
+  randomArrayItem,
+  random,
+} from '@mui/x-data-grid-generator';
+import { DataGrid, gridStringOrNumberComparator } from '@mui/x-data-grid';
+import { renderAvatar } from './cell-renderers/avatar';
+import { renderEmail } from './cell-renderers/email';
+import { renderEditRating, renderRating } from './cell-renderers/rating';
+import {
+  COUNTRY_ISO_OPTIONS,
+  renderCountry,
+  renderEditCountry,
+} from './cell-renderers/country';
+import { renderSparkline } from './cell-renderers/sparkline';
+import { renderEditProgress, renderProgress } from './cell-renderers/progress';
+import {
+  renderEditStatus,
+  renderStatus,
+  STATUS_OPTIONS,
+} from './cell-renderers/status';
+import {
+  INCOTERM_OPTIONS,
+  renderEditIncoterm,
+  renderIncoterm,
+} from './cell-renderers/incoterm';
+
+const columns = [
+  {
+    field: 'name',
+    headerName: 'Name',
+    width: 120,
+    editable: true,
+  },
+  {
+    field: 'avatar',
+    headerName: 'Avatar',
+    display: 'flex',
+    renderCell: renderAvatar,
+    valueGetter: (value, row) =>
+      row.name == null || row.avatar == null
+        ? null
+        : { name: row.name, color: row.avatar },
+    sortable: false,
+    filterable: false,
+  },
+  {
+    field: 'email',
+    headerName: 'Email',
+    renderCell: renderEmail,
+    width: 150,
+    editable: true,
+  },
+  {
+    field: 'rating',
+    headerName: 'Rating',
+    display: 'flex',
+    renderCell: renderRating,
+    renderEditCell: renderEditRating,
+    width: 180,
+    type: 'number',
+    editable: true,
+    availableAggregationFunctions: ['avg', 'min', 'max', 'size'],
+  },
+  {
+    field: 'country',
+    headerName: 'Country',
+    type: 'singleSelect',
+    valueOptions: COUNTRY_ISO_OPTIONS,
+    valueFormatter: (value) => value?.label,
+    renderCell: renderCountry,
+    renderEditCell: renderEditCountry,
+    sortComparator: (v1, v2, param1, param2) =>
+      gridStringOrNumberComparator(v1.label, v2.label, param1, param2),
+    width: 150,
+    editable: true,
+  },
+  {
+    field: 'salary',
+    headerName: 'Salary',
+    type: 'number',
+    valueFormatter: (value) => {
+      if (!value || typeof value !== 'number') {
+        return value;
+      }
+      return `$${value.toLocaleString()}`;
+    },
+    editable: true,
+  },
+  {
+    field: 'monthlyActivity',
+    headerName: 'Monthly activity',
+    type: 'custom',
+    resizable: false,
+    filterable: false,
+    sortable: false,
+    editable: false,
+    groupable: false,
+    display: 'flex',
+    renderCell: renderSparkline,
+    width: 150,
+    valueGetter: (value, row) => row.monthlyActivity,
+  },
+  {
+    field: 'budget',
+    headerName: 'Budget left',
+    renderCell: renderProgress,
+    renderEditCell: renderEditProgress,
+    availableAggregationFunctions: ['min', 'max', 'avg', 'size'],
+    type: 'number',
+    width: 120,
+    editable: true,
+  },
+  {
+    field: 'status',
+    headerName: 'Status',
+    renderCell: renderStatus,
+    renderEditCell: renderEditStatus,
+    type: 'singleSelect',
+    valueOptions: STATUS_OPTIONS,
+    width: 150,
+    editable: true,
+  },
+  {
+    field: 'incoTerm',
+    headerName: 'Incoterm',
+    renderCell: renderIncoterm,
+    renderEditCell: renderEditIncoterm,
+    type: 'singleSelect',
+    valueOptions: INCOTERM_OPTIONS,
+    editable: true,
+  },
+];
+
+const rows = Array.from({ length: 10 }, (_, index) => ({
+  id: index,
+  name: randomName({}, {}),
+  avatar: randomColor(),
+  email: randomEmail(),
+  rating: randomInt(1, 5),
+  country: randomArrayItem(COUNTRY_ISO_OPTIONS),
+  salary: randomInt(35000, 80000),
+  monthlyActivity: Array.from({ length: 30 }, () => randomInt(1, 25)),
+  budget: random(0, 1).toPrecision(),
+  status: randomArrayItem(STATUS_OPTIONS),
+  incoTerm: randomArrayItem(INCOTERM_OPTIONS),
+}));
+
+export default function CustomColumnFullExample() {
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGrid rows={rows} columns={columns} />
+    </div>
+  );
+}