From 3ba417695ca805afceaa26b8d4d4a314365d4418 Mon Sep 17 00:00:00 2001 From: Bernardo Belchior Date: Fri, 7 Feb 2025 16:30:01 +0100 Subject: [PATCH 1/6] [charts] Stabilize series hooks (`useSeries`, `usePieSeries`, etc.) (#16459) Signed-off-by: Bernardo Belchior Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> --- docs/data/charts/components/SeriesDemo.js | 104 +++++++++++++++ docs/data/charts/components/SeriesDemo.tsx | 119 ++++++++++++++++++ .../charts/components/SeriesDemo.tsx.preview | 16 +++ docs/data/charts/components/components.md | 10 ++ .../migration-charts-v7.md | 23 ++++ packages/x-charts-pro/src/hooks/index.ts | 2 +- packages/x-charts-pro/src/index.ts | 1 + packages/x-charts/src/hooks/index.ts | 10 +- packages/x-codemod/README.md | 23 ++++ .../v8.0.0/charts/preset-safe/actual.spec.tsx | 23 +++- .../charts/preset-safe/expected.spec.tsx | 23 +++- .../src/v8.0.0/charts/preset-safe/index.ts | 2 + .../actual-nested-imports.spec.tsx | 17 +++ .../actual-root-imports.spec.tsx | 18 +++ .../expected-nested-imports.spec.tsx | 17 +++ .../expected-root-imports.spec.tsx | 18 +++ .../rename-unstable-use-series/index.ts | 34 +++++ scripts/x-charts-pro.exports.json | 12 +- scripts/x-charts.exports.json | 10 +- 19 files changed, 460 insertions(+), 22 deletions(-) create mode 100644 docs/data/charts/components/SeriesDemo.js create mode 100644 docs/data/charts/components/SeriesDemo.tsx create mode 100644 docs/data/charts/components/SeriesDemo.tsx.preview create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-nested-imports.spec.tsx create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-root-imports.spec.tsx create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-nested-imports.spec.tsx create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-root-imports.spec.tsx create mode 100644 packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/index.ts diff --git a/docs/data/charts/components/SeriesDemo.js b/docs/data/charts/components/SeriesDemo.js new file mode 100644 index 0000000000000..6f5b1131867d7 --- /dev/null +++ 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 ( + + {lineSeries.seriesOrder.map((seriesId) => ( + + ))} + + ); +} + +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 ( + + + + + ); +} + +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 ( + + {y} + + ); +} + +export default function SeriesDemo() { + return ( + + + + + + + + + + + ); +} diff --git a/docs/data/charts/components/SeriesDemo.tsx b/docs/data/charts/components/SeriesDemo.tsx new file mode 100644 index 0000000000000..cf86ac858f23c --- /dev/null +++ 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 ( + + {lineSeries.seriesOrder.map((seriesId) => ( + + ))} + + ); +} + +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 ( + + + + + ); +} + +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 ( + + {y} + + ); +} + +export default function SeriesDemo() { + return ( + + + + + + + + + + + ); +} diff --git a/docs/data/charts/components/SeriesDemo.tsx.preview b/docs/data/charts/components/SeriesDemo.tsx.preview new file mode 100644 index 0000000000000..4efadfd3f8b6b --- /dev/null +++ b/docs/data/charts/components/SeriesDemo.tsx.preview @@ -0,0 +1,16 @@ + + + + + + + + \ No newline at end of file diff --git a/docs/data/charts/components/components.md b/docs/data/charts/components/components.md index c89a0ef699d0e..d8d6a54a7ed8e 100644 --- a/docs/data/charts/components/components.md +++ b/docs/data/charts/components/components.md @@ -77,6 +77,16 @@ By using `invert`, the value associated with the current mouse coordinate `y` ca {{"demo": "ScaleDemo.js"}} +### Series + +Series information is accessible through the `useSeries` hook for all series types, and `useXxxSeries` hook for a specific series type. +These hooks return the order of the series and their configuration, including data points, color, among others. + +You can leverage that information to create custom charts. +For example, you can use `useLineSeries` to obtain the series of a line chart and display an indicator of the minimum and maximum values of each series: + +{{"demo": "SeriesDemo.js"}} + ## HTML components With the introduction of the `ChartDataProvider` in v8, the chart data can be accessed from any component. diff --git a/docs/data/migration/migration-charts-v7/migration-charts-v7.md b/docs/data/migration/migration-charts-v7/migration-charts-v7.md index b069c22e28b04..21031cda96bb5 100644 --- a/docs/data/migration/migration-charts-v7/migration-charts-v7.md +++ b/docs/data/migration/migration-charts-v7/migration-charts-v7.md @@ -242,3 +242,26 @@ The `labelFontSize` and `tickFontSize` props have been removed in favor of the s + }} /> ``` + +## Stabilize `useSeries` and `useXxxSeries` hooks ✅ + +The `useSeries` hook family has been stabilized and renamed accordingly. + +```diff + import { +- unstable_useSeries, ++ useSeries, +- unstable_usePieSeries, ++ usePieSeries, +- unstable_useLineSeries, ++ useLineSeries, +- unstable_useBarSeries, ++ useBarSeries, +- unstable_useScatterSeries, ++ useScatterSeries, + } from '@mui/x-charts/hooks'; + import { +- unstable_useHeatmapSeries, ++ useHeatmapSeries, + } from '@mui/x-charts-pro/hooks'; +``` diff --git a/packages/x-charts-pro/src/hooks/index.ts b/packages/x-charts-pro/src/hooks/index.ts index a858444b9d94e..f9be207805602 100644 --- a/packages/x-charts-pro/src/hooks/index.ts +++ b/packages/x-charts-pro/src/hooks/index.ts @@ -1,2 +1,2 @@ -export { useHeatmapSeries as unstable_useHeatmapSeries } from './useSeries'; +export { useHeatmapSeries } from './useSeries'; export * from './zoom'; diff --git a/packages/x-charts-pro/src/index.ts b/packages/x-charts-pro/src/index.ts index bd7beb06bb18a..7750d3d5e87a2 100644 --- a/packages/x-charts-pro/src/index.ts +++ b/packages/x-charts-pro/src/index.ts @@ -28,6 +28,7 @@ export * from '@mui/x-charts/ChartDataProvider'; export * from '@mui/x-charts/ChartsLabel'; // Pro components +export * from './hooks'; export * from './Heatmap'; export * from './ChartContainerPro'; export * from './ChartDataProviderPro'; diff --git a/packages/x-charts/src/hooks/index.ts b/packages/x-charts/src/hooks/index.ts index 87ee20d63333e..8aec879341109 100644 --- a/packages/x-charts/src/hooks/index.ts +++ b/packages/x-charts/src/hooks/index.ts @@ -8,11 +8,11 @@ export * from './useSvgRef'; export * from './useItemHighlighted'; export * from './useItemHighlightedGetter'; export { - useSeries as unstable_useSeries, - usePieSeries as unstable_usePieSeries, - useLineSeries as unstable_useLineSeries, - useBarSeries as unstable_useBarSeries, - useScatterSeries as unstable_useScatterSeries, + useSeries, + usePieSeries, + useLineSeries, + useBarSeries, + useScatterSeries, } from './useSeries'; export * from './useLegend'; export { useChartGradientId, useChartGradientIdObjectBound } from './useChartGradientId'; diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index 435c40333c257..86f51c94bb243 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -256,6 +256,29 @@ Remove the `` and move the associated `onAxisClick` ``` +#### `rename-unstable-use-series` + +Remove `unstable_` prefix from `useSeries` and `use*Series` hooks, as they have now become stable. + +```diff + import { +- unstable_useSeries, ++ useSeries, +- unstable_usePieSeries, ++ usePieSeries, +- unstable_useLineSeries, ++ useLineSeries, +- unstable_useBarSeries, ++ useBarSeries, +- unstable_useScatterSeries, ++ useScatterSeries, + } from '@mui/x-charts/hooks'; + import { +- unstable_useHeatmapSeries, ++ useHeatmapSeries, + } from '@mui/x-charts-pro/hooks'; +``` + ### Data Grid codemods #### `preset-safe` for Data Grid v8.0.0 diff --git a/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx index b9f35c741ed74..ce78a33c8c29a 100644 --- a/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx +++ b/packages/x-codemod/src/v8.0.0/charts/preset-safe/actual.spec.tsx @@ -7,9 +7,25 @@ import { ResponsiveChartContainer } from '@mui/x-charts/ResponsiveChartContainer import { ChartsOnAxisClickHandler } from '@mui/x-charts/ChartsOnAxisClickHandler'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { LegendPosition } from '@mui/x-charts/ChartsLegend'; +import { + unstable_useSeries, + unstable_usePieSeries, + unstable_useLineSeries, + unstable_useBarSeries, + unstable_useScatterSeries, +} from '@mui/x-charts/hooks'; +import { unstable_useHeatmapSeries } from '@mui/x-charts-pro/hooks'; -// prettier-ignore -
+function App() { + const series = unstable_useSeries(); + const pieSeries = unstable_usePieSeries(); + const lineSeries = unstable_useLineSeries(); + const barSeries = unstable_useBarSeries(); + const scatterSeries = unstable_useScatterSeries(); + const heatmapSeries = unstable_useHeatmapSeries(); + + // prettier-ignore +
@@ -37,4 +53,5 @@ import { LegendPosition } from '@mui/x-charts/ChartsLegend'; -
; +
; +} diff --git a/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx index bda066b382603..828d9b7221bc9 100644 --- a/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx +++ b/packages/x-codemod/src/v8.0.0/charts/preset-safe/expected.spec.tsx @@ -6,9 +6,25 @@ import { LineChart } from '@mui/x-charts/LineChart'; import { ChartContainer } from '@mui/x-charts/ChartContainer'; import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis'; import { Position } from '@mui/x-charts/models'; +import { + useSeries, + usePieSeries, + useLineSeries, + useBarSeries, + useScatterSeries, +} from '@mui/x-charts/hooks'; +import { useHeatmapSeries } from '@mui/x-charts-pro/hooks'; -// prettier-ignore -
+function App() { + const series = useSeries(); + const pieSeries = usePieSeries(); + const lineSeries = useLineSeries(); + const barSeries = useBarSeries(); + const scatterSeries = useScatterSeries(); + const heatmapSeries = useHeatmapSeries(); + + // prettier-ignore +
-
; +
; +} diff --git a/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts b/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts index 983372b049004..ae25c0fc7e08f 100644 --- a/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts +++ b/packages/x-codemod/src/v8.0.0/charts/preset-safe/index.ts @@ -6,6 +6,7 @@ import transformLegendPositionValues from '../replace-legend-position-values'; import transformRemoveExperimentalMarkRendering from '../remove-experimental-mark-rendering'; import transformRenameLegendPositionType from '../rename-legend-position-type'; import transformReplaceAxisClickHandler from '../remove-on-axis-click-handler'; +import transformRenameUnstableUseSeries from '../rename-unstable-use-series'; import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; @@ -18,6 +19,7 @@ export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftA file.source = transformRemoveExperimentalMarkRendering(file, api, options); file.source = transformRenameLegendPositionType(file, api, options); file.source = transformReplaceAxisClickHandler(file, api, options); + file.source = transformRenameUnstableUseSeries(file, api, options); return file.source; } diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-nested-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-nested-imports.spec.tsx new file mode 100644 index 0000000000000..1c6862a2c4fdd --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-nested-imports.spec.tsx @@ -0,0 +1,17 @@ +import { + unstable_useSeries, + unstable_usePieSeries, + unstable_useLineSeries, + unstable_useBarSeries, + unstable_useScatterSeries, +} from '@mui/x-charts/hooks'; +import { unstable_useHeatmapSeries } from '@mui/x-charts-pro/hooks'; + +function useThings() { + const series = unstable_useSeries(); + const pieSeries = unstable_usePieSeries(); + const lineSeries = unstable_useLineSeries(); + const barSeries = unstable_useBarSeries(); + const scatterSeries = unstable_useScatterSeries(); + const heatmapSeries = unstable_useHeatmapSeries(); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-root-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-root-imports.spec.tsx new file mode 100644 index 0000000000000..7e4886f7e8e8e --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/actual-root-imports.spec.tsx @@ -0,0 +1,18 @@ +/* eslint-disable no-restricted-imports */ +import { + unstable_useSeries, + unstable_usePieSeries, + unstable_useLineSeries, + unstable_useBarSeries, + unstable_useScatterSeries, +} from '@mui/x-charts'; +import { unstable_useHeatmapSeries } from '@mui/x-charts-pro'; + +function useThings() { + const series = unstable_useSeries(); + const pieSeries = unstable_usePieSeries(); + const lineSeries = unstable_useLineSeries(); + const barSeries = unstable_useBarSeries(); + const scatterSeries = unstable_useScatterSeries(); + const heatmapSeries = unstable_useHeatmapSeries(); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-nested-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-nested-imports.spec.tsx new file mode 100644 index 0000000000000..6b05aee568246 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-nested-imports.spec.tsx @@ -0,0 +1,17 @@ +import { + useSeries, + usePieSeries, + useLineSeries, + useBarSeries, + useScatterSeries, +} from '@mui/x-charts/hooks'; +import { useHeatmapSeries } from '@mui/x-charts-pro/hooks'; + +function useThings() { + const series = useSeries(); + const pieSeries = usePieSeries(); + const lineSeries = useLineSeries(); + const barSeries = useBarSeries(); + const scatterSeries = useScatterSeries(); + const heatmapSeries = useHeatmapSeries(); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-root-imports.spec.tsx b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-root-imports.spec.tsx new file mode 100644 index 0000000000000..6a34b736dccf6 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/expected-root-imports.spec.tsx @@ -0,0 +1,18 @@ +/* eslint-disable no-restricted-imports */ +import { + useSeries, + usePieSeries, + useLineSeries, + useBarSeries, + useScatterSeries, +} from '@mui/x-charts'; +import { useHeatmapSeries } from '@mui/x-charts-pro'; + +function useThings() { + const series = useSeries(); + const pieSeries = usePieSeries(); + const lineSeries = useLineSeries(); + const barSeries = useBarSeries(); + const scatterSeries = useScatterSeries(); + const heatmapSeries = useHeatmapSeries(); +} diff --git a/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/index.ts b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/index.ts new file mode 100644 index 0000000000000..a39352370cefb --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/charts/rename-unstable-use-series/index.ts @@ -0,0 +1,34 @@ +import type { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; +import { renameImports } from '../../../util/renameImports'; + +export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { + const j = api.jscodeshift; + const root = j(file.source); + + const printOptions = options.printOptions || { + quote: 'single', + trailingComma: true, + wrapColumn: 40, + }; + + renameImports({ + j, + root, + packageNames: ['@mui/x-charts', '@mui/x-charts-pro'], + imports: [ + { + oldEndpoint: 'hooks', + importsMapping: { + unstable_useSeries: 'useSeries', + unstable_usePieSeries: 'usePieSeries', + unstable_useLineSeries: 'useLineSeries', + unstable_useBarSeries: 'useBarSeries', + unstable_useScatterSeries: 'useScatterSeries', + unstable_useHeatmapSeries: 'useHeatmapSeries', + }, + }, + ], + }); + + return root.toSource(printOptions); +} diff --git a/scripts/x-charts-pro.exports.json b/scripts/x-charts-pro.exports.json index 3da603cd4787a..a36aec8934fd1 100644 --- a/scripts/x-charts-pro.exports.json +++ b/scripts/x-charts-pro.exports.json @@ -309,24 +309,26 @@ { "name": "StackableSeriesType", "kind": "TypeAlias" }, { "name": "StackOffsetType", "kind": "TypeAlias" }, { "name": "StackOrderType", "kind": "TypeAlias" }, - { "name": "unstable_useBarSeries", "kind": "Function" }, - { "name": "unstable_useLineSeries", "kind": "Function" }, - { "name": "unstable_usePieSeries", "kind": "Function" }, - { "name": "unstable_useScatterSeries", "kind": "Function" }, - { "name": "unstable_useSeries", "kind": "Function" }, { "name": "useAxisTooltip", "kind": "Function" }, { "name": "UseAxisTooltipReturnValue", "kind": "Interface" }, + { "name": "useBarSeries", "kind": "Function" }, { "name": "useChartGradientId", "kind": "Function" }, { "name": "useChartGradientIdObjectBound", "kind": "Function" }, { "name": "useChartId", "kind": "Function" }, { "name": "useDrawingArea", "kind": "Function" }, { "name": "useGaugeState", "kind": "Function" }, + { "name": "useHeatmapSeries", "kind": "Function" }, + { "name": "useIsZoomInteracting", "kind": "Function" }, { "name": "useItemHighlighted", "kind": "Function" }, { "name": "useItemHighlightedGetter", "kind": "Function" }, { "name": "useItemTooltip", "kind": "Function" }, { "name": "UseItemTooltipReturnValue", "kind": "TypeAlias" }, { "name": "useLegend", "kind": "Function" }, + { "name": "useLineSeries", "kind": "Function" }, { "name": "useMouseTracker", "kind": "Function" }, + { "name": "usePieSeries", "kind": "Function" }, + { "name": "useScatterSeries", "kind": "Function" }, + { "name": "useSeries", "kind": "Function" }, { "name": "useSvgRef", "kind": "Function" }, { "name": "useXAxes", "kind": "Function" }, { "name": "useXAxis", "kind": "Function" }, diff --git a/scripts/x-charts.exports.json b/scripts/x-charts.exports.json index 098f1810b895d..d7a2b47a83731 100644 --- a/scripts/x-charts.exports.json +++ b/scripts/x-charts.exports.json @@ -293,13 +293,9 @@ { "name": "StackableSeriesType", "kind": "TypeAlias" }, { "name": "StackOffsetType", "kind": "TypeAlias" }, { "name": "StackOrderType", "kind": "TypeAlias" }, - { "name": "unstable_useBarSeries", "kind": "Function" }, - { "name": "unstable_useLineSeries", "kind": "Function" }, - { "name": "unstable_usePieSeries", "kind": "Function" }, - { "name": "unstable_useScatterSeries", "kind": "Function" }, - { "name": "unstable_useSeries", "kind": "Function" }, { "name": "useAxisTooltip", "kind": "Function" }, { "name": "UseAxisTooltipReturnValue", "kind": "Interface" }, + { "name": "useBarSeries", "kind": "Function" }, { "name": "useChartGradientId", "kind": "Function" }, { "name": "useChartGradientIdObjectBound", "kind": "Function" }, { "name": "useChartId", "kind": "Function" }, @@ -310,7 +306,11 @@ { "name": "useItemTooltip", "kind": "Function" }, { "name": "UseItemTooltipReturnValue", "kind": "TypeAlias" }, { "name": "useLegend", "kind": "Function" }, + { "name": "useLineSeries", "kind": "Function" }, { "name": "useMouseTracker", "kind": "Function" }, + { "name": "usePieSeries", "kind": "Function" }, + { "name": "useScatterSeries", "kind": "Function" }, + { "name": "useSeries", "kind": "Function" }, { "name": "useSvgRef", "kind": "Function" }, { "name": "useXAxes", "kind": "Function" }, { "name": "useXAxis", "kind": "Function" }, From ff2947dcf1e5cf2ea7430324b868682f36e9e282 Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Date: Fri, 7 Feb 2025 17:26:16 +0100 Subject: [PATCH 2/6] [charts] Fix zoom filter regression (#16507) Co-authored-by: Jose C Quintas Jr --- .../useChartProZoom.selectors.ts | 18 +------ .../useChartProZoom/useChartProZoom.ts | 18 +++---- .../useChartProZoom/useChartProZoom.types.ts | 9 +--- .../plugins/useChartProZoom/zoom.types.ts | 53 ------------------- .../x-charts-pro/src/typeOverloads/modules.ts | 7 +-- .../useChartCartesianAxis}/creatZoomLookup.ts | 8 +-- .../useChartCartesianAxis}/defaultizeZoom.ts | 4 +- .../useChartCartesianAxis/index.ts | 1 + .../useChartCartesianAxis.selectors.ts | 12 +++-- .../useChartCartesianAxis/zoom.types.ts | 52 +++++++++++++++++- 10 files changed, 80 insertions(+), 102 deletions(-) delete mode 100644 packages/x-charts-pro/src/internals/plugins/useChartProZoom/zoom.types.ts rename packages/{x-charts-pro/src/internals/plugins/useChartProZoom => x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis}/creatZoomLookup.ts (73%) rename packages/{x-charts-pro/src/internals/plugins/useChartProZoom => x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis}/defaultizeZoom.ts (77%) diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts index a12c8134cba3f..0a8a7df477bd9 100644 --- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts +++ b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.selectors.ts @@ -1,29 +1,13 @@ import { ChartRootSelector, createSelector, - selectorChartRawXAxis, - selectorChartRawYAxis, + selectorChartZoomOptionsLookup, } from '@mui/x-charts/internals'; import { UseChartProZoomSignature } from './useChartProZoom.types'; -import { creatZoomLookup } from './creatZoomLookup'; export const selectorChartZoomState: ChartRootSelector = (state) => state.zoom; -const selectorChartXZoomOptionsLookup = createSelector(selectorChartRawXAxis, creatZoomLookup('x')); - -const selectorChartYZoomOptionsLookup = createSelector(selectorChartRawYAxis, creatZoomLookup('y')); - -export const selectorChartZoomOptionsLookup = createSelector( - [selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup], - (xLookup, yLookup) => ({ ...xLookup, ...yLookup }), -); - -export const selectorChartZoomData = createSelector( - selectorChartZoomState, - (zoom) => zoom.zoomData, -); - export const selectorChartZoomIsInteracting = createSelector( selectorChartZoomState, (zoom) => zoom.isInteracting, diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts index 2181339e01054..d9d63cd2fbdfd 100644 --- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts +++ b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.ts @@ -8,9 +8,10 @@ import { getSVGPoint, selectorChartDrawingArea, ZoomData, + creatZoomLookup, + selectorChartZoomOptionsLookup, } from '@mui/x-charts/internals'; import { UseChartProZoomSignature } from './useChartProZoom.types'; -import { creatZoomLookup } from './creatZoomLookup'; import { getDiff, getHorizontalCenterRatio, @@ -21,7 +22,6 @@ import { preventDefault, zoomAtPoint, } from './useChartProZoom.utils'; -import { selectorChartZoomOptionsLookup } from './useChartProZoom.selectors'; // It is helpful to avoid the need to provide the possibly auto-generated id for each axis. function initializeZoomData(options: Record) { @@ -372,24 +372,20 @@ useChartProZoom.params = { }; useChartProZoom.getDefaultizedParams = ({ params }) => { - const optionsLookup = { - ...creatZoomLookup('x')(params.defaultizedXAxis), - ...creatZoomLookup('y')(params.defaultizedYAxis), - }; - return { ...params, - optionsLookup, }; }; useChartProZoom.getInitialState = (params) => { + const optionsLookup = { + ...creatZoomLookup('x')(params.defaultizedXAxis), + ...creatZoomLookup('y')(params.defaultizedYAxis), + }; return { zoom: { zoomData: - params.initialZoom === undefined - ? initializeZoomData(params.optionsLookup) - : params.initialZoom, + params.initialZoom === undefined ? initializeZoomData(optionsLookup) : params.initialZoom, isInteracting: false, }, }; diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.types.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.types.ts index 6eb4fec5f6b7f..ef1146f6b2d70 100644 --- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.types.ts +++ b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/useChartProZoom.types.ts @@ -1,8 +1,6 @@ import { - AxisId, UseChartSeriesSignature, ChartPluginSignature, - DefaultizedZoomOptions, UseChartCartesianAxisSignature, UseChartCartesianAxisDefaultizedParameters, ZoomData, @@ -22,12 +20,7 @@ export interface UseChartProZoomParameters { } export type UseChartProZoomDefaultizedParameters = UseChartProZoomParameters & - UseChartCartesianAxisDefaultizedParameters & { - /** - * The zoom options for each axis. - */ - optionsLookup: Record; - }; + UseChartCartesianAxisDefaultizedParameters; export interface UseChartProZoomState { zoom: { diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/zoom.types.ts b/packages/x-charts-pro/src/internals/plugins/useChartProZoom/zoom.types.ts deleted file mode 100644 index 65f9970232f2d..0000000000000 --- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/zoom.types.ts +++ /dev/null @@ -1,53 +0,0 @@ -export interface ZoomOptions { - /** - * The starting percentage of the zoom range. In the range of 0 to 100. - * - * @default 0 - */ - minStart?: number; - /** - * The ending percentage of the zoom range. In the range of 0 to 100. - * - * @default 100 - */ - maxEnd?: number; - /** - * The step size of the zooming function. Defines the granularity of the zoom. - * - * @default 5 - */ - step?: number; - /** - * Restricts the minimum span size in the range of 0 to 100. - * - * If the span size is smaller than the minSpan, the span will be resized to the minSpan. - * - * @default 10 - */ - minSpan?: number; - /** - * Restricts the maximum span size in the range of 0 to 100. - * - * If the span size is larger than the maxSpan, the span will be resized to the maxSpan. - * - * @default 100 - */ - maxSpan?: number; - /** - * Set to `false` to disable panning. Useful when you want to pan programmatically, - * or to show only a specific section of the chart. - * - * @default true - */ - panning?: boolean; - /** - * Defines how to filter the axis data when it is outside of the zoomed range of this axis. - * - * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same. - * - `discard`: The data outside the zoomed range is discarded for the other axes. - * The other axes will be adjusted to fit the zoomed range. - * - * @default 'keep' - */ - filterMode?: 'discard' | 'keep'; -} diff --git a/packages/x-charts-pro/src/typeOverloads/modules.ts b/packages/x-charts-pro/src/typeOverloads/modules.ts index 7fff71f5e95f9..3ff1b0682b654 100644 --- a/packages/x-charts-pro/src/typeOverloads/modules.ts +++ b/packages/x-charts-pro/src/typeOverloads/modules.ts @@ -1,12 +1,11 @@ import { DefaultizedProps } from '@mui/x-internals/types'; -import { AxisId } from '@mui/x-charts/internals'; +import { AxisId, ZoomOptions } from '@mui/x-charts/internals'; import { HeatmapItemIdentifier, HeatmapSeriesType, DefaultizedHeatmapSeriesType, HeatmapValueType, } from '../models/seriesType/heatmap'; -import { ZoomOptions as ZoomOptionsPro } from '../internals/plugins/useChartProZoom/zoom.types'; declare module '@mui/x-charts/internals' { interface ChartsSeriesConfig { @@ -20,9 +19,7 @@ declare module '@mui/x-charts/internals' { }; } - interface ZoomOptions extends ZoomOptionsPro {} - - interface DefaultizedZoomOptions extends Required { + interface DefaultizedZoomOptions extends Required { axisId: AxisId; axisDirection: 'x' | 'y'; } diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/creatZoomLookup.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/creatZoomLookup.ts similarity index 73% rename from packages/x-charts-pro/src/internals/plugins/useChartProZoom/creatZoomLookup.ts rename to packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/creatZoomLookup.ts index 18030d64b7229..9501c1e397ad1 100644 --- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/creatZoomLookup.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/creatZoomLookup.ts @@ -1,11 +1,13 @@ -import { AxisId, DefaultizedZoomOptions } from '@mui/x-charts/internals'; -import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '@mui/x-charts/models'; +import { AxisConfig, ChartsXAxisProps, ChartsYAxisProps, ScaleName } from '../../../../models'; +import { AxisId } from '../../../../models/axis'; import { defaultizeZoom } from './defaultizeZoom'; +import { DefaultizedZoomOptions } from './useChartCartesianAxis.types'; export const creatZoomLookup = (axisDirection: 'x' | 'y') => - (axes: AxisConfig[]) => + (axes: AxisConfig[] = []) => axes.reduce>((acc, v) => { + // @ts-ignore const { zoom, id: axisId } = v; const defaultizedZoom = defaultizeZoom(zoom, axisId, axisDirection); if (defaultizedZoom) { diff --git a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/defaultizeZoom.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.ts similarity index 77% rename from packages/x-charts-pro/src/internals/plugins/useChartProZoom/defaultizeZoom.ts rename to packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.ts index 6424d21c3d4c6..945201f0001a7 100644 --- a/packages/x-charts-pro/src/internals/plugins/useChartProZoom/defaultizeZoom.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/defaultizeZoom.ts @@ -1,4 +1,6 @@ -import { AxisId, DefaultizedZoomOptions, ZoomOptions } from '@mui/x-charts/internals'; +import { AxisId } from '../../../../models/axis'; +import { DefaultizedZoomOptions } from './useChartCartesianAxis.types'; +import { ZoomOptions } from './zoom.types'; const defaultZoomOptions: Required = { minStart: 0, diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts index 679c01b919737..ddd9c10a11b63 100644 --- a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/index.ts @@ -3,4 +3,5 @@ export type * from './useChartCartesianAxis.types'; export * from './useChartCartesianAxis.selectors'; export { defaultizeAxis } from './defaultizeAxis'; export * from './computeAxisValue'; +export * from './creatZoomLookup'; export * from './zoom.types'; diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.ts index 29680e8361ac3..fa2564ffd9465 100644 --- a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.selectors.ts @@ -10,6 +10,7 @@ import { UseChartCartesianAxisSignature } from './useChartCartesianAxis.types'; import { ChartState } from '../../models/chart'; import { createAxisFilterMapper, createGetAxisFilters } from './createAxisFilterMapper'; import { ZoomAxisFilters, ZoomData } from './zoom.types'; +import { creatZoomLookup } from './creatZoomLookup'; export const createZoomMap = (zoom: ZoomData[]) => { const zoomItemMap = new Map(); @@ -44,7 +45,14 @@ const selectorChartZoomMap = createSelector( (zoom) => zoom?.zoomData && createZoomMap(zoom?.zoomData), ); -const selectorChartZoomOptionsLookup = createSelector(selectorChartZoomState, () => undefined); +const selectorChartXZoomOptionsLookup = createSelector(selectorChartRawXAxis, creatZoomLookup('x')); + +const selectorChartYZoomOptionsLookup = createSelector(selectorChartRawYAxis, creatZoomLookup('y')); + +export const selectorChartZoomOptionsLookup = createSelector( + [selectorChartXZoomOptionsLookup, selectorChartYZoomOptionsLookup], + (xLookup, yLookup) => ({ ...xLookup, ...yLookup }), +); const selectorChartXFilter = createSelector( [ @@ -93,7 +101,6 @@ const selectorChartZoomAxisFilters = createSelector( } const xFilters = xAxis.reduce((acc, axis, index) => { - // @ts-expect-error The type is defined in the pro package const filter = xMapper(axis, index); if (filter !== null) { acc[axis.id] = filter; @@ -102,7 +109,6 @@ const selectorChartZoomAxisFilters = createSelector( }, {}); const yFilters = yAxis.reduce((acc, axis, index) => { - // @ts-expect-error The type is defined in the pro package const filter = yMapper(axis, index); if (filter !== null) { acc[axis.id] = filter; diff --git a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts index 6d88ab9bc4ce1..674086c2d3a1e 100644 --- a/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts +++ b/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/zoom.types.ts @@ -7,7 +7,57 @@ export type ZoomData = { axisId: AxisId; start: number; end: number }; export type ZoomFilterMode = 'keep' | 'discard'; export interface ZoomOptions { - filterMode?: ZoomFilterMode; + /** + * The starting percentage of the zoom range. In the range of 0 to 100. + * + * @default 0 + */ + minStart?: number; + /** + * The ending percentage of the zoom range. In the range of 0 to 100. + * + * @default 100 + */ + maxEnd?: number; + /** + * The step size of the zooming function. Defines the granularity of the zoom. + * + * @default 5 + */ + step?: number; + /** + * Restricts the minimum span size in the range of 0 to 100. + * + * If the span size is smaller than the minSpan, the span will be resized to the minSpan. + * + * @default 10 + */ + minSpan?: number; + /** + * Restricts the maximum span size in the range of 0 to 100. + * + * If the span size is larger than the maxSpan, the span will be resized to the maxSpan. + * + * @default 100 + */ + maxSpan?: number; + /** + * Set to `false` to disable panning. Useful when you want to pan programmatically, + * or to show only a specific section of the chart. + * + * @default true + */ + panning?: boolean; + /** + * Defines how to filter the axis data when it is outside of the zoomed range of this axis. + * + * - `keep`: The data outside the zoomed range is kept. And the other axes will stay the same. + * - `discard`: The data outside the zoomed range is discarded for the other axes. + * The other axes will be adjusted to fit the zoomed range. + * + * @default 'keep' + */ + filterMode?: 'discard' | 'keep'; } export type ZoomAxisFilters = Record; From 587f7c5757e0d66222ea1f3d37c923a0814e9d86 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+mapache-salvaje@users.noreply.github.com> Date: Fri, 7 Feb 2025 09:11:31 -0800 Subject: [PATCH 3/6] [docs] Standardize getting started docs across all packages (#16302) Signed-off-by: Sam Sycamore <71297412+mapache-salvaje@users.noreply.github.com> Co-authored-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com> Co-authored-by: Lukas Tyla --- README.md | 8 +- docs/.link-check-errors.txt | 7 + docs/data/charts/overview/overview.md | 15 +- .../Combining.js | 0 .../Combining.tsx | 0 .../SimpleCharts.js | 0 .../SimpleCharts.tsx | 0 .../SimpleCharts.tsx.preview | 0 .../quickstart.md} | 48 +++-- .../custom-components/custom-components.md | 2 +- .../custom-columns/custom-columns.md | 2 +- .../{demo => features}/FullFeaturedDemo.js | 0 .../{demo => features}/FullFeaturedDemo.tsx | 0 .../{demo => features}/PopularFeaturesDemo.js | 0 .../PopularFeaturesDemo.tsx | 0 .../{demo/demo.md => features/features.md} | 0 docs/data/data-grid/overview/overview.md | 17 +- .../Codesandbox.js | 0 .../quickstart.md} | 46 +++-- .../base-concepts/base-concepts.md | 65 ------- .../date-pickers/date-picker/date-picker.md | 9 + docs/data/date-pickers/faq/faq.md | 32 ---- .../getting-started/getting-started.md | 102 ---------- .../FirstComponent.js | 0 .../FirstComponent.tsx | 0 .../FirstComponent.tsx.preview | 0 .../MaterialUIPickers.tsx.preview | 0 .../date-pickers/quickstart/quickstart.md | 180 ++++++++++++++++++ docs/data/introduction/support/support.md | 10 +- .../migration-pickers-lab.md | 2 +- .../migration-pickers-v5.md | 2 +- .../migration-pickers-v6.md | 2 +- docs/data/pages.ts | 11 +- .../getting-started/getting-started.md | 108 ----------- .../overview/TreeViewOverviewDemo.js | 30 +++ .../overview/TreeViewOverviewDemo.tsx | 30 +++ docs/data/tree-view/overview/overview.md | 40 ++-- .../tree-view/quickstart/BasicRichTreeView.js | 48 +++++ .../quickstart/BasicRichTreeView.tsx | 48 +++++ .../quickstart/BasicRichTreeView.tsx.preview | 1 + .../quickstart/BasicSimpleTreeView.js | 30 +++ .../quickstart/BasicSimpleTreeView.tsx | 30 +++ .../FirstComponent.js | 0 .../FirstComponent.tsx | 0 docs/data/tree-view/quickstart/quickstart.md | 122 ++++++++++++ .../pages/x/api/tree-view/rich-tree-view.json | 2 +- .../x/api/tree-view/simple-tree-view.json | 2 +- docs/pages/x/api/tree-view/tree-item.json | 2 +- .../{getting-started.js => quickstart.js} | 2 +- .../react-data-grid/{demo.js => features.js} | 2 +- .../{getting-started.js => quickstart.js} | 2 +- .../{getting-started.js => quickstart.js} | 2 +- .../x/react-tree-view/getting-started.js | 7 - .../faq.js => react-tree-view/quickstart.js} | 2 +- docs/public/_redirects | 6 + docsTech/README.md | 4 +- .../src/DataGridPremium/DataGridPremium.tsx | 4 +- .../src/DataGridPro/DataGridPro.tsx | 4 +- .../x-data-grid/src/DataGrid/DataGrid.tsx | 4 +- test/e2e-website/data-grid.spec.ts | 10 +- 60 files changed, 677 insertions(+), 425 deletions(-) rename docs/data/charts/{getting-started => quickstart}/Combining.js (100%) rename docs/data/charts/{getting-started => quickstart}/Combining.tsx (100%) rename docs/data/charts/{getting-started => quickstart}/SimpleCharts.js (100%) rename docs/data/charts/{getting-started => quickstart}/SimpleCharts.tsx (100%) rename docs/data/charts/{getting-started => quickstart}/SimpleCharts.tsx.preview (100%) rename docs/data/charts/{getting-started/getting-started.md => quickstart/quickstart.md} (74%) rename docs/data/data-grid/{demo => features}/FullFeaturedDemo.js (100%) rename docs/data/data-grid/{demo => features}/FullFeaturedDemo.tsx (100%) rename docs/data/data-grid/{demo => features}/PopularFeaturesDemo.js (100%) rename docs/data/data-grid/{demo => features}/PopularFeaturesDemo.tsx (100%) rename docs/data/data-grid/{demo/demo.md => features/features.md} (100%) rename docs/data/data-grid/{getting-started => quickstart}/Codesandbox.js (100%) rename docs/data/data-grid/{getting-started/getting-started.md => quickstart/quickstart.md} (81%) delete mode 100644 docs/data/date-pickers/faq/faq.md delete mode 100644 docs/data/date-pickers/getting-started/getting-started.md rename docs/data/date-pickers/{getting-started => quickstart}/FirstComponent.js (100%) rename docs/data/date-pickers/{getting-started => quickstart}/FirstComponent.tsx (100%) rename docs/data/date-pickers/{getting-started => quickstart}/FirstComponent.tsx.preview (100%) rename docs/data/date-pickers/{getting-started => quickstart}/MaterialUIPickers.tsx.preview (100%) create mode 100644 docs/data/date-pickers/quickstart/quickstart.md delete mode 100644 docs/data/tree-view/getting-started/getting-started.md create mode 100644 docs/data/tree-view/overview/TreeViewOverviewDemo.js create mode 100644 docs/data/tree-view/overview/TreeViewOverviewDemo.tsx create mode 100644 docs/data/tree-view/quickstart/BasicRichTreeView.js create mode 100644 docs/data/tree-view/quickstart/BasicRichTreeView.tsx create mode 100644 docs/data/tree-view/quickstart/BasicRichTreeView.tsx.preview create mode 100644 docs/data/tree-view/quickstart/BasicSimpleTreeView.js create mode 100644 docs/data/tree-view/quickstart/BasicSimpleTreeView.tsx rename docs/data/tree-view/{getting-started => quickstart}/FirstComponent.js (100%) rename docs/data/tree-view/{getting-started => quickstart}/FirstComponent.tsx (100%) create mode 100644 docs/data/tree-view/quickstart/quickstart.md rename docs/pages/x/react-charts/{getting-started.js => quickstart.js} (66%) rename docs/pages/x/react-data-grid/{demo.js => features.js} (70%) rename docs/pages/x/react-data-grid/{getting-started.js => quickstart.js} (65%) rename docs/pages/x/react-date-pickers/{getting-started.js => quickstart.js} (65%) delete mode 100644 docs/pages/x/react-tree-view/getting-started.js rename docs/pages/x/{react-date-pickers/faq.js => react-tree-view/quickstart.js} (67%) diff --git a/README.md b/README.md index b2e30d211bdc1..9e9cb4af10212 100644 --- 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 index e5600de0a9a07..cfa8310011477 100644 --- 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/overview/overview.md b/docs/data/charts/overview/overview.md index 92f1d289714df..876a2d3dcfeca 100644 --- a/docs/data/charts/overview/overview.md +++ b/docs/data/charts/overview/overview.md @@ -17,20 +17,19 @@ MUI X Charts is a library of production-ready components for rendering charts w It uses [D3.js](https://d3js.org/) for data manipulation and SVGs for rendering. The components provide a high level of customization, with beautiful defaults as well as extensive configuration props and flexible composition options. -They also have access to all [MUI System](https://mui.com/system/getting-started/) tools such as theme overrides and the `sx` prop. +Theming features are designed to be frictionless when integrating with Material UI and other MUI X components, but they can also stand on their own and be customized to meet the needs of any design system. + +The Charts package is **open-core**: The Community version is MIT-licensed and free forever, while more advanced features require a Pro commercial license. +See [MUI X Licensing](/x/introduction/licensing/) for complete details. {{"demo": "ChartsOverviewDemo.js", "defaultCodeOpen": true}} ## All MUI X Charts -{{"component": "modules/components/ChartComponentsGrid.js"}} - -## Using this documentation +The MIT-licensed Community version of the Charts package covers the most common use cases for data visualization. +The Pro plan, denoted by the blue cube icon () throughout the documentation, expands on the Community version to support more complex visualizations. -Each Chart type has two accompanying documents: - -1. **Overview** – a general description of built-in features -2. **Demo** – a collection of custom examples +{{"component": "modules/components/ChartComponentsGrid.js"}} ## Supported features diff --git a/docs/data/charts/getting-started/Combining.js b/docs/data/charts/quickstart/Combining.js similarity index 100% rename from docs/data/charts/getting-started/Combining.js rename to docs/data/charts/quickstart/Combining.js diff --git a/docs/data/charts/getting-started/Combining.tsx b/docs/data/charts/quickstart/Combining.tsx similarity index 100% rename from docs/data/charts/getting-started/Combining.tsx rename to docs/data/charts/quickstart/Combining.tsx diff --git a/docs/data/charts/getting-started/SimpleCharts.js b/docs/data/charts/quickstart/SimpleCharts.js similarity index 100% rename from docs/data/charts/getting-started/SimpleCharts.js rename to docs/data/charts/quickstart/SimpleCharts.js diff --git a/docs/data/charts/getting-started/SimpleCharts.tsx b/docs/data/charts/quickstart/SimpleCharts.tsx similarity index 100% rename from docs/data/charts/getting-started/SimpleCharts.tsx rename to docs/data/charts/quickstart/SimpleCharts.tsx diff --git a/docs/data/charts/getting-started/SimpleCharts.tsx.preview b/docs/data/charts/quickstart/SimpleCharts.tsx.preview similarity index 100% rename from docs/data/charts/getting-started/SimpleCharts.tsx.preview rename to docs/data/charts/quickstart/SimpleCharts.tsx.preview diff --git a/docs/data/charts/getting-started/getting-started.md b/docs/data/charts/quickstart/quickstart.md similarity index 74% rename from docs/data/charts/getting-started/getting-started.md rename to docs/data/charts/quickstart/quickstart.md index 64eddde9f28f1..96648b5ee95b1 100644 --- a/docs/data/charts/getting-started/getting-started.md +++ b/docs/data/charts/quickstart/quickstart.md @@ -4,20 +4,24 @@ githubLabel: 'component: charts' packageName: '@mui/x-charts' --- -# Charts - Getting started +# Charts - Quickstart

Install the MUI X Charts package to start building React data visualization components.

## Installation -Run one of the following commands to install the free Community version or the paid Pro version of the MUI X Charts: +Install the Charts package that best suits your needs—Community or Pro: {{"component": "modules/components/ChartsInstallationInstructions.js"}} +### Peer dependencies + +#### Material UI + The Charts packages have a peer dependency on `@mui/material`. -If you're not already using it, install it with the following command: +If you're not already using it, install it now: @@ -35,6 +39,8 @@ yarn add @mui/material @emotion/react @emotion/styled +#### React + [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies: @@ -48,16 +54,21 @@ yarn add @mui/material @emotion/react @emotion/styled ### Usage with D3 -To help folks using CommonJS, the `@mui/x-charts` package uses a vendored package named `@mui/x-charts-vendor` to access D3 libraries. +For those using CommonJS, the MUI X Charts provide a vendored package to access D3 libraries. You can import D3 functions from `@mui/x-charts-vendor/d3-scale`. ## Rendering Charts MUI X Charts can be rendered as _self-contained_ or _composable_ components. -[Self-contained components](#self-contained-charts) are simpler to get started with and are recommended for most common use cases; more complex visualization (such as combining Bar and Line Charts on a single plot) requires [custom composition](#composable-charts). +[Self-contained components](#self-contained-charts) are simpler to get started with and are recommended for most common use cases. +More complex visualization (such as combining Bar and Line Charts on a single plot) requires [custom composition](#composable-charts). ### Self-contained Charts +```tsx +import { BarChart } from '@mui/x-charts/BarChart'; +``` + Self-contained Chart components are imported and rendered as a single React component (such as `` or ``) which contains all of the necessary subcomponents. These components require a `series` prop describing the data to render, as well as a numerical value (rendered in pixels) for the `height` prop. @@ -72,8 +83,8 @@ Subcomponents include: - Axis components – to define the X and Y axes - Plot components – to create Bars, Lines, or any other Chart type -- Auxillary components - to add Tooltips, Highlights, and more -- Utilities - such as classes and types +- Auxiliary components – to add Tooltips, Highlights, and more +- Utilities – such as classes and types See the [Charts composition documentation](/x/react-charts/composition/) for complete details. @@ -81,42 +92,39 @@ The demo below shows how to use composition to create a custom Chart that combin {{"demo": "Combining.js"}} -## Chart layouts +### Chart layouts The layout of a Chart is defined by two main spaces: the plot area, and the outer margins. The `width` and `height` props define the dimensions of the SVG which is the root of the chart. -Within this SVG, the plot area (or drawing area) serves as the canvas for data visualization, where the lines, bars or other visual elements are rendered. +Within this SVG, the plot area (or drawing area) serves as the canvas for data visualization, where the lines, bars, or other visual elements are rendered. The size of the plot area is determined by the `margin = {top, bottom, left, right}` object which defines its outer margins inside the SVG. The outer margin space is where information like axes, titles, and legends are displayed. See the [Styling documentation](/x/react-charts/styling/#placement) for complete details. -## Server-side rendering - -The chart support server-side rendering under two conditions: +### Server-side rendering -1. The `width` and `height` props needs to be provided. -2. The animation should be disabled with the `skipAnimation` prop. +Charts support server-side rendering under two conditions: -The reason is that it is not possible to compute the SVG dimensions on the server, and the `skipAnimation` ensures that the animation is not in an "empty" state when first rendering. +1. `width` and `height` props must be provided – it's not possible to compute the SVG dimensions on the server. +2. Animations must be disabled with the `skipAnimation` prop – otherwise the animation will be in an empty state on first render. -## Axis management +### Axis management MUI X Charts take a flexible approach to axis management, with support for multiple axes and any combination of scales and ranges. - See the [Axis documentation](/x/react-charts/axis/) for complete details. ## TypeScript +### Theme augmentation + To benefit from [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users must import the following types. These types use module augmentation to extend the default theme structure. ```tsx -// only one import is necessary, -// from the version you're currently using. +// Pro users: add `-pro` suffix to package name import type {} from '@mui/x-charts/themeAugmentation'; -import type {} from '@mui/x-charts-pro/themeAugmentation'; const theme = createTheme({ components: { diff --git a/docs/data/common-concepts/custom-components/custom-components.md b/docs/data/common-concepts/custom-components/custom-components.md index e5605eb8ddc9d..878371aa51f38 100644 --- a/docs/data/common-concepts/custom-components/custom-components.md +++ b/docs/data/common-concepts/custom-components/custom-components.md @@ -8,7 +8,7 @@ A slot is a part of a component that can be [overridden](/x/common-concepts/cust Some of those slots allow you to provide your own UI primitives to the MUI X components. This is the role of all the `baseXXX` component on the Data Grid component (`baseButton`, `baseSelect`, ...). -These slots receive props that should be as generic as possible so that it is easy to interface any other design system. +These slots receive props that should be as generic as possible so they can integrate well with any other design system. Other slots allow you to override parts of the MUI X UI components with a custom UI built specifically for this component. This is the role of slots like `calendarHeader` on the `DateCalendar` component or `item` on the Rich Tree View component. diff --git a/docs/data/data-grid/custom-columns/custom-columns.md b/docs/data/data-grid/custom-columns/custom-columns.md index dd050b264956a..bc5fa95955500 100644 --- a/docs/data/data-grid/custom-columns/custom-columns.md +++ b/docs/data/data-grid/custom-columns/custom-columns.md @@ -33,7 +33,7 @@ In the demo below, we create a custom column type using the `GridColTypeDef` int By default, the Data Grid uses native browser inputs for editing `date` and `dateTime` columns. -While [MUI X Date / Time Pickers](/x/react-date-pickers/getting-started/) are not supported by the Data Grid out of the box yet, it is easy to integrate them by creating [custom edit components](/x/react-data-grid/editing/custom-edit-component/) and [custom filter operators](/x/react-data-grid/filtering/customization/#create-a-custom-operator). +While the [MUI X Date and Time Pickers](/x/react-date-pickers/) are not supported by the Data Grid out of the box yet, you can integrate them by creating [custom edit components](/x/react-data-grid/editing/custom-edit-component/) and [custom filter operators](/x/react-data-grid/filtering/customization/#create-a-custom-operator). The example below uses `@mui/x-date-pickers` for both `date` and `dateTime` column types: diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.js b/docs/data/data-grid/features/FullFeaturedDemo.js similarity index 100% rename from docs/data/data-grid/demo/FullFeaturedDemo.js rename to docs/data/data-grid/features/FullFeaturedDemo.js diff --git a/docs/data/data-grid/demo/FullFeaturedDemo.tsx b/docs/data/data-grid/features/FullFeaturedDemo.tsx similarity index 100% rename from docs/data/data-grid/demo/FullFeaturedDemo.tsx rename to docs/data/data-grid/features/FullFeaturedDemo.tsx diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/features/PopularFeaturesDemo.js similarity index 100% rename from docs/data/data-grid/demo/PopularFeaturesDemo.js rename to docs/data/data-grid/features/PopularFeaturesDemo.js diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/features/PopularFeaturesDemo.tsx similarity index 100% rename from docs/data/data-grid/demo/PopularFeaturesDemo.tsx rename to docs/data/data-grid/features/PopularFeaturesDemo.tsx diff --git a/docs/data/data-grid/demo/demo.md b/docs/data/data-grid/features/features.md similarity index 100% rename from docs/data/data-grid/demo/demo.md rename to docs/data/data-grid/features/features.md diff --git a/docs/data/data-grid/overview/overview.md b/docs/data/data-grid/overview/overview.md index 5ea624c777378..a0866d2447ef0 100644 --- a/docs/data/data-grid/overview/overview.md +++ b/docs/data/data-grid/overview/overview.md @@ -19,10 +19,13 @@ It provides developers with an intuitive API for implementing complex use cases; The Grid's theming features are designed to be frictionless when integrating with Material UI and other MUI X components, but it can also stand on its own and be customized to meet the needs of any design system. The Data Grid is **open-core**: The Community version is MIT-licensed and free forever, while more advanced features require a Pro or Premium commercial license. - See [MUI X Licensing](/x/introduction/licensing/) for complete details. -## Community version +## Community version (free forever) + +```js +import { DataGrid } from '@mui/x-data-grid'; +``` The MIT-licensed Community version of the Data Grid is a more sophisticated implementation of the [Material UI Table](/material-ui/react-table/). @@ -32,8 +35,11 @@ It includes all of the main features listed in the navigation menu, such as edit ## Pro version [](/x/introduction/licensing/#pro-plan 'Pro plan') -The Pro plan expands on the Community version to support more complex use cases with features like advanced filtering, column pinning, column and row reordering, support for tree data, and virtualization to handle larger datasets. +```js +import { DataGridPro } from '@mui/x-data-grid-pro'; +``` +The Pro plan expands on the Community version to support more complex use cases with features like advanced filtering, column pinning, column and row reordering, support for tree data, and virtualization to handle larger datasets. Pro features are denoted by the blue cube icon () throughout the documentation. The demo below displays 31 columns and 100,000 rows—over three million cells in total: @@ -42,8 +48,11 @@ The demo below displays 31 columns and 100,000 rows—over three million cells i ## Premium version [](/x/introduction/licensing/#premium-plan 'Premium plan') -The Premium plan includes all Pro features as well as more advanced features for data analysis and large dataset management, such as row grouping with aggregation functions (like sum and average) and the ability to export to Excel files. +```js +import { DataGridPremium } from '@mui/x-data-grid-premium'; +``` +The Premium plan includes all Pro features as well as more advanced features for data analysis and large dataset management, such as row grouping with aggregation functions (like sum and average) and the ability to export to Excel files. Premium features are denoted by the golden cube icon () throughout the documentation. The demo below groups rows by commodity name, and uses an aggregation function to calculate the sum of quantities for each group and in total (displayed in a summary row). diff --git a/docs/data/data-grid/getting-started/Codesandbox.js b/docs/data/data-grid/quickstart/Codesandbox.js similarity index 100% rename from docs/data/data-grid/getting-started/Codesandbox.js rename to docs/data/data-grid/quickstart/Codesandbox.js diff --git a/docs/data/data-grid/getting-started/getting-started.md b/docs/data/data-grid/quickstart/quickstart.md similarity index 81% rename from docs/data/data-grid/getting-started/getting-started.md rename to docs/data/data-grid/quickstart/quickstart.md index e0087d9441d5b..c7726d1c6b21d 100644 --- a/docs/data/data-grid/getting-started/getting-started.md +++ b/docs/data/data-grid/quickstart/quickstart.md @@ -4,7 +4,7 @@ ## Installation -Run one of the following commands to install the MUI X Data Grid package that best suits your needs—the free Community version or the paid Pro or Premium version: +Install the Data Grid package that best suits your needs—Community, Pro, or Premium: @@ -13,11 +13,15 @@ Run one of the following commands to install the MUI X Data Grid package that b :::success Not sure which package to choose? You can start with the Community version and upgrade to Pro or Premium at any time. -Check out the [Feature showcase](/x/react-data-grid/demo/) for a list of features available in each package. +Check out the [Feature showcase](/x/react-data-grid/features/) for a list of features available in each package. ::: +### Peer dependencies + +#### Material UI + The Data Grid packages have a peer dependency on `@mui/material`. -If you're not already using it, install it with the following command: +If you're not already using it, install it now: @@ -35,6 +39,8 @@ yarn add @mui/material @emotion/react @emotion/styled +#### React + [`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies: @@ -46,11 +52,14 @@ yarn add @mui/material @emotion/react @emotion/styled }, ``` -## Quickstart +## Rendering a Data Grid + +### Import the component -Import the component that corresponds to the version you're using, along with the `GridRowsProp` and `GridColDef` utilities: +Import the Data Grid component that corresponds to the version you're using, along with the `GridRowsProp` and `GridColDef` utilities: ```js +// choose one import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid'; import { DataGridPro, GridRowsProp, GridColDef } from '@mui/x-data-grid-pro'; import { DataGridPremium, GridRowsProp, GridColDef } from '@mui/x-data-grid-premium'; @@ -85,7 +94,7 @@ const columns: GridColDef[] = [ ]; ``` -### Render the Data Grid +### Render the component With the component and utilites imported, and rows and columns defined, you're now ready to render the Data Grid as shown below: @@ -117,6 +126,8 @@ export default function App() { ## TypeScript +### Theme augmentation + To benefit from [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users must import the following types. These types use module augmentation to extend the default theme structure. @@ -140,16 +151,17 @@ const theme = createTheme({ ## Using this documentation -### The useDemoData hook +### @mui/x-data-grid-generator + +**The `@mui/x-data-grid-generator` is a development-only package and should not be used in production.** +You can use it to create a reproduction of a bug or generate demo data in your development environment. +You should not rely on its API—it doesn't follow semver. -The `useDemoData` hook is a utility hook from the `@mui/x-data-grid-generator` package. -It contains columns definitions and generates random data for the Data Grid. -It is often used in our demos to provide realistic data without polluting the code with data generation logic. +### useDemoData hook -:::success -Looking for the column definitions and custom cell renderers from the `useDemoData` hook? -Check out the [Custom columns demo](/x/react-data-grid/custom-columns/#full-example) where you can copy them from the demo source code. -::: +The `useDemoData` hook is a utility hook from the `@mui/x-data-grid-generator` package, used in demos throughout this documentation to provide realistic data without polluting the code with data generation logic. +It contains column definitions and generates random data for the Data Grid. +For more details on these definitions and the custom cell renderers available, see the [custom columns demo](/x/react-data-grid/custom-columns/#full-example) where you can copy them from the demo source code. Here's how it's used: @@ -168,12 +180,6 @@ export default function Demo() { It comes with two datasets: `Commodity` and `Employee`. You can customize the data generation by passing the custom options of type [`UseDemoDataOptions`](https://github.com/mui/mui-x/blob/6aad22644ee710690b90dc2ac6bbafceb91fecf0/packages/x-data-grid-generator/src/hooks/useDemoData.ts#L29-L36). -:::error -`@mui/x-data-grid-generator` is a development-only package and should not be used in production. -You can use it to create a reproduction of a bug or generate demo data in your development environment. -You should not rely on its API—it doesn't follow semver. -::: - ## API - [DataGrid](/x/api/data-grid/data-grid/) diff --git a/docs/data/date-pickers/base-concepts/base-concepts.md b/docs/data/date-pickers/base-concepts/base-concepts.md index 37ee4a4c2c584..15d1e45193a84 100644 --- a/docs/data/date-pickers/base-concepts/base-concepts.md +++ b/docs/data/date-pickers/base-concepts/base-concepts.md @@ -147,71 +147,6 @@ For example, in a Time Picker, it allows you to choose the date of your value: {{"demo": "ReferenceDateExplicitTimePicker.js"}} -## TypeScript - -### Theme augmentation - -To benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types. -Internally, it uses module augmentation to extend the default theme structure. - -```tsx -import type {} from '@mui/x-date-pickers/themeAugmentation'; -import type {} from '@mui/x-date-pickers-pro/themeAugmentation'; - -const theme = createTheme({ - components: { - MuiDatePicker: { - defaultProps: { - displayWeekNumber: true, - }, - }, - MuiDateRangeCalendar: { - styleOverrides: { - root: { - backgroundColor: '#f0f0f0', - }, - }, - }, - }, -}); -``` - -:::info -You don't have to import the theme augmentation from both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro` when using `@mui/x-date-pickers-pro`. -Importing it from `@mui/x-date-pickers-pro` is enough. -::: - -### Typing of the date - -The Date and Time Pickers components are compatible with several date libraries -that use different formats to represent their dates -(`Date` object for `date-fns`, `daysjs.Dayjs` object for `days-js`, etc.). -To correctly type all the props that are date-related, the adapters override a global type named `PickerValidDate` -to allow the usage of their own date format. -This allows TypeScript to throw an error if you try to pass `value={new Date()}` to a component using `AdapterDayjs` for instance. - -If you are not sure your adapter is set up correctly to infer the type of date-related props, you can import the `PickerValidDate` type and check its current value. - -If its equal to the format used by your date library, then you don't have to do anything: - -PickerValidDate correctly configured - -If it's equal to `any`, you can fix it by manually importing the adapter in some file of your project as show below: - -PickerValidDate not correctly configured - -```ts -// Replace `AdapterDayjs` with the adapter you are using. -import type {} from '@mui/x-date-pickers/AdapterDayjs'; -``` - -:::info -Before version 7.19.0, TypeScript was throwing an error such as `DesktopDatePickerProps error Type 'Date' does not satisfy the constraint 'never'` -when you were not importing the adapter in the same TypeScript project as the rest of your codebase. - -The fix described above should also solve the problem. -::: - ## Testing caveats ### Responsive components diff --git a/docs/data/date-pickers/date-picker/date-picker.md b/docs/data/date-pickers/date-picker/date-picker.md index f702279ebb37d..d7b5130f1b930 100644 --- a/docs/data/date-pickers/date-picker/date-picker.md +++ b/docs/data/date-pickers/date-picker/date-picker.md @@ -65,6 +65,15 @@ Responsive components can suffer some inconsistencies between testing environmen Please refer to [this section](/x/react-date-pickers/base-concepts/#testing-caveats) for solutions. ::: +### Keyboard Date Picker (legacy) + +The current implementation of the Date Picker component replaces the experimental Keyboard Date Picker from Material UI. +See the [migration documentation](/material-ui/migration/pickers-migration/#imports) for more information. + +For accessibility, all Picker components accept keyboard inputs. +If your use case only calls for keyboard editing, you can use Field components: the Date Picker component can be edited via input or a calendar, whereas the Date Field can only be edited via input. +See the [Fields documentation](/x/react-date-pickers/fields/) for more details. + ## Form props The component can be disabled or read-only. diff --git a/docs/data/date-pickers/faq/faq.md b/docs/data/date-pickers/faq/faq.md deleted file mode 100644 index b3be2015f249e..0000000000000 --- a/docs/data/date-pickers/faq/faq.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -productId: x-date-pickers -title: Frequently Asked Questions - Date and Time pickers -githubLabel: 'component: pickers' -packageName: '@mui/x-date-pickers' ---- - -# Frequently asked questions - -

Can't find what you are looking for? The FAQ section has answers to some of the most frequent questions and challenges.

- -If you still have trouble, you can refer to the [support page](/x/introduction/support/). - -## What is the DemoContainer and DemoItem? - -The `` is an internal component used together with the `` to display multiple components in a consistent layout throughout the demos. - -This helps avoid the repeated use of layout components, such as `` or ``, while keeping the code minimal and clear, and allowing readers to focus on what is important - the demo itself. - -:::warning -You should never use these components in your application. -::: - -## Why is the KeyboardDatePicker not supported anymore? - -It has been replaced with the `DatePicker` component, please refer to the [migration documentation](/material-ui/migration/pickers-migration/#imports) for more information. - -All versions of the date and time pickers implement keyboard input for accessibility and also allow editing through the UI. Depending on your use case, you may only need keyboard editing, in which case you can use the date and time field components. - -For instance, `DatePicker` allows for editing both via input and a calendar, while `DateField` only allows for editing via input. You can read more about the different types of components on the [base concepts page](/x/react-date-pickers/base-concepts/#other-components). - -For more information about the fields, you can refer to the [field components page](/x/react-date-pickers/fields/). diff --git a/docs/data/date-pickers/getting-started/getting-started.md b/docs/data/date-pickers/getting-started/getting-started.md deleted file mode 100644 index c3a703efd7b44..0000000000000 --- a/docs/data/date-pickers/getting-started/getting-started.md +++ /dev/null @@ -1,102 +0,0 @@ ---- -productId: x-date-pickers -title: Date and Time Pickers - Getting started -packageName: '@mui/x-date-pickers' -githubLabel: 'component: pickers' -materialDesign: https://m2.material.io/components/date-pickers -waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/ ---- - -# Date and Time Pickers - Getting started - -

Install the Date and Time Pickers package and set up your date library to start building.

- -## Installation - -Install the base package (which can either be the free Community version or the paid Pro version) along with a required third-party date library. -The Pickers currently support [Day.js](https://day.js.org/), [date-fns](https://date-fns.org/), [Luxon](https://moment.github.io/luxon/#/), and [Moment.js](https://momentjs.com/). - -Choose your packages and manager through the toggles below, then run the commands as provided to install: - - - -{{"component": "modules/components/PickersInstallationInstructions.js"}} - -:::success -Not sure which date library to choose? -If you're starting from scratch with no other date libraries in your app, we recommend Day.js because of its small bundle size. -::: - -### Peer dependencies - -#### Material UI - -The Date and Time Pickers have a peer dependency on `@mui/material`. -If you're not already using it, install it with the following command: - - - -```bash npm -npm install @mui/material @emotion/react @emotion/styled -``` - -```bash pnpm -pnpm add @mui/material @emotion/react @emotion/styled -``` - -```bash yarn -yarn add @mui/material @emotion/react @emotion/styled -``` - - - -#### React - - - -[`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies: - -```json -"peerDependencies": { - "react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" -}, -``` - -## Date library adapter setup - -To integrate your chosen date library with the Date and Time Pickers, you'll need to plug the corresponding adapter into a `LocalizationProvider` that wraps your Picker components. - -Adapters are provided for each of the supported libraries, and all are exported by both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`—for example,`AdapterDayjs`, which is used throughout this documentation for [Day.js](https://day.js.org/) integration: - -```tsx -import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; -import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs'; -``` - -### LocalizationProvider - -The `LocalizationProvider` component is exported by both `@mui/x-date-pickers` and `@mui/x-date-pickers-pro`: - -```tsx -import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; -import { LocalizationProvider } from '@mui/x-date-pickers-pro/LocalizationProvider'; -``` - -:::warning -For practical purposes, each demo in the documentation has its own `LocalizationProvider` wrapper. -**We _do not_ recommend reproducing this pattern as-is.** -For almost all use cases, you should wrap your entire app with a single `LocalizationProvider` to avoid repeating boilerplate code in multiple places. -::: - -{{"component": "modules/components/PickersRenderingInstructions.js"}} - -:::info -To use the Date and Time Pickers with a custom locale, see [Date and format localization](/x/react-date-pickers/adapters-locale/). -::: - -## Render your first component - -To confirm that everything is set up correctly, try rendering a basic Date Picker component: - -{{"demo": "FirstComponent.js"}} diff --git a/docs/data/date-pickers/getting-started/FirstComponent.js b/docs/data/date-pickers/quickstart/FirstComponent.js similarity index 100% rename from docs/data/date-pickers/getting-started/FirstComponent.js rename to docs/data/date-pickers/quickstart/FirstComponent.js diff --git a/docs/data/date-pickers/getting-started/FirstComponent.tsx b/docs/data/date-pickers/quickstart/FirstComponent.tsx similarity index 100% rename from docs/data/date-pickers/getting-started/FirstComponent.tsx rename to docs/data/date-pickers/quickstart/FirstComponent.tsx diff --git a/docs/data/date-pickers/getting-started/FirstComponent.tsx.preview b/docs/data/date-pickers/quickstart/FirstComponent.tsx.preview similarity index 100% rename from docs/data/date-pickers/getting-started/FirstComponent.tsx.preview rename to docs/data/date-pickers/quickstart/FirstComponent.tsx.preview diff --git a/docs/data/date-pickers/getting-started/MaterialUIPickers.tsx.preview b/docs/data/date-pickers/quickstart/MaterialUIPickers.tsx.preview similarity index 100% rename from docs/data/date-pickers/getting-started/MaterialUIPickers.tsx.preview rename to docs/data/date-pickers/quickstart/MaterialUIPickers.tsx.preview diff --git a/docs/data/date-pickers/quickstart/quickstart.md b/docs/data/date-pickers/quickstart/quickstart.md new file mode 100644 index 0000000000000..416ba65271fdb --- /dev/null +++ b/docs/data/date-pickers/quickstart/quickstart.md @@ -0,0 +1,180 @@ +--- +productId: x-date-pickers +title: Date and Time Pickers - Quickstart +packageName: '@mui/x-date-pickers' +githubLabel: 'component: pickers' +materialDesign: https://m2.material.io/components/date-pickers +waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/ +--- + +# Date and Time Pickers - Quickstart + +

Install the MUI X Date and Time Pickers package and set up your date library to start building.

+ +## Installation + +Install the Date and Time Pickers package that best suits your needs—Community or Pro—along with one of the supported third-party date libraries. +The Pickers currently support [Day.js](https://day.js.org/), [date-fns](https://date-fns.org/), [Luxon](https://moment.github.io/luxon/#/), and [Moment.js](https://momentjs.com/). + +Choose your packages and manager through the toggles below, then run the commands as provided to install: + + + +{{"component": "modules/components/PickersInstallationInstructions.js"}} + +:::success +Not sure which date library to choose? +If you're starting from scratch with no other date libraries in your app, we recommend [Day.js](https://day.js.org/) because of its small bundle size. +::: + +### Peer dependencies + +#### Material UI + +The Date and Time Pickers have a peer dependency on `@mui/material`. +If you're not already using it, install it now: + + + +```bash npm +npm install @mui/material @emotion/react @emotion/styled +``` + +```bash pnpm +pnpm add @mui/material @emotion/react @emotion/styled +``` + +```bash yarn +yarn add @mui/material @emotion/react @emotion/styled +``` + + + +#### React + + + +[`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies: + +```json +"peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" +}, +``` + +## Rendering a Date Picker + +### Import the component + +Import a Date Picker component and the Localization Provider: + +```js +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +``` + +Next, import the adapter that corresponds to your chosen date library. +Adapters are provided for all supported libraries in both versions of the package. +The snippet below imports `AdapterDayjs`, which is used throughout this documentation for Day.js integration. + +```tsx +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +``` + +### Integrate provider and adapter + +To integrate your chosen date library with the Date Pickers, wrap your app with the Localization Provider and pass the adapter to the Provider's `dateAdapter` prop as shown below: + +{{"component": "modules/components/PickersRenderingInstructions.js"}} + +:::info +To use the Date and Time Pickers with a custom locale, see [Date and format localization](/x/react-date-pickers/adapters-locale/). +::: + +### Render the component + +With the component, adapter, and provider properly configured, you're now ready to render a Date Picker as shown below: + +```tsx +import * as React from 'react'; +import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; +import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider'; +import { DatePicker } from '@mui/x-date-pickers/DatePicker'; + +export default function App() { + return ( + + + + ); +} +``` + +{{"demo": "FirstComponent.js"}} + +## TypeScript + +### Theme augmentation + +To benefit from [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users must import the following types. +These types use module augmentation to extend the default theme structure. + +```tsx +// Pro users: add `-pro` suffix to package name +import type {} from '@mui/x-date-pickers/themeAugmentation'; + +const theme = createTheme({ + components: { + MuiDatePicker: { + defaultProps: { + displayWeekNumber: true, + }, + }, + MuiDateRangeCalendar: { + styleOverrides: { + root: { + backgroundColor: '#f0f0f0', + }, + }, + }, + }, +}); +``` + +### Date value types + +The Date and Time Pickers are compatible with several date libraries that each use different formats to represent their dates. +To correctly type all date-related props, the adapters override a global type named `PickerValidDate` to allow for the formatting of their corresponding libraries. +As a result, TypeScript will throw an error if you try to pass the wrong kind of value to the date library. + +To determine whether your adapter is set up correctly, you can import the `PickerValidDate` type from `@mui/x-date-pickers/models` and check its current value. +If the type matches your chosen date library then it's correctly configured: + +PickerValidDate correctly configured + +If the type is `any`, you can fix this by manually importing the adapter's types directly into your project as shown below: + +```ts +// replace `AdapterDayjs` with the adapter you're using +import type {} from '@mui/x-date-pickers/AdapterDayjs'; +``` + +:::info +Before version 7.19.0, TypeScript would throw the following error if you didn't import the adapter in the same TypeScript project as the rest of your codebase: `DesktopDatePickerProps error Type 'Date' does not satisfy the constraint 'never'`. +The solution described above should resolve this. +::: + +## Using this documentation + +### Localization Provider + +For practical purposes, each demo in this documentation has its own Localization Provider wrapper. +**You should not reproduce this pattern as-is.** +For almost all use cases, you should wrap your entire app with a single Localization Provider to avoid repeating boilerplate code in multiple places. + +### Demo Container and Demo Item + +Throughout this documentation, the internal components `` and `` are used in demos to display multiple components with a consistent layout. +**You should never use these components in your application.** +This helps avoid the repeated use of layout components such as `` or ``, which would otherwise add irrelevant clutter to demos meant to illustrate specific features. diff --git a/docs/data/introduction/support/support.md b/docs/data/introduction/support/support.md index f965797405e05..d4d76894ac7ff 100644 --- a/docs/data/introduction/support/support.md +++ b/docs/data/introduction/support/support.md @@ -31,7 +31,7 @@ You have a few possible options to provide it: You can browse the documentation, find an example close to your use case, and then open it in a live editor: - + Forking an example @@ -40,10 +40,10 @@ You can browse the documentation, find an example close to your use case, and th -- [Data Grid](/x/react-data-grid/#community-version) -- [Date Pickers](/x/react-date-pickers/getting-started/#render-your-first-component) -- [Charts](/x/react-charts/getting-started/#self-contained-charts) -- [Tree View](/x/react-tree-view/#simple-tree-view) +- [Data Grid](/x/react-data-grid/#community-version-free-forever) +- [Date Pickers](/x/react-date-pickers/quickstart/#render-the-component) +- [Charts](/x/react-charts/quickstart/#self-contained-charts) +- [Tree View](/x/react-tree-view/) #### Use starter templates diff --git a/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md b/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md index 7e7190991b9a4..1de72e4ea8f37 100644 --- a/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md +++ b/docs/data/migration/migration-pickers-lab/migration-pickers-lab.md @@ -101,7 +101,7 @@ Which will transform the imports like this: ``` Components of the Community plan such as `` can be imported from both `@mui/x-date-pickers-pro` and `@mui/x-date-pickers`. -[Date adapters](/x/react-date-pickers/getting-started/#installation) such as `AdapterDayjs` can only be imported from `@mui/x-date-pickers/[adapterName]`. +[Date adapters](/x/react-date-pickers/quickstart/#installation) such as `AdapterDayjs` can only be imported from `@mui/x-date-pickers/[adapterName]`. ### 3. Handle breaking changes introduced in alpha diff --git a/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md b/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md index 7985a701eb1bb..762a634f64117 100644 --- a/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md +++ b/docs/data/migration/migration-pickers-v5/migration-pickers-v5.md @@ -152,7 +152,7 @@ const theme = createTheme({ ``` :::success -If you are using TypeScript, please make sure to add the [theme augmentation](/x/react-date-pickers/base-concepts/#typescript) to your project. +If you are using TypeScript, please make sure to add the [theme augmentation](/x/react-date-pickers/quickstart/#typescript) to your project. ::: ### Remove the keyboard view diff --git a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md index 94e420e02781c..167401fa6c8eb 100644 --- a/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md +++ b/docs/data/migration/migration-pickers-v6/migration-pickers-v6.md @@ -300,7 +300,7 @@ All the date-related props are now strictly typed to only accept the date format (`Date` object for `date-fns`, `daysjs.Dayjs` object for `days-js`, etc.). :::info -See [Base concepts—Typing of the date](/x/react-date-pickers/base-concepts/#typing-of-the-date) for more details. +See [Date and time types](/x/react-date-pickers/quickstart/#date-and-time-types) for more details. ::: ## Field components diff --git a/docs/data/pages.ts b/docs/data/pages.ts index 5def15ccecfdc..91f1c988be1a5 100644 --- a/docs/data/pages.ts +++ b/docs/data/pages.ts @@ -32,8 +32,8 @@ const pages: MuiPage[] = [ title: 'Data Grid', children: [ { pathname: '/x/react-data-grid', title: 'Overview' }, - { pathname: '/x/react-data-grid/getting-started', title: 'Quickstart' }, - { pathname: '/x/react-data-grid/demo', title: 'Feature showcase' }, + { pathname: '/x/react-data-grid/quickstart' }, + { pathname: '/x/react-data-grid/features' }, { pathname: '/x/react-data-grid/main-features', subheader: 'Main features', @@ -264,9 +264,8 @@ const pages: MuiPage[] = [ title: 'Date and Time Pickers', children: [ { pathname: '/x/react-date-pickers', title: 'Overview' }, - { pathname: '/x/react-date-pickers/getting-started' }, + { pathname: '/x/react-date-pickers/quickstart', title: 'Quickstart' }, { pathname: '/x/react-date-pickers/base-concepts' }, - { pathname: '/x/react-date-pickers/faq', title: 'FAQs' }, { pathname: '/x/react-date-pickers-components', subheader: 'Components', @@ -421,7 +420,7 @@ const pages: MuiPage[] = [ title: 'Charts', children: [ { pathname: '/x/react-charts', title: 'Overview' }, - { pathname: '/x/react-charts/getting-started' }, + { pathname: '/x/react-charts/quickstart', title: 'Quickstart' }, { pathname: '/x/react-chart-components', subheader: 'Components', @@ -533,7 +532,7 @@ const pages: MuiPage[] = [ title: 'Tree View', children: [ { pathname: '/x/react-tree-view', title: 'Overview' }, - { pathname: '/x/react-tree-view/getting-started' }, + { pathname: '/x/react-tree-view/quickstart', title: 'Quickstart' }, { pathname: '/x/react-tree-view/simple-tree-view', subheader: 'Simple Tree View', diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md deleted file mode 100644 index d45b06955911f..0000000000000 --- a/docs/data/tree-view/getting-started/getting-started.md +++ /dev/null @@ -1,108 +0,0 @@ ---- -productId: x-tree-view -title: Tree View - Getting started -components: SimpleTreeView, RichTreeView, TreeItem -packageName: '@mui/x-tree-view' -githubLabel: 'component: tree view' -waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ ---- - -# Tree View - Getting Started - -

Get started with the Tree View. Install the package, configure your application and start using the components.

- -## Installation - -Using your favorite package manager, install `@mui/x-tree-view-pro` for the commercial version, or `@mui/x-tree-view` for the free community version. - - - -{{"component": "modules/components/TreeViewInstallationInstructions.js"}} - -The Tree View package has a peer dependency on `@mui/material`. -If you are not already using it in your project, you can install it with: - - - -```bash npm -npm install @mui/material @emotion/react @emotion/styled -``` - -```bash pnpm -pnpm add @mui/material @emotion/react @emotion/styled -``` - -```bash yarn -yarn add @mui/material @emotion/react @emotion/styled -``` - - - - - -Please note that [react](https://www.npmjs.com/package/react) and [react-dom](https://www.npmjs.com/package/react-dom) are peer dependencies too: - -```json -"peerDependencies": { - "react": "^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" -}, -``` - -### Style engine - -Material UI is using [Emotion](https://emotion.sh/docs/introduction) as a styling engine by default. If you want to use [`styled-components`](https://styled-components.com/) instead, run: - - -```bash npm -npm install @mui/styled-engine-sc styled-components -``` - -```bash pnpm -pnpm add @mui/styled-engine-sc styled-components -``` - -```bash yarn -yarn add @mui/styled-engine-sc styled-components -``` - - - -Take a look at the [Styled engine guide](/material-ui/integrations/styled-components/) for more information about how to configure `styled-components` as the style engine. - -## Render your first component - -To make sure that everything is set up correctly, try rendering a Simple Tree View component: - -{{"demo": "FirstComponent.js"}} - -## Accessibility - -(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) - -The component follows the WAI-ARIA authoring practices. - -To have an accessible Tree View you must use `aria-labelledby` -or `aria-label` to reference or provide a label on the TreeView, -otherwise, screen readers will announce it as "tree", making it hard to understand the context of a specific tree item. - -## TypeScript - -In order to benefit from the [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users need to import the following types. -Internally, it uses module augmentation to extend the default theme structure. - -```tsx -import type {} from '@mui/x-tree-view/themeAugmentation'; - -const theme = createTheme({ - components: { - MuiRichTreeView: { - styleOverrides: { - root: { - backgroundColor: 'red', - }, - }, - }, - }, -}); -``` diff --git a/docs/data/tree-view/overview/TreeViewOverviewDemo.js b/docs/data/tree-view/overview/TreeViewOverviewDemo.js new file mode 100644 index 0000000000000..55561550c5293 --- /dev/null +++ b/docs/data/tree-view/overview/TreeViewOverviewDemo.js @@ -0,0 +1,30 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; + +export default function TreeViewOverviewDemo() { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/overview/TreeViewOverviewDemo.tsx b/docs/data/tree-view/overview/TreeViewOverviewDemo.tsx new file mode 100644 index 0000000000000..55561550c5293 --- /dev/null +++ b/docs/data/tree-view/overview/TreeViewOverviewDemo.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; + +export default function TreeViewOverviewDemo() { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md index e1c49a7e2bd69..668cd1c33803b 100644 --- a/docs/data/tree-view/overview/overview.md +++ b/docs/data/tree-view/overview/overview.md @@ -8,36 +8,40 @@ packageName: '@mui/x-tree-view' # MUI X Tree View -

The Tree View component lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.

+

The Tree View lets users navigate hierarchical lists of data with nested levels that can be expanded and collapsed.

{{"component": "@mui/docs/ComponentLinkHeader"}} -## Available components +## Overview -The MUI X Tree View package exposes two different versions of the component: +The MUI X Tree View provides all of the functionality necessary to build a hierarchical list of expandable and collapsible items. +The Tree View's theming features are designed to be frictionless when integrating with Material UI and other MUI X components, but it can also stand on its own and be customized to meet the needs of any design system. -### Simple Tree View +The Tree View is **open-core**: The Community version is MIT-licensed and free forever, while more advanced features require a Pro commercial license. +See [MUI X Licensing](/x/introduction/licensing/) for complete details. -```jsx -import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; -``` +The demo below shows how to render a Simple Tree View—try clicking on an item to see how it expands and collapses: -The simple version of the Tree View component receives its items as JSX children. -This is the recommended version for hardcoded items. +{{"demo": "TreeViewOverviewDemo.js", "defaultCodeOpen": true}} -{{"demo": "BasicSimpleTreeView.js"}} +## Community version (free forever) -### Rich Tree View +```js +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +``` -```jsx +```js import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; ``` -The rich version of the Tree View component receives its items dynamically from an external data source. -This is the recommended version for larger trees, as well as those that require more advanced features like editing and virtualization. +The MIT-licensed Community version of the Tree View covers the most common use cases. +Proceed to the [Quickstart guide](/x/react-tree-view/quickstart/) to learn more about the differences between the Simple and Rich Tree View components. + +## Pro version [](/x/introduction/licensing/#pro-plan 'Pro plan') -{{"demo": "BasicRichTreeView.js"}} +```js +import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro'; +``` -:::info -At the moment, the Simple and Rich Tree Views are similar in terms of feature support. But as the component grows, you can expect to see the more advanced ones appear primarily on the Rich Tree View. -::: +The Pro version of the Rich Tree View expands on the Community version by providing [drag-and-drop reordering](/x/react-tree-view/rich-tree-view/ordering/) functionality in addition to all other features. +Pro features are denoted by the blue cube icon () throughout the documentation. diff --git a/docs/data/tree-view/quickstart/BasicRichTreeView.js b/docs/data/tree-view/quickstart/BasicRichTreeView.js new file mode 100644 index 0000000000000..1756aba06d123 --- /dev/null +++ b/docs/data/tree-view/quickstart/BasicRichTreeView.js @@ -0,0 +1,48 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; + +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; + +const MUI_X_PRODUCTS = [ + { + id: 'grid', + label: 'Data Grid', + children: [ + { id: 'grid-community', label: '@mui/x-data-grid' }, + { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, + { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, + ], + }, + { + id: 'pickers', + label: 'Date and Time Pickers', + children: [ + { id: 'pickers-community', label: '@mui/x-date-pickers' }, + { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, + ], + }, + { + id: 'charts', + label: 'Charts', + children: [ + { id: 'charts-community', label: '@mui/x-charts' }, + { id: 'charts-pro', label: '@mui/charts-pro' }, + ], + }, + { + id: 'tree-view', + label: 'Tree View', + children: [ + { id: 'tree-view-community', label: '@mui/x-tree-view' }, + { id: 'tree-view-pro', label: '@mui/x-tree-view-pro' }, + ], + }, +]; + +export default function BasicRichTreeView() { + return ( + + + + ); +} diff --git a/docs/data/tree-view/quickstart/BasicRichTreeView.tsx b/docs/data/tree-view/quickstart/BasicRichTreeView.tsx new file mode 100644 index 0000000000000..0cb55d01c05a1 --- /dev/null +++ b/docs/data/tree-view/quickstart/BasicRichTreeView.tsx @@ -0,0 +1,48 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { TreeViewBaseItem } from '@mui/x-tree-view/models'; +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; + +const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ + { + id: 'grid', + label: 'Data Grid', + children: [ + { id: 'grid-community', label: '@mui/x-data-grid' }, + { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, + { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, + ], + }, + { + id: 'pickers', + label: 'Date and Time Pickers', + children: [ + { id: 'pickers-community', label: '@mui/x-date-pickers' }, + { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, + ], + }, + { + id: 'charts', + label: 'Charts', + children: [ + { id: 'charts-community', label: '@mui/x-charts' }, + { id: 'charts-pro', label: '@mui/charts-pro' }, + ], + }, + { + id: 'tree-view', + label: 'Tree View', + children: [ + { id: 'tree-view-community', label: '@mui/x-tree-view' }, + { id: 'tree-view-pro', label: '@mui/x-tree-view-pro' }, + ], + }, +]; + +export default function BasicRichTreeView() { + return ( + + + + ); +} diff --git a/docs/data/tree-view/quickstart/BasicRichTreeView.tsx.preview b/docs/data/tree-view/quickstart/BasicRichTreeView.tsx.preview new file mode 100644 index 0000000000000..19ab6390267f1 --- /dev/null +++ b/docs/data/tree-view/quickstart/BasicRichTreeView.tsx.preview @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/data/tree-view/quickstart/BasicSimpleTreeView.js b/docs/data/tree-view/quickstart/BasicSimpleTreeView.js new file mode 100644 index 0000000000000..881c0250ed3c6 --- /dev/null +++ b/docs/data/tree-view/quickstart/BasicSimpleTreeView.js @@ -0,0 +1,30 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; + +export default function BasicSimpleTreeView() { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/quickstart/BasicSimpleTreeView.tsx b/docs/data/tree-view/quickstart/BasicSimpleTreeView.tsx new file mode 100644 index 0000000000000..881c0250ed3c6 --- /dev/null +++ b/docs/data/tree-view/quickstart/BasicSimpleTreeView.tsx @@ -0,0 +1,30 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeItem } from '@mui/x-tree-view/TreeItem'; + +export default function BasicSimpleTreeView() { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/docs/data/tree-view/getting-started/FirstComponent.js b/docs/data/tree-view/quickstart/FirstComponent.js similarity index 100% rename from docs/data/tree-view/getting-started/FirstComponent.js rename to docs/data/tree-view/quickstart/FirstComponent.js diff --git a/docs/data/tree-view/getting-started/FirstComponent.tsx b/docs/data/tree-view/quickstart/FirstComponent.tsx similarity index 100% rename from docs/data/tree-view/getting-started/FirstComponent.tsx rename to docs/data/tree-view/quickstart/FirstComponent.tsx diff --git a/docs/data/tree-view/quickstart/quickstart.md b/docs/data/tree-view/quickstart/quickstart.md new file mode 100644 index 0000000000000..eb2a6660a6f76 --- /dev/null +++ b/docs/data/tree-view/quickstart/quickstart.md @@ -0,0 +1,122 @@ +--- +productId: x-tree-view +title: Tree View - Quickstart +components: SimpleTreeView, RichTreeView, TreeItem, TreeView +packageName: '@mui/x-tree-view' +githubLabel: 'component: tree view' +waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ +--- + +# Tree View - Quickstart + +

Install the MUI X Tree View package and start building.

+ +## Installation + +Install the Tree View package that best suits your needs—Community or Pro: + + + +{{"component": "modules/components/TreeViewInstallationInstructions.js"}} + +### Peer dependencies + +#### Material UI + +The Tree View packages have a peer dependency on `@mui/material`. +If you're not already using it, install it now: + + + +```bash npm +npm install @mui/material @emotion/react @emotion/styled +``` + +```bash pnpm +pnpm add @mui/material @emotion/react @emotion/styled +``` + +```bash yarn +yarn add @mui/material @emotion/react @emotion/styled +``` + + + +#### React + + + +[`react`](https://www.npmjs.com/package/react) and [`react-dom`](https://www.npmjs.com/package/react-dom) are also peer dependencies: + +```json +"peerDependencies": { + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" +}, +``` + +## Rendering a Tree View + +The package exposes two different versions of this component: `` and ``. +The [Simple version](#simple-tree-view) is recommended for hardcoded items, while the [Rich version](#rich-tree-view) is preferred for dynamically rendered items, larger trees, and more complex use cases that require features like editing and virtualization. + +:::info +Currently, the Simple and Rich Tree View components share many of the same features. +As this package continues to mature, more advanced features and functionality will be prioritized for the Rich Tree View. +::: + +### Simple Tree View + +```jsx +import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +``` + +The simple version of the Tree View component receives its items as JSX children. +This is the recommended version for hardcoded items. + +{{"demo": "BasicSimpleTreeView.js"}} + +### Rich Tree View + +```jsx +import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; +``` + +The rich version of the Tree View component receives its items dynamically from an external data source. +This is the recommended version for larger trees, as well as those that require more advanced features like editing and virtualization. + +{{"demo": "BasicRichTreeView.js"}} + +### Accessibility + +The MUI X Tree View follows the [WAI-ARIA authoring practices for a tree view](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/). +The component includes many built-in [accessibility features](/x/react-tree-view/accessibility/), but it's the developer's responsibilty to provide the component with a descriptive `aria-labelledby`or `aria-label` tag—otherwise, screen readers will announce it as "tree," making it difficult for the end user to understand the purpose of the tree items. + +## TypeScript + +### Theme augmentation + +To benefit from [CSS overrides](/material-ui/customization/theme-components/#theme-style-overrides) and [default prop customization](/material-ui/customization/theme-components/#theme-default-props) with the theme, TypeScript users must import the following types. +These types use module augmentation to extend the default theme structure. + +```tsx +// Pro users: add `-pro` suffix to package name +import type {} from '@mui/x-tree-view/themeAugmentation'; + +const theme = createTheme({ + components: { + MuiRichTreeView: { + styleOverrides: { + root: { + backgroundColor: 'red', + }, + }, + }, + }, +}); +``` + +## Using this documentation + +Although the Simple and Rich Tree View share many of the same features, each version's implementation of those features differs enough that they warrant their own separate docs in most cases. +Other features, such as accessibility, work the same in both versions and are documented in the main features section of the navigation bar. diff --git a/docs/pages/x/api/tree-view/rich-tree-view.json b/docs/pages/x/api/tree-view/rich-tree-view.json index a97c841a6e9af..768cf203c6859 100644 --- a/docs/pages/x/api/tree-view/rich-tree-view.json +++ b/docs/pages/x/api/tree-view/rich-tree-view.json @@ -166,6 +166,6 @@ "forwardsRefTo": "HTMLUListElement", "filename": "/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/api/tree-view/simple-tree-view.json b/docs/pages/x/api/tree-view/simple-tree-view.json index da75d42ee0b8f..42ad9204d600c 100644 --- a/docs/pages/x/api/tree-view/simple-tree-view.json +++ b/docs/pages/x/api/tree-view/simple-tree-view.json @@ -121,6 +121,6 @@ "forwardsRefTo": "HTMLUListElement", "filename": "/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json index f1383007b5fe1..434b948c7af17 100644 --- a/docs/pages/x/api/tree-view/tree-item.json +++ b/docs/pages/x/api/tree-view/tree-item.json @@ -124,6 +124,6 @@ "forwardsRefTo": "HTMLLIElement", "filename": "/packages/x-tree-view/src/TreeItem/TreeItem.tsx", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/x/react-charts/getting-started.js b/docs/pages/x/react-charts/quickstart.js similarity index 66% rename from docs/pages/x/react-charts/getting-started.js rename to docs/pages/x/react-charts/quickstart.js index fcb53b26968b1..d4a6aaa15a74b 100644 --- a/docs/pages/x/react-charts/getting-started.js +++ b/docs/pages/x/react-charts/quickstart.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/charts/getting-started/getting-started.md?muiMarkdown'; +import * as pageProps from 'docsx/data/charts/quickstart/quickstart.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/demo.js b/docs/pages/x/react-data-grid/features.js similarity index 70% rename from docs/pages/x/react-data-grid/demo.js rename to docs/pages/x/react-data-grid/features.js index 0e8f0e21416c6..8054866320172 100644 --- a/docs/pages/x/react-data-grid/demo.js +++ b/docs/pages/x/react-data-grid/features.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/demo/demo.md?muiMarkdown'; +import * as pageProps from 'docsx/data/data-grid/features/features.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-data-grid/getting-started.js b/docs/pages/x/react-data-grid/quickstart.js similarity index 65% rename from docs/pages/x/react-data-grid/getting-started.js rename to docs/pages/x/react-data-grid/quickstart.js index 005cd237802b2..82b409fc3d4a2 100644 --- a/docs/pages/x/react-data-grid/getting-started.js +++ b/docs/pages/x/react-data-grid/quickstart.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/data-grid/getting-started/getting-started.md?muiMarkdown'; +import * as pageProps from 'docsx/data/data-grid/quickstart/quickstart.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-date-pickers/getting-started.js b/docs/pages/x/react-date-pickers/quickstart.js similarity index 65% rename from docs/pages/x/react-date-pickers/getting-started.js rename to docs/pages/x/react-date-pickers/quickstart.js index a158c4ae22ba2..0bd6a4c47f663 100644 --- a/docs/pages/x/react-date-pickers/getting-started.js +++ b/docs/pages/x/react-date-pickers/quickstart.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/getting-started/getting-started.md?muiMarkdown'; +import * as pageProps from 'docsx/data/date-pickers/quickstart/quickstart.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/pages/x/react-tree-view/getting-started.js b/docs/pages/x/react-tree-view/getting-started.js deleted file mode 100644 index f0279289f29b2..0000000000000 --- a/docs/pages/x/react-tree-view/getting-started.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/tree-view/getting-started/getting-started.md?muiMarkdown'; - -export default function Page() { - return ; -} diff --git a/docs/pages/x/react-date-pickers/faq.js b/docs/pages/x/react-tree-view/quickstart.js similarity index 67% rename from docs/pages/x/react-date-pickers/faq.js rename to docs/pages/x/react-tree-view/quickstart.js index d99c53ff3582d..c212c50d2b434 100644 --- a/docs/pages/x/react-date-pickers/faq.js +++ b/docs/pages/x/react-tree-view/quickstart.js @@ -1,6 +1,6 @@ import * as React from 'react'; import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import * as pageProps from 'docsx/data/date-pickers/faq/faq.md?muiMarkdown'; +import * as pageProps from 'docsx/data/tree-view/quickstart/quickstart.md?muiMarkdown'; export default function Page() { return ; diff --git a/docs/public/_redirects b/docs/public/_redirects index d025efe45dd55..bbefb47723e45 100644 --- a/docs/public/_redirects +++ b/docs/public/_redirects @@ -61,5 +61,11 @@ # 2024 /x/react-charts/heat-map/ /x/react-charts/heatmap/ 301 /x/react-charts/tree-map/ /x/react-charts/treemap/ 301 +# 2025 +/x/react-charts/getting-started/ /x/react-charts/quickstart/ 301 +/x/react-data-grid/getting-started/ /x/react-data-grid/quickstart/ 301 +/x/react-date-pickers/getting-started/ /x/react-date-pickers/quickstart/ 301 +/x/react-tree-view/getting-started/ /x/react-tree-view/quickstart/ 301 +/x/react-data-grid/demo/ /x/react-data-grid/features/ 301 # Proxies diff --git a/docsTech/README.md b/docsTech/README.md index 0bd0f70fede6e..623f821d468c7 100644 --- a/docsTech/README.md +++ b/docsTech/README.md @@ -2,8 +2,8 @@

MUI X DataGrid overview

-Welcome in the documentation for contributors. If you want to use DataGrid components for your project, the [documentation for developers](https://mui.com/x/react-data-grid/getting-started/) is more appropriate. -Here we will discuss how the code is structured, to simplify codebase navigation, and onboard new contributors. +Welcome to the documentation for contributors. If you want to use Data Grid components for your project, the [documentation for developers](https://mui.com/x/react-data-grid/) is more appropriate. +Here we discuss how the code is structured to simplify codebase navigation and onboard new contributors. ## Where is the code? diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx index c470e57eebff7..43eafe3c9737e 100644 --- a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx +++ b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx @@ -1128,8 +1128,8 @@ interface DataGridPremiumComponent { } /** - * Demos: - * - [DataGridPremium](https://mui.com/x/react-data-grid/demo/) + * Features: + * - [DataGridPremium](https://mui.com/x/react-data-grid/features/) * * API: * - [DataGridPremium API](https://mui.com/x/api/data-grid/data-grid-premium/) diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx index b5e5db188f596..e294605d3e477 100644 --- a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx +++ b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx @@ -59,8 +59,8 @@ interface DataGridProComponent { } /** - * Demos: - * - [DataGridPro](https://mui.com/x/react-data-grid/demo/) + * Features: + * - [DataGridPro](https://mui.com/x/react-data-grid/features/) * * API: * - [DataGridPro API](https://mui.com/x/api/data-grid/data-grid-pro/) diff --git a/packages/x-data-grid/src/DataGrid/DataGrid.tsx b/packages/x-data-grid/src/DataGrid/DataGrid.tsx index f1c596141ed89..65564724e454c 100644 --- a/packages/x-data-grid/src/DataGrid/DataGrid.tsx +++ b/packages/x-data-grid/src/DataGrid/DataGrid.tsx @@ -52,8 +52,8 @@ interface DataGridComponent { } /** - * Demos: - * - [DataGrid](https://mui.com/x/react-data-grid/demo/) + * Features: + * - [DataGrid](https://mui.com/x/react-data-grid/features/) * * API: * - [DataGrid API](https://mui.com/x/api/data-grid/data-grid/) diff --git a/test/e2e-website/data-grid.spec.ts b/test/e2e-website/data-grid.spec.ts index 8741370add69e..26d75a3118b43 100644 --- a/test/e2e-website/data-grid.spec.ts +++ b/test/e2e-website/data-grid.spec.ts @@ -6,7 +6,7 @@ const test = base.extend({}); test.describe('DataGrid docs', () => { test('should have correct link with hash in the TOC', async ({ page }) => { - await page.goto(`/x/react-data-grid/getting-started/`); + await page.goto(`/x/react-data-grid/quickstart/`); const anchors = page.locator('[aria-label="Page table of contents"] ul a'); @@ -15,7 +15,7 @@ test.describe('DataGrid docs', () => { await expect(firstAnchor).toHaveAttribute( 'href', - `/x/react-data-grid/getting-started/#${kebabCase(textContent || '')}`, + `/x/react-data-grid/quickstart/#${kebabCase(textContent || '')}`, ); }); @@ -90,7 +90,7 @@ test.describe('DataGrid docs', () => { // } // }; // test('should have correct link when searching component', async ({ page }) => { - // await page.goto(`/x/react-data-grid/getting-started/`); + // await page.goto(`/x/react-data-grid/quickstart/`); // await retryToggleSearch(page); @@ -106,7 +106,7 @@ test.describe('DataGrid docs', () => { // }); // test('should have correct link when searching API', async ({ page }) => { - // await page.goto(`/x/react-data-grid/getting-started/`); + // await page.goto(`/x/react-data-grid/quickstart/`); // await retryToggleSearch(page); @@ -122,7 +122,7 @@ test.describe('DataGrid docs', () => { // }); // test('should have correct link when searching pro API', async ({ page }) => { - // await page.goto(`/x/react-data-grid/getting-started/`); + // await page.goto(`/x/react-data-grid/quickstart/`); // await retryToggleSearch(page); From fc6cd07926923c62dcd087947e48d6e7764f714d Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Fri, 7 Feb 2025 13:25:27 -0500 Subject: [PATCH 4/6] [DataGrid] Refactor: create base MenuList props (#16481) --- .../src/components/cell/GridActionsCell.tsx | 1 - packages/x-data-grid/src/material/index.tsx | 6 +++++- packages/x-data-grid/src/models/gridBaseSlots.ts | 10 ++++++++++ .../x-data-grid/src/models/gridSlotsComponentsProps.ts | 2 +- 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/x-data-grid/src/components/cell/GridActionsCell.tsx b/packages/x-data-grid/src/components/cell/GridActionsCell.tsx index 1f3d2cdca42db..670214537171a 100644 --- a/packages/x-data-grid/src/components/cell/GridActionsCell.tsx +++ b/packages/x-data-grid/src/components/cell/GridActionsCell.tsx @@ -235,7 +235,6 @@ function GridActionsCell(props: GridActionsCellProps) { className={gridClasses.menuList} onKeyDown={handleListKeyDown} aria-labelledby={buttonId} - variant="menu" autoFocusItem > {menuButtons.map((button, index) => diff --git a/packages/x-data-grid/src/material/index.tsx b/packages/x-data-grid/src/material/index.tsx index 2183e8f16ff94..40465440c74d5 100644 --- a/packages/x-data-grid/src/material/index.tsx +++ b/packages/x-data-grid/src/material/index.tsx @@ -97,7 +97,7 @@ const baseSlots: GridBaseSlots = { baseCircularProgress: MUICircularProgress, baseDivider: MUIDivider, baseLinearProgress: MUILinearProgress, - baseMenuList: MUIMenuList, + baseMenuList: BaseMenuList, baseMenuItem: BaseMenuItem, baseTextField: BaseTextField, baseFormControl: MUIFormControl, @@ -120,6 +120,10 @@ const materialSlots: GridBaseSlots & GridIconSlotsComponent = { export default materialSlots; +function BaseMenuList(props: GridSlotProps['baseMenuList']) { + return ; +} + function BaseMenuItem(props: GridSlotProps['baseMenuItem']) { const { inert, iconStart, iconEnd, children, ...other } = props; if (inert) { diff --git a/packages/x-data-grid/src/models/gridBaseSlots.ts b/packages/x-data-grid/src/models/gridBaseSlots.ts index 694f6e545a2e2..a6965f534034f 100644 --- a/packages/x-data-grid/src/models/gridBaseSlots.ts +++ b/packages/x-data-grid/src/models/gridBaseSlots.ts @@ -35,6 +35,16 @@ export type IconButtonProps = Omit & { export type DividerProps = {}; +export type MenuListProps = { + ref?: Ref; + id?: string; + className?: string; + children?: React.ReactNode; + autoFocus?: boolean; + autoFocusItem?: boolean; + onKeyDown?: React.KeyboardEventHandler; +}; + export type MenuItemProps = { autoFocus?: boolean; children?: React.ReactNode; diff --git a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts index cda12ab2fd835..80237ecd19fa5 100644 --- a/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts +++ b/packages/x-data-grid/src/models/gridSlotsComponentsProps.ts @@ -4,7 +4,6 @@ import type { ButtonProps as MUIButtonProps } from '@mui/material/Button'; import type { CheckboxProps } from '@mui/material/Checkbox'; import type { CircularProgressProps as MUICircularProgressProps } from '@mui/material/CircularProgress'; import type { LinearProgressProps as MUILinearProgressProps } from '@mui/material/LinearProgress'; -import type { MenuListProps } from '@mui/material/MenuList'; import type { MenuItemProps as MUIMenuItemProps } from '@mui/material/MenuItem'; import type { FormControlProps } from '@mui/material/FormControl'; import type { SelectProps } from '@mui/material/Select'; @@ -41,6 +40,7 @@ import type { DividerProps, IconButtonProps, LinearProgressProps, + MenuListProps, MenuItemProps, SkeletonProps, TooltipProps, From d259518133b0bd4fea1b6c09fb1f2da5f4d32d1c Mon Sep 17 00:00:00 2001 From: Rom Grk Date: Fri, 7 Feb 2025 13:46:56 -0500 Subject: [PATCH 5/6] [DataGrid] Refactor: create base Select (#16394) --- .../GridColumnMenuAggregationItem.tsx | 81 ++++---- .../cell/GridEditSingleSelectCell.tsx | 20 +- .../panel/filterPanel/GridFilterForm.tsx | 185 +++++++----------- .../filterPanel/GridFilterInputBoolean.tsx | 86 ++++---- .../GridFilterInputSingleSelect.tsx | 67 +++---- .../material/components/MUISelectOption.tsx | 13 -- packages/x-data-grid/src/material/index.tsx | 70 ++++++- .../x-data-grid/src/models/gridBaseSlots.ts | 34 ++++ .../src/models/gridSlotsComponentsProps.ts | 11 +- 9 files changed, 287 insertions(+), 280 deletions(-) delete mode 100644 packages/x-data-grid/src/material/components/MUISelectOption.tsx diff --git a/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx b/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx index 4bbe750029925..a041be74bb7b8 100644 --- a/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx +++ b/packages/x-data-grid-premium/src/components/GridColumnMenuAggregationItem.tsx @@ -1,10 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { GridColumnMenuItemProps, useGridSelector } from '@mui/x-data-grid-pro'; -import FormControl from '@mui/material/FormControl'; -import InputLabel from '@mui/material/InputLabel'; import { unstable_useId as useId } from '@mui/utils'; -import { SelectChangeEvent } from '@mui/material/Select'; import { useGridApiContext } from '../hooks/utils/useGridApiContext'; import { useGridRootProps } from '../hooks/utils/useGridRootProps'; import { @@ -55,7 +52,7 @@ function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps) { return ''; }, [rootProps.aggregationFunctions, rootProps.unstable_dataSource, aggregationModel, colDef]); - const handleAggregationItemChange = (event: SelectChangeEvent) => { + const handleAggregationItemChange = (event: React.ChangeEvent) => { const newAggregationItem = (event.target as HTMLSelectElement | null)?.value || undefined; const currentModel = gridAggregationModelSelector(apiRef); const { [colDef.field]: columnItem, ...otherColumnItems } = currentModel; @@ -88,53 +85,49 @@ function GridColumnMenuAggregationItem(props: GridColumnMenuItemProps) { iconStart={} onKeyDown={handleMenuItemKeyDown} > - - - {label} - - event.stopPropagation()} + event.stopPropagation()} + native={isBaseSelectNative} + fullWidth + size="small" + style={{ minWidth: 150 }} + slotProps={{ + htmlInput: { + ref: inputRef, + }, + }} + {...baseSelectProps} + > + + ... + + {availableAggregationFunctions.map((aggFunc) => ( - ... + {getAggregationFunctionLabel({ + apiRef, + aggregationRule: { + aggregationFunctionName: aggFunc, + aggregationFunction: rootProps.aggregationFunctions[aggFunc], + }, + })} - {availableAggregationFunctions.map((aggFunc) => ( - - {getAggregationFunctionLabel({ - apiRef, - aggregationRule: { - aggregationFunctionName: aggFunc, - aggregationFunction: rootProps.aggregationFunctions[aggFunc], - }, - })} - - ))} - - + ))} + ); } diff --git a/packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx b/packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx index 90e8b042441ba..47e00aed86702 100644 --- a/packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx +++ b/packages/x-data-grid/src/components/cell/GridEditSingleSelectCell.tsx @@ -54,6 +54,7 @@ function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps) { error, onValueChange, initialOpen = rootProps.editMode === GridEditModes.Cell, + slotProps, ...other } = props; @@ -64,7 +65,6 @@ function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps) { const baseSelectProps = rootProps.slotProps?.baseSelect || {}; const isSelectNative = baseSelectProps.native ?? false; - const { MenuProps, ...otherBaseSelectProps } = rootProps.slotProps?.baseSelect || {}; useEnhancedEffect(() => { if (hasFocus) { @@ -84,7 +84,7 @@ function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps) { const getOptionValue = colDef.getOptionValue!; const getOptionLabel = colDef.getOptionLabel!; - const handleChange: SelectProps['onChange'] = async (event) => { + const handleChange: React.ChangeEventHandler = async (event) => { if (!isSingleSelectColDef(colDef) || !valueOptions) { return; } @@ -136,20 +136,22 @@ function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps) { return ( {valueOptions.map((valueOption) => { const value = getOptionValue(valueOption); diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx index b9af78567008e..6b5f6989d7652 100644 --- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx +++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx @@ -245,7 +245,6 @@ const GridFilterForm = forwardRef( const baseSelectProps = rootProps.slotProps?.baseSelect || {}; const isBaseSelectNative = baseSelectProps.native ?? false; - const baseInputLabelProps = rootProps.slotProps?.baseInputLabel || {}; const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {}; const { InputComponentProps, ...valueInputPropsOther } = valueInputProps; @@ -445,11 +444,7 @@ const GridFilterForm = forwardRef( ( : { visibility: 'hidden', }, - baseFormControlProps.sx, logicOperatorInputProps.sx, ]} - className={clsx( - classes.logicOperatorInput, - baseFormControlProps.className, - logicOperatorInputProps.className, - )} + className={clsx(classes.logicOperatorInput, logicOperatorInputProps.className)} ownerState={rootProps} - > - - {logicOperators.map((logicOperator) => ( - - {apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))} - - ))} - + }, + }} + value={multiFilterOperator ?? ''} + onChange={changeLogicOperator} + disabled={!!disableMultiFilterOperator || logicOperators.length === 1} + native={isBaseSelectNative} + {...rootProps.slotProps?.baseSelect} + > + {logicOperators.map((logicOperator) => ( + + {apiRef.current.getLocaleText(getLogicOperatorLocaleKey(logicOperator))} + + ))} - - {apiRef.current.getLocaleText('filterPanelColumns')} - - - {sortedFilteredColumns.map((col) => ( - - {getColumnLabel(col)} - - ))} - + {sortedFilteredColumns.map((col) => ( + + {getColumnLabel(col)} + + ))} - - {apiRef.current.getLocaleText('filterPanelOperator')} - - - {currentColumn?.filterOperators?.map((operator) => ( - - {operator.label || - apiRef.current.getLocaleText( - `filterOperator${capitalize(operator.value)}` as 'filterOperatorContains', - )} - - ))} - + {currentColumn?.filterOperators?.map((operator) => ( + + {operator.label || + apiRef.current.getLocaleText( + `filterOperator${capitalize(operator.value)}` as 'filterOperatorContains', + )} + + ))} {currentOperator?.InputComponent ? ( diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx index 2066e94855af2..1a40e70f15459 100644 --- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx +++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputBoolean.tsx @@ -52,59 +52,47 @@ function GridFilterInputBoolean(props: GridFilterInputBooleanProps) { return ( - - - {label} - - + + {apiRef.current.getLocaleText('filterValueAny')} + + + {apiRef.current.getLocaleText('filterValueTrue')} + + - - {apiRef.current.getLocaleText('filterValueAny')} - - - {apiRef.current.getLocaleText('filterValueTrue')} - - - {apiRef.current.getLocaleText('filterValueFalse')} - - - + {apiRef.current.getLocaleText('filterValueFalse')} + + {headerFilterMenu} {clearButton} diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx index c710e07f7ebc3..fdfefff6116f4 100644 --- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx +++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { unstable_useId as useId } from '@mui/utils'; -import { SelectChangeEvent } from '@mui/material/Select'; import { TextFieldProps } from '../../../models/gridBaseSlots'; import { GridFilterInputValueProps } from '../../../models/gridFilterInputComponent'; import { GridSingleSelectColDef } from '../../../models/colDef/gridColDef'; @@ -86,7 +85,7 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) { }, [resolvedColumn]); const onFilterChange = React.useCallback( - (event: SelectChangeEvent) => { + (event: React.ChangeEvent) => { let value = event.target.value; // NativeSelect casts the value to a string. @@ -104,50 +103,38 @@ function GridFilterInputSingleSelect(props: GridFilterInputSingleSelectProps) { return ( - - - {label} - - - {renderSingleSelectOptions({ - column: resolvedColumn, - OptionComponent: rootProps.slots.baseSelectOption, - getOptionLabel, - getOptionValue, - isSelectNative, - baseSelectOptionProps: rootProps.slotProps?.baseSelectOption, - })} - - + }, + }} + native={isSelectNative} + {...rootProps.slotProps?.baseSelect} + {...others} + {...slotProps?.root} + > + {renderSingleSelectOptions({ + column: resolvedColumn, + OptionComponent: rootProps.slots.baseSelectOption, + getOptionLabel, + getOptionValue, + isSelectNative, + baseSelectOptionProps: rootProps.slotProps?.baseSelectOption, + })} + {headerFilterMenu} {clearButton} diff --git a/packages/x-data-grid/src/material/components/MUISelectOption.tsx b/packages/x-data-grid/src/material/components/MUISelectOption.tsx deleted file mode 100644 index a932dc85f46ca..0000000000000 --- a/packages/x-data-grid/src/material/components/MUISelectOption.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import * as React from 'react'; -import MUIMenuItem from '@mui/material/MenuItem'; -import type { GridSlotsComponentsProps } from '../../models/gridSlotsComponentsProps'; - -export default function MUISelectOption({ - native, - ...props -}: NonNullable) { - if (native) { - return