diff --git a/docs/pages/x/api/charts/area-element.json b/docs/pages/x/api/charts/area-element.json index 2d28a9e84535..88a03febfead 100644 --- a/docs/pages/x/api/charts/area-element.json +++ b/docs/pages/x/api/charts/area-element.json @@ -3,7 +3,14 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [ + { + "class": null, + "name": "area", + "description": "The component that renders the root.", + "default": "AreaElementPath" + } + ], "name": "AreaElement", "imports": [ "import { AreaElement } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/area-plot.json b/docs/pages/x/api/charts/area-plot.json index 8314d42eea7b..8f1a7a0793cf 100644 --- a/docs/pages/x/api/charts/area-plot.json +++ b/docs/pages/x/api/charts/area-plot.json @@ -3,7 +3,14 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [ + { + "class": null, + "name": "area", + "description": "The component that renders the root.", + "default": "AreaElementPath" + } + ], "name": "AreaPlot", "imports": [ "import { AreaPlot } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index e50ae45c3a0f..8bbff0857a77 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -35,7 +35,17 @@ "default": "null" } }, - "slots": [], + "slots": [ + { "class": null, "name": "axisContent", "description": "" }, + { "class": null, "name": "axisLabel", "description": "" }, + { "class": null, "name": "axisLine", "description": "" }, + { "class": null, "name": "axisTick", "description": "" }, + { "class": null, "name": "axisTickLabel", "description": "" }, + { "class": null, "name": "bar", "description": "" }, + { "class": null, "name": "itemContent", "description": "" }, + { "class": null, "name": "legend", "description": "" }, + { "class": null, "name": "popper", "description": "" } + ], "name": "BarChart", "imports": [ "import { BarChart } from '@mui/x-charts/BarChart';", diff --git a/docs/pages/x/api/charts/bar-plot.json b/docs/pages/x/api/charts/bar-plot.json index 9ce5a22fa9fc..1c3a017e0f3e 100644 --- a/docs/pages/x/api/charts/bar-plot.json +++ b/docs/pages/x/api/charts/bar-plot.json @@ -4,7 +4,14 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [ + { + "class": null, + "name": "bar", + "description": "The component that renders the root.", + "default": "BarElementPath" + } + ], "name": "BarPlot", "imports": [ "import { BarPlot } from '@mui/x-charts/BarChart';", diff --git a/docs/pages/x/api/charts/charts-axis.json b/docs/pages/x/api/charts/charts-axis.json index bf524fb1148a..c198f3032049 100644 --- a/docs/pages/x/api/charts/charts-axis.json +++ b/docs/pages/x/api/charts/charts-axis.json @@ -31,7 +31,12 @@ "default": "null" } }, - "slots": [], + "slots": [ + { "class": null, "name": "axisLabel", "description": "" }, + { "class": null, "name": "axisLine", "description": "" }, + { "class": null, "name": "axisTick", "description": "" }, + { "class": null, "name": "axisTickLabel", "description": "" } + ], "name": "ChartsAxis", "imports": [ "import { ChartsAxis } from '@mui/x-charts/ChartsAxis';", diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json index 232e1b84b8ad..3a35f708fbea 100644 --- a/docs/pages/x/api/charts/charts-tooltip.json +++ b/docs/pages/x/api/charts/charts-tooltip.json @@ -21,7 +21,11 @@ "default": "'item'" } }, - "slots": [], + "slots": [ + { "class": null, "name": "axisContent", "description": "" }, + { "class": null, "name": "itemContent", "description": "" }, + { "class": null, "name": "popper", "description": "" } + ], "name": "ChartsTooltip", "imports": [ "import { ChartsTooltip } from '@mui/x-charts/ChartsTooltip';", diff --git a/docs/pages/x/api/charts/charts-x-axis.json b/docs/pages/x/api/charts/charts-x-axis.json index ce99eb0bae3b..9580898464ea 100644 --- a/docs/pages/x/api/charts/charts-x-axis.json +++ b/docs/pages/x/api/charts/charts-x-axis.json @@ -37,7 +37,12 @@ "tickNumber": { "type": { "name": "number" } }, "tickSize": { "type": { "name": "number" }, "default": "6" } }, - "slots": [], + "slots": [ + { "class": null, "name": "axisLabel", "description": "" }, + { "class": null, "name": "axisLine", "description": "" }, + { "class": null, "name": "axisTick", "description": "" }, + { "class": null, "name": "axisTickLabel", "description": "" } + ], "name": "ChartsXAxis", "imports": [ "import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';", diff --git a/docs/pages/x/api/charts/charts-y-axis.json b/docs/pages/x/api/charts/charts-y-axis.json index 812cac2fcade..24b012f47388 100644 --- a/docs/pages/x/api/charts/charts-y-axis.json +++ b/docs/pages/x/api/charts/charts-y-axis.json @@ -37,7 +37,12 @@ "tickNumber": { "type": { "name": "number" } }, "tickSize": { "type": { "name": "number" }, "default": "6" } }, - "slots": [], + "slots": [ + { "class": null, "name": "axisLabel", "description": "" }, + { "class": null, "name": "axisLine", "description": "" }, + { "class": null, "name": "axisTick", "description": "" }, + { "class": null, "name": "axisTickLabel", "description": "" } + ], "name": "ChartsYAxis", "imports": [ "import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';", diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index cea5dbd5a046..58f9a9f375d6 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -35,7 +35,20 @@ "default": "null" } }, - "slots": [], + "slots": [ + { "class": null, "name": "area", "description": "" }, + { "class": null, "name": "axisContent", "description": "" }, + { "class": null, "name": "axisLabel", "description": "" }, + { "class": null, "name": "axisLine", "description": "" }, + { "class": null, "name": "axisTick", "description": "" }, + { "class": null, "name": "axisTickLabel", "description": "" }, + { "class": null, "name": "itemContent", "description": "" }, + { "class": null, "name": "legend", "description": "" }, + { "class": null, "name": "line", "description": "" }, + { "class": null, "name": "lineHighlight", "description": "" }, + { "class": null, "name": "mark", "description": "" }, + { "class": null, "name": "popper", "description": "" } + ], "name": "LineChart", "imports": [ "import { LineChart } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/line-element.json b/docs/pages/x/api/charts/line-element.json index 4b97cc5ba930..3a088bc7acbe 100644 --- a/docs/pages/x/api/charts/line-element.json +++ b/docs/pages/x/api/charts/line-element.json @@ -3,7 +3,14 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [ + { + "class": null, + "name": "line", + "description": "The component that renders the root.", + "default": "LineElementPath" + } + ], "name": "LineElement", "imports": [ "import { LineElement } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/line-highlight-plot.json b/docs/pages/x/api/charts/line-highlight-plot.json index 7843dba61f12..c939c5af6d81 100644 --- a/docs/pages/x/api/charts/line-highlight-plot.json +++ b/docs/pages/x/api/charts/line-highlight-plot.json @@ -3,7 +3,7 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [{ "class": null, "name": "lineHighlight", "description": "" }], "name": "LineHighlightPlot", "imports": [ "import { LineHighlightPlot } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/line-plot.json b/docs/pages/x/api/charts/line-plot.json index f1823692c922..7a88452cd614 100644 --- a/docs/pages/x/api/charts/line-plot.json +++ b/docs/pages/x/api/charts/line-plot.json @@ -3,7 +3,14 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [ + { + "class": null, + "name": "line", + "description": "The component that renders the root.", + "default": "LineElementPath" + } + ], "name": "LinePlot", "imports": [ "import { LinePlot } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/mark-plot.json b/docs/pages/x/api/charts/mark-plot.json index b35f000735a2..25c608bdbdaf 100644 --- a/docs/pages/x/api/charts/mark-plot.json +++ b/docs/pages/x/api/charts/mark-plot.json @@ -3,7 +3,7 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [{ "class": null, "name": "mark", "description": "" }], "name": "MarkPlot", "imports": [ "import { MarkPlot } from '@mui/x-charts/LineChart';", diff --git a/docs/pages/x/api/charts/pie-plot.json b/docs/pages/x/api/charts/pie-plot.json index 9ed3ce567fd6..d6c6ff13d881 100644 --- a/docs/pages/x/api/charts/pie-plot.json +++ b/docs/pages/x/api/charts/pie-plot.json @@ -11,7 +11,10 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [ + { "class": null, "name": "pieArc", "description": "" }, + { "class": null, "name": "pieArcLabel", "description": "" } + ], "name": "PiePlot", "imports": [ "import { PiePlot } from '@mui/x-charts/PieChart';", diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index 9d956a28bf6d..c6f231f5a69b 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -34,7 +34,17 @@ "default": "null" } }, - "slots": [], + "slots": [ + { "class": null, "name": "axisContent", "description": "" }, + { "class": null, "name": "axisLabel", "description": "" }, + { "class": null, "name": "axisLine", "description": "" }, + { "class": null, "name": "axisTick", "description": "" }, + { "class": null, "name": "axisTickLabel", "description": "" }, + { "class": null, "name": "itemContent", "description": "" }, + { "class": null, "name": "legend", "description": "" }, + { "class": null, "name": "popper", "description": "" }, + { "class": null, "name": "scatter", "description": "" } + ], "name": "ScatterChart", "imports": [ "import { ScatterChart } from '@mui/x-charts/ScatterChart';", diff --git a/docs/pages/x/api/charts/scatter-plot.json b/docs/pages/x/api/charts/scatter-plot.json index 7e44a83dd7de..a3a337d14e88 100644 --- a/docs/pages/x/api/charts/scatter-plot.json +++ b/docs/pages/x/api/charts/scatter-plot.json @@ -3,7 +3,7 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": [], + "slots": [{ "class": null, "name": "scatter", "description": "" }], "name": "ScatterPlot", "imports": [ "import { ScatterPlot } from '@mui/x-charts/ScatterChart';", diff --git a/docs/pages/x/api/charts/spark-line-chart.json b/docs/pages/x/api/charts/spark-line-chart.json index fabe4546256d..7adb9df48fcf 100644 --- a/docs/pages/x/api/charts/spark-line-chart.json +++ b/docs/pages/x/api/charts/spark-line-chart.json @@ -31,7 +31,16 @@ } } }, - "slots": [], + "slots": [ + { "class": null, "name": "area", "description": "" }, + { "class": null, "name": "axisContent", "description": "" }, + { "class": null, "name": "bar", "description": "" }, + { "class": null, "name": "itemContent", "description": "" }, + { "class": null, "name": "line", "description": "" }, + { "class": null, "name": "lineHighlight", "description": "" }, + { "class": null, "name": "mark", "description": "" }, + { "class": null, "name": "popper", "description": "" } + ], "name": "SparkLineChart", "imports": [ "import { SparkLineChart } from '@mui/x-charts/SparkLineChart';", diff --git a/docs/pages/x/api/date-pickers/pickers-calendar-header.json b/docs/pages/x/api/date-pickers/pickers-calendar-header.json index f12af2c0a973..836c73a2106c 100644 --- a/docs/pages/x/api/date-pickers/pickers-calendar-header.json +++ b/docs/pages/x/api/date-pickers/pickers-calendar-header.json @@ -2,6 +2,18 @@ "props": { "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, "className": { "type": { "name": "string" } }, + "components": { + "type": { "name": "object" }, + "default": "{}", + "deprecated": true, + "deprecationInfo": "Please use slots." + }, + "componentsProps": { + "type": { "name": "object" }, + "default": "{}", + "deprecated": true, + "deprecationInfo": "Please use slotProps." + }, "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" }, "sx": { @@ -12,7 +24,44 @@ "additionalInfo": { "sx": true } } }, - "slots": [], + "slots": [ + { + "class": null, + "name": "leftArrowIcon", + "description": "Icon displayed in the left view switch button.", + "default": "ArrowLeft" + }, + { + "class": null, + "name": "nextIconButton", + "description": "Button allowing to switch to the right view.", + "default": "IconButton" + }, + { + "class": null, + "name": "previousIconButton", + "description": "Button allowing to switch to the left view.", + "default": "IconButton" + }, + { + "class": null, + "name": "rightArrowIcon", + "description": "Icon displayed in the right view switch button.", + "default": "ArrowRight" + }, + { + "class": null, + "name": "switchViewButton", + "description": "Button displayed to switch between different calendar views.", + "default": "IconButton" + }, + { + "class": null, + "name": "switchViewIcon", + "description": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'.", + "default": "ArrowDropDown" + } + ], "name": "PickersCalendarHeader", "imports": [ "import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';", diff --git a/docs/scripts/api/buildComponentsDocumentation.ts b/docs/scripts/api/buildComponentsDocumentation.ts index 82a855aee980..e6f1ccae5604 100644 --- a/docs/scripts/api/buildComponentsDocumentation.ts +++ b/docs/scripts/api/buildComponentsDocumentation.ts @@ -83,11 +83,13 @@ function extractSlots(options: { project, checkDeclarations: true, shouldResolveObject: ({ name }) => { - return name === 'components'; + // TODO v7: Remove the `components` fallback once `slots` is used everywhere + return name === 'slots' || name === 'components'; }, shouldInclude: ({ name, depth }) => { // The keys allowed in the `components` prop have depth=2 - return name === 'components' || depth === 2; + // TODO v7: Remove the `components` fallback once `slots` is used everywhere + return name === 'slots' || name === 'components' || depth === 2; }, }); @@ -96,7 +98,10 @@ function extractSlots(options: { throw new Error(`No proptypes found for \`${displayName}\``); } - const componentsProps = props.types.find((type) => type.name === 'components')!; + const componentsProps = props.types.find( + // TODO v7: Remove the `components` fallback once `slots` is used everywhere + (type) => type.name === 'slots' || type.name === 'components', + )!; if (!componentsProps) { return slots; } @@ -481,7 +486,8 @@ const buildComponentDocumentation = async (options: { /** * Slot descriptions. */ - if (componentApi.propDescriptions.components) { + // TODO v7: Remove the `components` fallback once `slots` is used everywhere + if (componentApi.propDescriptions.slots || componentApi.propDescriptions.components) { const slots = extractSlots({ filename, name: reactApi.name, // e.g. DataGrid diff --git a/docs/translations/api-docs/charts/area-element.json b/docs/translations/api-docs/charts/area-element.json index fec8833da4ee..5d077363ea78 100644 --- a/docs/translations/api-docs/charts/area-element.json +++ b/docs/translations/api-docs/charts/area-element.json @@ -25,5 +25,5 @@ "conditions": "faded" } }, - "slotDescriptions": {} + "slotDescriptions": { "area": "The component that renders the root." } } diff --git a/docs/translations/api-docs/charts/area-plot.json b/docs/translations/api-docs/charts/area-plot.json index 193abb7bf3a9..c045ac6d34fd 100644 --- a/docs/translations/api-docs/charts/area-plot.json +++ b/docs/translations/api-docs/charts/area-plot.json @@ -13,5 +13,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "area": "The component that renders the root." } } diff --git a/docs/translations/api-docs/charts/bar-chart.json b/docs/translations/api-docs/charts/bar-chart.json index d2438d2ddb04..bee22b81e0d3 100644 --- a/docs/translations/api-docs/charts/bar-chart.json +++ b/docs/translations/api-docs/charts/bar-chart.json @@ -43,5 +43,15 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { + "axisContent": "", + "axisLabel": "", + "axisLine": "", + "axisTick": "", + "axisTickLabel": "", + "bar": "", + "itemContent": "", + "legend": "", + "popper": "" + } } diff --git a/docs/translations/api-docs/charts/bar-plot.json b/docs/translations/api-docs/charts/bar-plot.json index 27268d44f0ee..0df4fa1114fe 100644 --- a/docs/translations/api-docs/charts/bar-plot.json +++ b/docs/translations/api-docs/charts/bar-plot.json @@ -18,5 +18,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "bar": "The component that renders the root." } } diff --git a/docs/translations/api-docs/charts/charts-axis.json b/docs/translations/api-docs/charts/charts-axis.json index 036b1002dee3..e3e74d103228 100644 --- a/docs/translations/api-docs/charts/charts-axis.json +++ b/docs/translations/api-docs/charts/charts-axis.json @@ -55,5 +55,5 @@ "left": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the left axis" }, "right": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the right axis" } }, - "slotDescriptions": {} + "slotDescriptions": { "axisLabel": "", "axisLine": "", "axisTick": "", "axisTickLabel": "" } } diff --git a/docs/translations/api-docs/charts/charts-tooltip.json b/docs/translations/api-docs/charts/charts-tooltip.json index e35af3b98a3d..a35867dfa135 100644 --- a/docs/translations/api-docs/charts/charts-tooltip.json +++ b/docs/translations/api-docs/charts/charts-tooltip.json @@ -47,5 +47,5 @@ "nodeName": "the valueCell element" } }, - "slotDescriptions": {} + "slotDescriptions": { "axisContent": "", "itemContent": "", "popper": "" } } diff --git a/docs/translations/api-docs/charts/charts-x-axis.json b/docs/translations/api-docs/charts/charts-x-axis.json index 68c29dd7f5f0..d7bff24d1bb9 100644 --- a/docs/translations/api-docs/charts/charts-x-axis.json +++ b/docs/translations/api-docs/charts/charts-x-axis.json @@ -121,5 +121,5 @@ "left": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the left axis" }, "right": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the right axis" } }, - "slotDescriptions": {} + "slotDescriptions": { "axisLabel": "", "axisLine": "", "axisTick": "", "axisTickLabel": "" } } diff --git a/docs/translations/api-docs/charts/charts-y-axis.json b/docs/translations/api-docs/charts/charts-y-axis.json index 68c29dd7f5f0..d7bff24d1bb9 100644 --- a/docs/translations/api-docs/charts/charts-y-axis.json +++ b/docs/translations/api-docs/charts/charts-y-axis.json @@ -121,5 +121,5 @@ "left": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the left axis" }, "right": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the right axis" } }, - "slotDescriptions": {} + "slotDescriptions": { "axisLabel": "", "axisLine": "", "axisTick": "", "axisTickLabel": "" } } diff --git a/docs/translations/api-docs/charts/line-chart.json b/docs/translations/api-docs/charts/line-chart.json index 76819e02e47e..67d7f050b9cb 100644 --- a/docs/translations/api-docs/charts/line-chart.json +++ b/docs/translations/api-docs/charts/line-chart.json @@ -43,5 +43,18 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { + "area": "", + "axisContent": "", + "axisLabel": "", + "axisLine": "", + "axisTick": "", + "axisTickLabel": "", + "itemContent": "", + "legend": "", + "line": "", + "lineHighlight": "", + "mark": "", + "popper": "" + } } diff --git a/docs/translations/api-docs/charts/line-element.json b/docs/translations/api-docs/charts/line-element.json index fec8833da4ee..9ef25541e1e5 100644 --- a/docs/translations/api-docs/charts/line-element.json +++ b/docs/translations/api-docs/charts/line-element.json @@ -25,5 +25,5 @@ "conditions": "faded" } }, - "slotDescriptions": {} + "slotDescriptions": { "line": "The component that renders the root." } } diff --git a/docs/translations/api-docs/charts/line-highlight-plot.json b/docs/translations/api-docs/charts/line-highlight-plot.json index 193abb7bf3a9..852747b8f3b1 100644 --- a/docs/translations/api-docs/charts/line-highlight-plot.json +++ b/docs/translations/api-docs/charts/line-highlight-plot.json @@ -13,5 +13,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "lineHighlight": "" } } diff --git a/docs/translations/api-docs/charts/line-plot.json b/docs/translations/api-docs/charts/line-plot.json index 193abb7bf3a9..1d035d210533 100644 --- a/docs/translations/api-docs/charts/line-plot.json +++ b/docs/translations/api-docs/charts/line-plot.json @@ -13,5 +13,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "line": "The component that renders the root." } } diff --git a/docs/translations/api-docs/charts/mark-plot.json b/docs/translations/api-docs/charts/mark-plot.json index 193abb7bf3a9..04790a6a5575 100644 --- a/docs/translations/api-docs/charts/mark-plot.json +++ b/docs/translations/api-docs/charts/mark-plot.json @@ -13,5 +13,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "mark": "" } } diff --git a/docs/translations/api-docs/charts/pie-plot.json b/docs/translations/api-docs/charts/pie-plot.json index 74758708869a..326efd758310 100644 --- a/docs/translations/api-docs/charts/pie-plot.json +++ b/docs/translations/api-docs/charts/pie-plot.json @@ -27,5 +27,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "pieArc": "", "pieArcLabel": "" } } diff --git a/docs/translations/api-docs/charts/scatter-chart.json b/docs/translations/api-docs/charts/scatter-chart.json index e785806eeef7..03154c1e5ef1 100644 --- a/docs/translations/api-docs/charts/scatter-chart.json +++ b/docs/translations/api-docs/charts/scatter-chart.json @@ -38,5 +38,15 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { + "axisContent": "", + "axisLabel": "", + "axisLine": "", + "axisTick": "", + "axisTickLabel": "", + "itemContent": "", + "legend": "", + "popper": "", + "scatter": "" + } } diff --git a/docs/translations/api-docs/charts/scatter-plot.json b/docs/translations/api-docs/charts/scatter-plot.json index 193abb7bf3a9..67c937d9f281 100644 --- a/docs/translations/api-docs/charts/scatter-plot.json +++ b/docs/translations/api-docs/charts/scatter-plot.json @@ -13,5 +13,5 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { "scatter": "" } } diff --git a/docs/translations/api-docs/charts/spark-line-chart.json b/docs/translations/api-docs/charts/spark-line-chart.json index f07c45c29efb..6c1257c5611a 100644 --- a/docs/translations/api-docs/charts/spark-line-chart.json +++ b/docs/translations/api-docs/charts/spark-line-chart.json @@ -45,5 +45,14 @@ } }, "classDescriptions": {}, - "slotDescriptions": {} + "slotDescriptions": { + "area": "", + "axisContent": "", + "bar": "", + "itemContent": "", + "line": "", + "lineHighlight": "", + "mark": "", + "popper": "" + } } diff --git a/docs/translations/api-docs/date-pickers/pickers-calendar-header.json b/docs/translations/api-docs/date-pickers/pickers-calendar-header.json index fa256e342ed4..19ae10c1e8b1 100644 --- a/docs/translations/api-docs/date-pickers/pickers-calendar-header.json +++ b/docs/translations/api-docs/date-pickers/pickers-calendar-header.json @@ -11,6 +11,16 @@ "deprecated": "", "typeDescriptions": {} }, + "components": { + "description": "Overridable components.", + "deprecated": "", + "typeDescriptions": {} + }, + "componentsProps": { + "description": "The props used for each component slot.", + "deprecated": "", + "typeDescriptions": {} + }, "slotProps": { "description": "The props used for each component slot.", "deprecated": "", @@ -43,5 +53,12 @@ "nodeName": "the switch view icon element" } }, - "slotDescriptions": {} + "slotDescriptions": { + "leftArrowIcon": "Icon displayed in the left view switch button.", + "nextIconButton": "Button allowing to switch to the right view.", + "previousIconButton": "Button allowing to switch to the left view.", + "rightArrowIcon": "Icon displayed in the right view switch button.", + "switchViewButton": "Button displayed to switch between different calendar views.", + "switchViewIcon": "Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'." + } } diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx index 0ec2ca240771..0594e71c820c 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx +++ b/packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx @@ -2,106 +2,26 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import Fade from '@mui/material/Fade'; -import { styled, SxProps, Theme, useThemeProps } from '@mui/material/styles'; -import { SlotComponentProps, useSlotProps } from '@mui/base/utils'; +import { styled, useThemeProps } from '@mui/material/styles'; +import { useSlotProps } from '@mui/base/utils'; import { unstable_composeClasses as composeClasses } from '@mui/utils'; import IconButton from '@mui/material/IconButton'; -import SvgIcon from '@mui/material/SvgIcon'; -import { SlideDirection } from '../DateCalendar/PickersSlideTransition'; import { useLocaleText, useUtils } from '../internals/hooks/useUtils'; import { PickersFadeTransitionGroup } from '../DateCalendar/PickersFadeTransitionGroup'; import { ArrowDropDownIcon } from '../icons'; -import { - PickersArrowSwitcher, - ExportedPickersArrowSwitcherProps, - PickersArrowSwitcherSlotsComponent, - PickersArrowSwitcherSlotsComponentsProps, -} from '../internals/components/PickersArrowSwitcher'; +import { PickersArrowSwitcher } from '../internals/components/PickersArrowSwitcher'; import { usePreviousMonthDisabled, useNextMonthDisabled, - MonthValidationOptions, } from '../internals/hooks/date-helpers-hooks'; -import { DateView } from '../models'; import { getPickersCalendarHeaderUtilityClass, pickersCalendarHeaderClasses, - PickersCalendarHeaderClasses, } from './pickersCalendarHeaderClasses'; -import { UncapitalizeObjectKeys } from '../internals/utils/slots-migration'; - -export type ExportedPickersCalendarHeaderProps = Pick< - PickersCalendarHeaderProps, - 'classes' | 'slots' | 'slotProps' ->; - -export interface PickersCalendarHeaderSlotsComponent extends PickersArrowSwitcherSlotsComponent { - /** - * Button displayed to switch between different calendar views. - * @default IconButton - */ - SwitchViewButton?: React.ElementType; - /** - * Icon displayed in the SwitchViewButton. Rotated by 180° when the open view is 'year'. - * @default ArrowDropDown - */ - SwitchViewIcon?: React.ElementType; -} - -// We keep the interface to allow module augmentation -export interface PickersCalendarHeaderComponentsPropsOverrides {} - -type PickersCalendarHeaderOwnerState = PickersCalendarHeaderProps; - -export interface PickersCalendarHeaderSlotsComponentsProps - extends PickersArrowSwitcherSlotsComponentsProps { - switchViewButton?: SlotComponentProps< - typeof IconButton, - PickersCalendarHeaderComponentsPropsOverrides, - PickersCalendarHeaderOwnerState - >; - - switchViewIcon?: SlotComponentProps< - typeof SvgIcon, - PickersCalendarHeaderComponentsPropsOverrides, - undefined - >; -} - -export interface PickersCalendarHeaderProps - extends ExportedPickersArrowSwitcherProps, - MonthValidationOptions { - /** - * Overridable component slots. - * @default {} - */ - slots?: UncapitalizeObjectKeys; - /** - * The props used for each component slot. - * @default {} - */ - slotProps?: PickersCalendarHeaderSlotsComponentsProps; - currentMonth: TDate; - disabled?: boolean; - views: readonly DateView[]; - onMonthChange: (date: TDate, slideDirection: SlideDirection) => void; - view: DateView; - reduceAnimations: boolean; - onViewChange?: (view: DateView) => void; - labelId?: string; - /** - * Override or extend the styles applied to the component. - */ - classes?: Partial; - /** - * className applied to the root element. - */ - className?: string; - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx?: SxProps; -} +import { + PickersCalendarHeaderOwnerState, + PickersCalendarHeaderProps, +} from './PickersCalendarHeader.types'; const useUtilityClasses = (ownerState: PickersCalendarHeaderOwnerState) => { const { classes } = ownerState; @@ -212,6 +132,8 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader = PickersCalendarHeaderProps; + +export interface PickersCalendarHeaderSlotsComponentsProps + extends PickersArrowSwitcherSlotsComponentsProps { + switchViewButton?: SlotComponentProps< + typeof IconButton, + PickersCalendarHeaderComponentsPropsOverrides, + PickersCalendarHeaderOwnerState + >; + + switchViewIcon?: SlotComponentProps< + typeof SvgIcon, + PickersCalendarHeaderComponentsPropsOverrides, + undefined + >; +} + +export interface PickersCalendarHeaderProps + extends ExportedPickersArrowSwitcherProps, + MonthValidationOptions { + /** + * Overridable components. + * @default {} + * @deprecated Please use `slots`. + */ + components?: PickersCalendarHeaderSlotsComponent; + /** + * The props used for each component slot. + * @default {} + * @deprecated Please use `slotProps`. + */ + componentsProps?: PickersCalendarHeaderSlotsComponentsProps; + /** + * Overridable component slots. + * @default {} + */ + slots?: UncapitalizeObjectKeys; + /** + * The props used for each component slot. + * @default {} + */ + slotProps?: PickersCalendarHeaderSlotsComponentsProps; + currentMonth: TDate; + disabled?: boolean; + views: readonly DateView[]; + onMonthChange: (date: TDate, slideDirection: SlideDirection) => void; + view: DateView; + reduceAnimations: boolean; + onViewChange?: (view: DateView) => void; + labelId?: string; + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial; + /** + * className applied to the root element. + */ + className?: string; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; +} + +export type ExportedPickersCalendarHeaderProps = Pick< + PickersCalendarHeaderProps, + 'classes' | 'slots' | 'slotProps' +>; diff --git a/packages/x-date-pickers/src/PickersCalendarHeader/index.ts b/packages/x-date-pickers/src/PickersCalendarHeader/index.ts index 60ec6cc838a1..54a863b264a5 100644 --- a/packages/x-date-pickers/src/PickersCalendarHeader/index.ts +++ b/packages/x-date-pickers/src/PickersCalendarHeader/index.ts @@ -9,4 +9,4 @@ export type { PickersCalendarHeaderSlotsComponent, PickersCalendarHeaderSlotsComponentsProps, ExportedPickersCalendarHeaderProps, -} from './PickersCalendarHeader'; +} from './PickersCalendarHeader.types';