diff --git a/docs/pages/x/api/charts/area-element.json b/docs/pages/x/api/charts/area-element.json index f0dee78fec4dd..d42e4ef1ccd9b 100644 --- a/docs/pages/x/api/charts/area-element.json +++ b/docs/pages/x/api/charts/area-element.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "AreaElement", "styles": { "classes": ["root", "highlighted", "faded"], diff --git a/docs/pages/x/api/charts/area-plot.json b/docs/pages/x/api/charts/area-plot.json index ef1f9785be280..4d3da8bcfddf9 100644 --- a/docs/pages/x/api/charts/area-plot.json +++ b/docs/pages/x/api/charts/area-plot.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "AreaPlot", "styles": { "classes": [], "globalClasses": {}, "name": "MuiAreaPlot" }, "filename": "/packages/x-charts/src/LineChart/AreaPlot.tsx", diff --git a/docs/pages/x/api/charts/bar-chart.json b/docs/pages/x/api/charts/bar-chart.json index 76beb3e1970b6..2eb527865abbb 100644 --- a/docs/pages/x/api/charts/bar-chart.json +++ b/docs/pages/x/api/charts/bar-chart.json @@ -32,7 +32,7 @@ "default": "null" } }, - "slots": {}, + "slots": [], "name": "BarChart", "styles": { "classes": [], "globalClasses": {}, "name": "MuiBarChart" }, "filename": "/packages/x-charts/src/BarChart/BarChart.tsx", diff --git a/docs/pages/x/api/charts/bar-plot.json b/docs/pages/x/api/charts/bar-plot.json index bc8df243155e6..1e8969af5f86a 100644 --- a/docs/pages/x/api/charts/bar-plot.json +++ b/docs/pages/x/api/charts/bar-plot.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "BarPlot", "styles": { "classes": [], "globalClasses": {}, "name": "MuiBarPlot" }, "filename": "/packages/x-charts/src/BarChart/BarPlot.tsx", diff --git a/docs/pages/x/api/charts/cartesian-context-provider.json b/docs/pages/x/api/charts/cartesian-context-provider.json index db4cc23d119c6..64928d95ad235 100644 --- a/docs/pages/x/api/charts/cartesian-context-provider.json +++ b/docs/pages/x/api/charts/cartesian-context-provider.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "CartesianContextProvider", "styles": { "classes": [], "globalClasses": {}, "name": "MuiCartesianContextProvider" }, "filename": "/packages/x-charts/src/context/CartesianContextProvider.tsx", diff --git a/docs/pages/x/api/charts/charts-axis-highlight.json b/docs/pages/x/api/charts/charts-axis-highlight.json index 802dbf43ced5d..7c273daa27055 100644 --- a/docs/pages/x/api/charts/charts-axis-highlight.json +++ b/docs/pages/x/api/charts/charts-axis-highlight.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "ChartsAxisHighlight", "styles": { "classes": [], "globalClasses": {}, "name": "MuiChartsAxisHighlight" }, "filename": "/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx", diff --git a/docs/pages/x/api/charts/charts-axis.json b/docs/pages/x/api/charts/charts-axis.json index ab3d36bd84439..22fef3ce5da0b 100644 --- a/docs/pages/x/api/charts/charts-axis.json +++ b/docs/pages/x/api/charts/charts-axis.json @@ -29,7 +29,7 @@ "default": "null" } }, - "slots": {}, + "slots": [], "name": "ChartsAxis", "styles": { "classes": [], "globalClasses": {}, "name": "MuiChartsAxis" }, "filename": "/packages/x-charts/src/ChartsAxis/ChartsAxis.tsx", diff --git a/docs/pages/x/api/charts/charts-clip-path.json b/docs/pages/x/api/charts/charts-clip-path.json index 49a415c14b588..9ee32a3575e7a 100644 --- a/docs/pages/x/api/charts/charts-clip-path.json +++ b/docs/pages/x/api/charts/charts-clip-path.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "ChartsClipPath", "styles": { "classes": [], "globalClasses": {}, "name": "MuiChartsClipPath" }, "filename": "/packages/x-charts/src/ChartsClipPath/ChartsClipPath.tsx", diff --git a/docs/pages/x/api/charts/charts-tooltip.json b/docs/pages/x/api/charts/charts-tooltip.json index c662b138caf7e..c326e0bd67e1b 100644 --- a/docs/pages/x/api/charts/charts-tooltip.json +++ b/docs/pages/x/api/charts/charts-tooltip.json @@ -11,7 +11,7 @@ "default": "'item'" } }, - "slots": {}, + "slots": [], "name": "ChartsTooltip", "styles": { "classes": ["root", "markCell", "labelCell", "valueCell"], diff --git a/docs/pages/x/api/charts/charts-x-axis.json b/docs/pages/x/api/charts/charts-x-axis.json index 6560adbef9695..1c5eabf8cf719 100644 --- a/docs/pages/x/api/charts/charts-x-axis.json +++ b/docs/pages/x/api/charts/charts-x-axis.json @@ -12,7 +12,7 @@ "tickFontSize": { "type": { "name": "number" }, "default": "12" }, "tickSize": { "type": { "name": "number" }, "default": "6" } }, - "slots": {}, + "slots": [], "name": "ChartsXAxis", "styles": { "classes": [ diff --git a/docs/pages/x/api/charts/charts-y-axis.json b/docs/pages/x/api/charts/charts-y-axis.json index 700a13471f33c..7270e9870c958 100644 --- a/docs/pages/x/api/charts/charts-y-axis.json +++ b/docs/pages/x/api/charts/charts-y-axis.json @@ -12,7 +12,7 @@ "tickFontSize": { "type": { "name": "number" }, "default": "12" }, "tickSize": { "type": { "name": "number" }, "default": "6" } }, - "slots": {}, + "slots": [], "name": "ChartsYAxis", "styles": { "classes": [ diff --git a/docs/pages/x/api/charts/drawing-provider.json b/docs/pages/x/api/charts/drawing-provider.json index 9e872f0ac0ca0..c48cb0ed5c18d 100644 --- a/docs/pages/x/api/charts/drawing-provider.json +++ b/docs/pages/x/api/charts/drawing-provider.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "DrawingProvider", "styles": { "classes": [], "globalClasses": {}, "name": "MuiDrawingProvider" }, "filename": "/packages/x-charts/src/context/DrawingProvider.tsx", diff --git a/docs/pages/x/api/charts/line-chart.json b/docs/pages/x/api/charts/line-chart.json index f2ba4b597c0bd..81dbfc9a86fb1 100644 --- a/docs/pages/x/api/charts/line-chart.json +++ b/docs/pages/x/api/charts/line-chart.json @@ -32,7 +32,7 @@ "default": "null" } }, - "slots": {}, + "slots": [], "name": "LineChart", "styles": { "classes": [], "globalClasses": {}, "name": "MuiLineChart" }, "filename": "/packages/x-charts/src/LineChart/LineChart.tsx", diff --git a/docs/pages/x/api/charts/line-element.json b/docs/pages/x/api/charts/line-element.json index a1955dcfa24b1..3cf6786adc2ef 100644 --- a/docs/pages/x/api/charts/line-element.json +++ b/docs/pages/x/api/charts/line-element.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "LineElement", "styles": { "classes": ["root", "highlighted", "faded"], diff --git a/docs/pages/x/api/charts/line-plot.json b/docs/pages/x/api/charts/line-plot.json index 819cea8555829..badd2f36cd0f4 100644 --- a/docs/pages/x/api/charts/line-plot.json +++ b/docs/pages/x/api/charts/line-plot.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "LinePlot", "styles": { "classes": [], "globalClasses": {}, "name": "MuiLinePlot" }, "filename": "/packages/x-charts/src/LineChart/LinePlot.tsx", diff --git a/docs/pages/x/api/charts/mark-element.json b/docs/pages/x/api/charts/mark-element.json index ffdb89e72cc0e..4767864fe1e21 100644 --- a/docs/pages/x/api/charts/mark-element.json +++ b/docs/pages/x/api/charts/mark-element.json @@ -9,7 +9,7 @@ "required": true } }, - "slots": {}, + "slots": [], "name": "MarkElement", "styles": { "classes": ["root", "highlighted", "faded"], diff --git a/docs/pages/x/api/charts/mark-plot.json b/docs/pages/x/api/charts/mark-plot.json index 9cce7fdcbd468..92c25161c37ce 100644 --- a/docs/pages/x/api/charts/mark-plot.json +++ b/docs/pages/x/api/charts/mark-plot.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "MarkPlot", "styles": { "classes": [], "globalClasses": {}, "name": "MuiMarkPlot" }, "filename": "/packages/x-charts/src/LineChart/MarkPlot.tsx", diff --git a/docs/pages/x/api/charts/pie-chart.json b/docs/pages/x/api/charts/pie-chart.json index 373600afd0ff0..a12845277d28f 100644 --- a/docs/pages/x/api/charts/pie-chart.json +++ b/docs/pages/x/api/charts/pie-chart.json @@ -32,7 +32,7 @@ "default": "null" } }, - "slots": {}, + "slots": [], "name": "PieChart", "styles": { "classes": [], "globalClasses": {}, "name": "MuiPieChart" }, "filename": "/packages/x-charts/src/PieChart/PieChart.tsx", diff --git a/docs/pages/x/api/charts/pie-plot.json b/docs/pages/x/api/charts/pie-plot.json index 66b5945d8a281..6eb1d85d64e6e 100644 --- a/docs/pages/x/api/charts/pie-plot.json +++ b/docs/pages/x/api/charts/pie-plot.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "PiePlot", "styles": { "classes": [], "globalClasses": {}, "name": "MuiPiePlot" }, "filename": "/packages/x-charts/src/PieChart/PiePlot.tsx", diff --git a/docs/pages/x/api/charts/scatter-chart.json b/docs/pages/x/api/charts/scatter-chart.json index e36f0ae504710..08f99da34d63c 100644 --- a/docs/pages/x/api/charts/scatter-chart.json +++ b/docs/pages/x/api/charts/scatter-chart.json @@ -32,7 +32,7 @@ "default": "null" } }, - "slots": {}, + "slots": [], "name": "ScatterChart", "styles": { "classes": [], "globalClasses": {}, "name": "MuiScatterChart" }, "filename": "/packages/x-charts/src/ScatterChart/ScatterChart.tsx", diff --git a/docs/pages/x/api/charts/scatter-plot.json b/docs/pages/x/api/charts/scatter-plot.json index 54f512e44f546..e2f4e6de02cd1 100644 --- a/docs/pages/x/api/charts/scatter-plot.json +++ b/docs/pages/x/api/charts/scatter-plot.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "ScatterPlot", "styles": { "classes": [], "globalClasses": {}, "name": "MuiScatterPlot" }, "filename": "/packages/x-charts/src/ScatterChart/ScatterPlot.tsx", diff --git a/docs/pages/x/api/charts/scatter.json b/docs/pages/x/api/charts/scatter.json index 66c6bdc25ddbc..1321e1f361f8f 100644 --- a/docs/pages/x/api/charts/scatter.json +++ b/docs/pages/x/api/charts/scatter.json @@ -1,6 +1,6 @@ { "props": {}, - "slots": {}, + "slots": [], "name": "Scatter", "styles": { "classes": [], "globalClasses": {}, "name": "MuiScatter" }, "filename": "/packages/x-charts/src/ScatterChart/Scatter.tsx", diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json index 3517b9b544beb..d9e7f75630ce9 100644 --- a/docs/pages/x/api/data-grid/data-grid-premium.json +++ b/docs/pages/x/api/data-grid/data-grid-premium.json @@ -613,127 +613,434 @@ "signature": { "type": "function(text: string) => void", "describedArgs": ["text"] } } }, - "slots": { - "baseButton": { "default": "Button", "type": { "name": "elementType" } }, - "baseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } }, - "baseChip": { "default": "Chip", "type": { "name": "elementType" } }, - "baseFormControl": { "default": "FormControl", "type": { "name": "elementType" } }, - "baseIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "baseInputAdornment": { "default": "InputAdornment", "type": { "name": "elementType" } }, - "baseInputLabel": { "default": "InputLabel", "type": { "name": "elementType" } }, - "basePopper": { "default": "Popper", "type": { "name": "elementType" } }, - "baseSelect": { "default": "Select", "type": { "name": "elementType" } }, - "baseSelectOption": { "default": "MenuItem", "type": { "name": "elementType" } }, - "baseSwitch": { "default": "Switch", "type": { "name": "elementType" } }, - "baseTextField": { "default": "TextField", "type": { "name": "elementType" } }, - "baseTooltip": { "default": "Tooltip", "type": { "name": "elementType" } }, - "booleanCellFalseIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, - "booleanCellTrueIcon": { "default": "GridCheckIcon", "type": { "name": "elementType" } }, - "cell": { "default": "GridCell", "type": { "name": "elementType" } }, - "columnFilteredIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, - "columnHeaderFilterIconButton": { - "default": "GridColumnHeaderFilterIconButton", - "type": { "name": "elementType" } - }, - "columnHeaders": { "default": "DataGridColumnHeaders", "type": { "name": "elementType" } }, - "columnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, - "columnMenuAggregationIcon": { - "default": "GridFunctionsIcon", - "type": { "name": "elementType" } - }, - "columnMenuClearIcon": { "default": "GridClearIcon", "type": { "name": "elementType" } }, - "columnMenuFilterIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, - "columnMenuGroupIcon": { "default": "GridGroupWorkIcon", "type": { "name": "elementType" } }, - "columnMenuHideIcon": { "default": "GridVisibilityOffIcon", "type": { "name": "elementType" } }, - "columnMenuIcon": { - "default": "GridTripleDotsVerticalIcon", - "type": { "name": "elementType" } - }, - "columnMenuManageColumnsIcon": { - "default": "GridViewColumnIcon", - "type": { "name": "elementType" } - }, - "columnMenuPinLeftIcon": { - "default": "GridPushPinLeftIcon", - "type": { "name": "elementType" } - }, - "columnMenuPinRightIcon": { - "default": "GridPushPinRightIcon", - "type": { "name": "elementType" } - }, - "columnMenuSortAscendingIcon": { - "default": "GridArrowUpwardIcon", - "type": { "name": "elementType" } - }, - "columnMenuSortDescendingIcon": { - "default": "GridArrowDownwardIcon", - "type": { "name": "elementType" } - }, - "columnMenuUngroupIcon": { "default": "GridWorkspacesIcon", "type": { "name": "elementType" } }, - "columnReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } }, - "columnResizeIcon": { "default": "GridSeparatorIcon", "type": { "name": "elementType" } }, - "columnSelectorIcon": { "default": "GridColumnIcon", "type": { "name": "elementType" } }, - "columnSortedAscendingIcon": { - "default": "GridArrowUpwardIcon", - "type": { "name": "elementType | null" } - }, - "columnSortedDescendingIcon": { - "default": "GridArrowDownwardIcon", - "type": { "name": "elementType | null" } - }, - "columnsPanel": { "default": "GridColumnsPanel", "type": { "name": "elementType" } }, - "columnUnsortedIcon": { - "default": "GridColumnUnsortedIcon", - "type": { "name": "elementType | null" } - }, - "densityComfortableIcon": { - "default": "GridViewStreamIcon", - "type": { "name": "elementType" } - }, - "densityCompactIcon": { "default": "GridViewHeadlineIcon", "type": { "name": "elementType" } }, - "densityStandardIcon": { "default": "GridTableRowsIcon", "type": { "name": "elementType" } }, - "detailPanelCollapseIcon": { "default": "GridRemoveIcon", "type": { "name": "elementType" } }, - "detailPanelExpandIcon": { "default": "GridAddIcon", "type": { "name": "elementType" } }, - "exportIcon": { "default": "GridSaveAltIcon", "type": { "name": "elementType" } }, - "filterPanel": { "default": "GridFilterPanel", "type": { "name": "elementType" } }, - "filterPanelAddIcon": { "default": "GridAddIcon", "type": { "name": "elementType" } }, - "filterPanelDeleteIcon": { "default": "GridDeleteIcon", "type": { "name": "elementType" } }, - "filterPanelRemoveAllIcon": { - "default": "GridDeleteForeverIcon", - "type": { "name": "elementType" } - }, - "footer": { "default": "GridFooter", "type": { "name": "elementType" } }, - "groupingCriteriaCollapseIcon": { - "default": "GridExpandMoreIcon", - "type": { "name": "elementType" } - }, - "groupingCriteriaExpandIcon": { - "default": "GridKeyboardArrowRight", - "type": { "name": "elementType" } - }, - "headerFilterCell": { "default": "GridHeaderFilterCell", "type": { "name": "elementType" } }, - "headerFilterMenu": { - "default": "GridHeaderFilterMenu", - "type": { "name": "elementType | null" } - }, - "loadIcon": { "default": "GridLoadIcon", "type": { "name": "elementType" } }, - "loadingOverlay": { "default": "GridLoadingOverlay", "type": { "name": "elementType" } }, - "moreActionsIcon": { "default": "GridMoreVertIcon", "type": { "name": "elementType" } }, - "noResultsOverlay": { "default": "GridNoResultsOverlay", "type": { "name": "elementType" } }, - "noRowsOverlay": { "default": "GridNoRowsOverlay", "type": { "name": "elementType" } }, - "openFilterButtonIcon": { "default": "GridFilterListIcon", "type": { "name": "elementType" } }, - "pagination": { "default": "Pagination", "type": { "name": "elementType | null" } }, - "panel": { "default": "GridPanel", "type": { "name": "elementType" } }, - "preferencesPanel": { "default": "GridPreferencesPanel", "type": { "name": "elementType" } }, - "quickFilterClearIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, - "quickFilterIcon": { "default": "GridSearchIcon", "type": { "name": "elementType" } }, - "row": { "default": "GridRow", "type": { "name": "elementType" } }, - "rowReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } }, - "skeletonCell": { "default": "GridSkeletonCell", "type": { "name": "elementType" } }, - "toolbar": { "default": "null", "type": { "name": "elementType | null" } }, - "treeDataCollapseIcon": { "default": "GridExpandMoreIcon", "type": { "name": "elementType" } }, - "treeDataExpandIcon": { "default": "GridKeyboardArrowRight", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "baseButton", + "description": "The custom Button component used in the grid.", + "default": "Button" + }, + { + "class": null, + "name": "baseCheckbox", + "description": "The custom Checkbox component used in the grid for both header and cells.", + "default": "Checkbox" + }, + { + "class": null, + "name": "baseChip", + "description": "The custom Chip component used in the grid.", + "default": "Chip" + }, + { + "class": null, + "name": "baseFormControl", + "description": "The custom FormControl component used in the grid.", + "default": "FormControl" + }, + { + "class": null, + "name": "baseIconButton", + "description": "The custom IconButton component used in the grid.", + "default": "IconButton" + }, + { + "class": null, + "name": "baseInputAdornment", + "description": "The custom InputAdornment component used in the grid.", + "default": "InputAdornment" + }, + { + "class": null, + "name": "baseInputLabel", + "description": "The custom InputLabel component used in the grid.", + "default": "InputLabel" + }, + { + "class": null, + "name": "basePopper", + "description": "The custom Popper component used in the grid.", + "default": "Popper" + }, + { + "class": null, + "name": "baseSelect", + "description": "The custom Select component used in the grid.", + "default": "Select" + }, + { + "class": null, + "name": "baseSelectOption", + "description": "The custom SelectOption component used in the grid.", + "default": "MenuItem" + }, + { + "class": null, + "name": "baseSwitch", + "description": "The custom Switch component used in the grid.", + "default": "Switch" + }, + { + "class": null, + "name": "baseTextField", + "description": "The custom TextField component used in the grid.", + "default": "TextField" + }, + { + "class": null, + "name": "baseTooltip", + "description": "The custom Tooltip component used in the grid.", + "default": "Tooltip" + }, + { + "class": null, + "name": "booleanCellFalseIcon", + "description": "Icon displayed on the boolean cell to represent the false value.", + "default": "GridCloseIcon" + }, + { + "class": null, + "name": "booleanCellTrueIcon", + "description": "Icon displayed on the boolean cell to represent the true value.", + "default": "GridCheckIcon" + }, + { + "class": null, + "name": "cell", + "description": "Component rendered for each cell.", + "default": "GridCell" + }, + { + "class": null, + "name": "columnFilteredIcon", + "description": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "default": "GridFilterAltIcon" + }, + { + "class": null, + "name": "columnHeaderFilterIconButton", + "description": "Filter icon component rendered in each column header.", + "default": "GridColumnHeaderFilterIconButton" + }, + { + "class": null, + "name": "columnHeaders", + "description": "Component responsible for rendering the column headers.", + "default": "DataGridColumnHeaders" + }, + { + "class": null, + "name": "columnMenu", + "description": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "default": "GridColumnMenu" + }, + { + "class": null, + "name": "columnMenuAggregationIcon", + "description": "Icon displayed in column menu for aggregation", + "default": "GridFunctionsIcon" + }, + { + "class": null, + "name": "columnMenuClearIcon", + "description": "Icon displayed in column menu for clearing values", + "default": "GridClearIcon" + }, + { + "class": null, + "name": "columnMenuFilterIcon", + "description": "Icon displayed in column menu for filter", + "default": "GridFilterAltIcon" + }, + { + "class": null, + "name": "columnMenuGroupIcon", + "description": "Icon displayed in column menu for grouping", + "default": "GridGroupWorkIcon" + }, + { + "class": null, + "name": "columnMenuHideIcon", + "description": "Icon displayed in column menu for hiding column", + "default": "GridVisibilityOffIcon" + }, + { + "class": null, + "name": "columnMenuIcon", + "description": "Icon displayed on the side of the column header title to display the filter input component.", + "default": "GridTripleDotsVerticalIcon" + }, + { + "class": null, + "name": "columnMenuManageColumnsIcon", + "description": "Icon displayed in column menu for showing all columns", + "default": "GridViewColumnIcon" + }, + { + "class": null, + "name": "columnMenuPinLeftIcon", + "description": "Icon displayed in column menu for left pinning", + "default": "GridPushPinLeftIcon" + }, + { + "class": null, + "name": "columnMenuPinRightIcon", + "description": "Icon displayed in column menu for right pinning", + "default": "GridPushPinRightIcon" + }, + { + "class": null, + "name": "columnMenuSortAscendingIcon", + "description": "Icon displayed in column menu for ascending sort", + "default": "GridArrowUpwardIcon" + }, + { + "class": null, + "name": "columnMenuSortDescendingIcon", + "description": "Icon displayed in column menu for descending sort", + "default": "GridArrowDownwardIcon" + }, + { + "class": null, + "name": "columnMenuUngroupIcon", + "description": "Icon displayed in column menu for ungrouping", + "default": "GridWorkspacesIcon" + }, + { + "class": null, + "name": "columnReorderIcon", + "description": "Icon displayed on the column reorder button.", + "default": "GridDragIcon" + }, + { + "class": null, + "name": "columnResizeIcon", + "description": "Icon displayed in between two column headers that allows to resize the column header.", + "default": "GridSeparatorIcon" + }, + { + "class": null, + "name": "columnSelectorIcon", + "description": "Icon displayed on the column menu selector tab.", + "default": "GridColumnIcon" + }, + { + "class": null, + "name": "columnSortedAscendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in ascending order.", + "default": "GridArrowUpwardIcon" + }, + { + "class": null, + "name": "columnSortedDescendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in descending order.", + "default": "GridArrowDownwardIcon" + }, + { + "class": null, + "name": "columnUnsortedIcon", + "description": "Icon displayed on the side of the column header title when unsorted.", + "default": "GridColumnUnsortedIcon" + }, + { + "class": null, + "name": "columnsPanel", + "description": "GridColumns panel component rendered when clicking the columns button.", + "default": "GridColumnsPanel" + }, + { + "class": null, + "name": "densityComfortableIcon", + "description": "Icon displayed on the "comfortable" density option in the toolbar.", + "default": "GridViewStreamIcon" + }, + { + "class": null, + "name": "densityCompactIcon", + "description": "Icon displayed on the compact density option in the toolbar.", + "default": "GridViewHeadlineIcon" + }, + { + "class": null, + "name": "densityStandardIcon", + "description": "Icon displayed on the standard density option in the toolbar.", + "default": "GridTableRowsIcon" + }, + { + "class": null, + "name": "detailPanelCollapseIcon", + "description": "Icon displayed on the detail panel toggle column when expanded.", + "default": "GridRemoveIcon" + }, + { + "class": null, + "name": "detailPanelExpandIcon", + "description": "Icon displayed on the detail panel toggle column when collapsed.", + "default": "GridAddIcon" + }, + { + "class": null, + "name": "exportIcon", + "description": "Icon displayed on the open export button present in the toolbar by default.", + "default": "GridSaveAltIcon" + }, + { + "class": null, + "name": "filterPanel", + "description": "Filter panel component rendered when clicking the filter button.", + "default": "GridFilterPanel" + }, + { + "class": null, + "name": "filterPanelAddIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridAddIcon" + }, + { + "class": null, + "name": "filterPanelDeleteIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridDeleteIcon" + }, + { + "class": null, + "name": "filterPanelRemoveAllIcon", + "description": "Icon displayed for deleting all the active filters from filter panel.", + "default": "GridDeleteForeverIcon" + }, + { + "class": null, + "name": "footer", + "description": "Footer component rendered at the bottom of the grid viewport.", + "default": "GridFooter" + }, + { + "class": null, + "name": "groupingCriteriaCollapseIcon", + "description": "Icon displayed on the grouping column when the children are expanded", + "default": "GridExpandMoreIcon" + }, + { + "class": null, + "name": "groupingCriteriaExpandIcon", + "description": "Icon displayed on the grouping column when the children are collapsed", + "default": "GridKeyboardArrowRight" + }, + { + "class": null, + "name": "headerFilterCell", + "description": "Component responsible for showing menu adornment in Header filter row", + "default": "GridHeaderFilterCell" + }, + { + "class": null, + "name": "headerFilterMenu", + "description": "Component responsible for showing menu in Header filter row", + "default": "GridHeaderFilterMenu" + }, + { + "class": null, + "name": "loadIcon", + "description": "Icon displayed on the input while processing.", + "default": "GridLoadIcon" + }, + { + "class": null, + "name": "loadingOverlay", + "description": "Loading overlay component rendered when the grid is in a loading state.", + "default": "GridLoadingOverlay" + }, + { + "class": null, + "name": "moreActionsIcon", + "description": "Icon displayed on the actions column type to open the menu.", + "default": "GridMoreVertIcon" + }, + { + "class": null, + "name": "noResultsOverlay", + "description": "No results overlay component rendered when the grid has no results after filtering.", + "default": "GridNoResultsOverlay" + }, + { + "class": null, + "name": "noRowsOverlay", + "description": "No rows overlay component rendered when the grid has no rows.", + "default": "GridNoRowsOverlay" + }, + { + "class": null, + "name": "openFilterButtonIcon", + "description": "Icon displayed on the open filter button present in the toolbar by default.", + "default": "GridFilterListIcon" + }, + { + "class": null, + "name": "pagination", + "description": "Pagination component rendered in the grid footer by default.", + "default": "Pagination" + }, + { + "class": null, + "name": "panel", + "description": "Panel component wrapping the filters and columns panels.", + "default": "GridPanel" + }, + { + "class": null, + "name": "preferencesPanel", + "description": "PreferencesPanel component rendered inside the Header component.", + "default": "GridPreferencesPanel" + }, + { + "class": null, + "name": "quickFilterClearIcon", + "description": "Icon displayed on the quick filter reset input.", + "default": "GridCloseIcon" + }, + { + "class": null, + "name": "quickFilterIcon", + "description": "Icon displayed on the quick filter input.", + "default": "GridSearchIcon" + }, + { + "class": null, + "name": "row", + "description": "Component rendered for each row.", + "default": "GridRow" + }, + { + "class": null, + "name": "rowReorderIcon", + "description": "Icon displayed on the reorder column type to reorder a row.", + "default": "GridDragIcon" + }, + { + "class": null, + "name": "skeletonCell", + "description": "Component rendered for each skeleton cell.", + "default": "GridSkeletonCell" + }, + { + "class": null, + "name": "toolbar", + "description": "Toolbar component rendered inside the Header component.", + "default": "null" + }, + { + "class": null, + "name": "treeDataCollapseIcon", + "description": "Icon displayed on the tree data toggling column when the children are expanded", + "default": "GridExpandMoreIcon" + }, + { + "class": null, + "name": "treeDataExpandIcon", + "description": "Icon displayed on the tree data toggling column when the children are collapsed", + "default": "GridKeyboardArrowRight" + } + ], "name": "DataGridPremium", "styles": { "classes": [ diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json index 9ae4a61f3e465..31484e1d55347 100644 --- a/docs/pages/x/api/data-grid/data-grid-pro.json +++ b/docs/pages/x/api/data-grid/data-grid-pro.json @@ -551,121 +551,416 @@ "default": ": false" } }, - "slots": { - "baseButton": { "default": "Button", "type": { "name": "elementType" } }, - "baseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } }, - "baseChip": { "default": "Chip", "type": { "name": "elementType" } }, - "baseFormControl": { "default": "FormControl", "type": { "name": "elementType" } }, - "baseIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "baseInputAdornment": { "default": "InputAdornment", "type": { "name": "elementType" } }, - "baseInputLabel": { "default": "InputLabel", "type": { "name": "elementType" } }, - "basePopper": { "default": "Popper", "type": { "name": "elementType" } }, - "baseSelect": { "default": "Select", "type": { "name": "elementType" } }, - "baseSelectOption": { "default": "MenuItem", "type": { "name": "elementType" } }, - "baseSwitch": { "default": "Switch", "type": { "name": "elementType" } }, - "baseTextField": { "default": "TextField", "type": { "name": "elementType" } }, - "baseTooltip": { "default": "Tooltip", "type": { "name": "elementType" } }, - "booleanCellFalseIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, - "booleanCellTrueIcon": { "default": "GridCheckIcon", "type": { "name": "elementType" } }, - "cell": { "default": "GridCell", "type": { "name": "elementType" } }, - "columnFilteredIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, - "columnHeaderFilterIconButton": { - "default": "GridColumnHeaderFilterIconButton", - "type": { "name": "elementType" } - }, - "columnHeaders": { "default": "DataGridColumnHeaders", "type": { "name": "elementType" } }, - "columnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, - "columnMenuClearIcon": { "default": "GridClearIcon", "type": { "name": "elementType" } }, - "columnMenuFilterIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, - "columnMenuHideIcon": { "default": "GridVisibilityOffIcon", "type": { "name": "elementType" } }, - "columnMenuIcon": { - "default": "GridTripleDotsVerticalIcon", - "type": { "name": "elementType" } - }, - "columnMenuManageColumnsIcon": { - "default": "GridViewColumnIcon", - "type": { "name": "elementType" } - }, - "columnMenuPinLeftIcon": { - "default": "GridPushPinLeftIcon", - "type": { "name": "elementType" } - }, - "columnMenuPinRightIcon": { - "default": "GridPushPinRightIcon", - "type": { "name": "elementType" } - }, - "columnMenuSortAscendingIcon": { - "default": "GridArrowUpwardIcon", - "type": { "name": "elementType" } - }, - "columnMenuSortDescendingIcon": { - "default": "GridArrowDownwardIcon", - "type": { "name": "elementType" } - }, - "columnReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } }, - "columnResizeIcon": { "default": "GridSeparatorIcon", "type": { "name": "elementType" } }, - "columnSelectorIcon": { "default": "GridColumnIcon", "type": { "name": "elementType" } }, - "columnSortedAscendingIcon": { - "default": "GridArrowUpwardIcon", - "type": { "name": "elementType | null" } - }, - "columnSortedDescendingIcon": { - "default": "GridArrowDownwardIcon", - "type": { "name": "elementType | null" } - }, - "columnsPanel": { "default": "GridColumnsPanel", "type": { "name": "elementType" } }, - "columnUnsortedIcon": { - "default": "GridColumnUnsortedIcon", - "type": { "name": "elementType | null" } - }, - "densityComfortableIcon": { - "default": "GridViewStreamIcon", - "type": { "name": "elementType" } - }, - "densityCompactIcon": { "default": "GridViewHeadlineIcon", "type": { "name": "elementType" } }, - "densityStandardIcon": { "default": "GridTableRowsIcon", "type": { "name": "elementType" } }, - "detailPanelCollapseIcon": { "default": "GridRemoveIcon", "type": { "name": "elementType" } }, - "detailPanelExpandIcon": { "default": "GridAddIcon", "type": { "name": "elementType" } }, - "exportIcon": { "default": "GridSaveAltIcon", "type": { "name": "elementType" } }, - "filterPanel": { "default": "GridFilterPanel", "type": { "name": "elementType" } }, - "filterPanelAddIcon": { "default": "GridAddIcon", "type": { "name": "elementType" } }, - "filterPanelDeleteIcon": { "default": "GridDeleteIcon", "type": { "name": "elementType" } }, - "filterPanelRemoveAllIcon": { - "default": "GridDeleteForeverIcon", - "type": { "name": "elementType" } - }, - "footer": { "default": "GridFooter", "type": { "name": "elementType" } }, - "groupingCriteriaCollapseIcon": { - "default": "GridExpandMoreIcon", - "type": { "name": "elementType" } - }, - "groupingCriteriaExpandIcon": { - "default": "GridKeyboardArrowRight", - "type": { "name": "elementType" } - }, - "headerFilterCell": { "default": "GridHeaderFilterCell", "type": { "name": "elementType" } }, - "headerFilterMenu": { - "default": "GridHeaderFilterMenu", - "type": { "name": "elementType | null" } - }, - "loadIcon": { "default": "GridLoadIcon", "type": { "name": "elementType" } }, - "loadingOverlay": { "default": "GridLoadingOverlay", "type": { "name": "elementType" } }, - "moreActionsIcon": { "default": "GridMoreVertIcon", "type": { "name": "elementType" } }, - "noResultsOverlay": { "default": "GridNoResultsOverlay", "type": { "name": "elementType" } }, - "noRowsOverlay": { "default": "GridNoRowsOverlay", "type": { "name": "elementType" } }, - "openFilterButtonIcon": { "default": "GridFilterListIcon", "type": { "name": "elementType" } }, - "pagination": { "default": "Pagination", "type": { "name": "elementType | null" } }, - "panel": { "default": "GridPanel", "type": { "name": "elementType" } }, - "preferencesPanel": { "default": "GridPreferencesPanel", "type": { "name": "elementType" } }, - "quickFilterClearIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, - "quickFilterIcon": { "default": "GridSearchIcon", "type": { "name": "elementType" } }, - "row": { "default": "GridRow", "type": { "name": "elementType" } }, - "rowReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } }, - "skeletonCell": { "default": "GridSkeletonCell", "type": { "name": "elementType" } }, - "toolbar": { "default": "null", "type": { "name": "elementType | null" } }, - "treeDataCollapseIcon": { "default": "GridExpandMoreIcon", "type": { "name": "elementType" } }, - "treeDataExpandIcon": { "default": "GridKeyboardArrowRight", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "baseButton", + "description": "The custom Button component used in the grid.", + "default": "Button" + }, + { + "class": null, + "name": "baseCheckbox", + "description": "The custom Checkbox component used in the grid for both header and cells.", + "default": "Checkbox" + }, + { + "class": null, + "name": "baseChip", + "description": "The custom Chip component used in the grid.", + "default": "Chip" + }, + { + "class": null, + "name": "baseFormControl", + "description": "The custom FormControl component used in the grid.", + "default": "FormControl" + }, + { + "class": null, + "name": "baseIconButton", + "description": "The custom IconButton component used in the grid.", + "default": "IconButton" + }, + { + "class": null, + "name": "baseInputAdornment", + "description": "The custom InputAdornment component used in the grid.", + "default": "InputAdornment" + }, + { + "class": null, + "name": "baseInputLabel", + "description": "The custom InputLabel component used in the grid.", + "default": "InputLabel" + }, + { + "class": null, + "name": "basePopper", + "description": "The custom Popper component used in the grid.", + "default": "Popper" + }, + { + "class": null, + "name": "baseSelect", + "description": "The custom Select component used in the grid.", + "default": "Select" + }, + { + "class": null, + "name": "baseSelectOption", + "description": "The custom SelectOption component used in the grid.", + "default": "MenuItem" + }, + { + "class": null, + "name": "baseSwitch", + "description": "The custom Switch component used in the grid.", + "default": "Switch" + }, + { + "class": null, + "name": "baseTextField", + "description": "The custom TextField component used in the grid.", + "default": "TextField" + }, + { + "class": null, + "name": "baseTooltip", + "description": "The custom Tooltip component used in the grid.", + "default": "Tooltip" + }, + { + "class": null, + "name": "booleanCellFalseIcon", + "description": "Icon displayed on the boolean cell to represent the false value.", + "default": "GridCloseIcon" + }, + { + "class": null, + "name": "booleanCellTrueIcon", + "description": "Icon displayed on the boolean cell to represent the true value.", + "default": "GridCheckIcon" + }, + { + "class": null, + "name": "cell", + "description": "Component rendered for each cell.", + "default": "GridCell" + }, + { + "class": null, + "name": "columnFilteredIcon", + "description": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "default": "GridFilterAltIcon" + }, + { + "class": null, + "name": "columnHeaderFilterIconButton", + "description": "Filter icon component rendered in each column header.", + "default": "GridColumnHeaderFilterIconButton" + }, + { + "class": null, + "name": "columnHeaders", + "description": "Component responsible for rendering the column headers.", + "default": "DataGridColumnHeaders" + }, + { + "class": null, + "name": "columnMenu", + "description": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "default": "GridColumnMenu" + }, + { + "class": null, + "name": "columnMenuClearIcon", + "description": "Icon displayed in column menu for clearing values", + "default": "GridClearIcon" + }, + { + "class": null, + "name": "columnMenuFilterIcon", + "description": "Icon displayed in column menu for filter", + "default": "GridFilterAltIcon" + }, + { + "class": null, + "name": "columnMenuHideIcon", + "description": "Icon displayed in column menu for hiding column", + "default": "GridVisibilityOffIcon" + }, + { + "class": null, + "name": "columnMenuIcon", + "description": "Icon displayed on the side of the column header title to display the filter input component.", + "default": "GridTripleDotsVerticalIcon" + }, + { + "class": null, + "name": "columnMenuManageColumnsIcon", + "description": "Icon displayed in column menu for showing all columns", + "default": "GridViewColumnIcon" + }, + { + "class": null, + "name": "columnMenuPinLeftIcon", + "description": "Icon displayed in column menu for left pinning", + "default": "GridPushPinLeftIcon" + }, + { + "class": null, + "name": "columnMenuPinRightIcon", + "description": "Icon displayed in column menu for right pinning", + "default": "GridPushPinRightIcon" + }, + { + "class": null, + "name": "columnMenuSortAscendingIcon", + "description": "Icon displayed in column menu for ascending sort", + "default": "GridArrowUpwardIcon" + }, + { + "class": null, + "name": "columnMenuSortDescendingIcon", + "description": "Icon displayed in column menu for descending sort", + "default": "GridArrowDownwardIcon" + }, + { + "class": null, + "name": "columnReorderIcon", + "description": "Icon displayed on the column reorder button.", + "default": "GridDragIcon" + }, + { + "class": null, + "name": "columnResizeIcon", + "description": "Icon displayed in between two column headers that allows to resize the column header.", + "default": "GridSeparatorIcon" + }, + { + "class": null, + "name": "columnSelectorIcon", + "description": "Icon displayed on the column menu selector tab.", + "default": "GridColumnIcon" + }, + { + "class": null, + "name": "columnSortedAscendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in ascending order.", + "default": "GridArrowUpwardIcon" + }, + { + "class": null, + "name": "columnSortedDescendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in descending order.", + "default": "GridArrowDownwardIcon" + }, + { + "class": null, + "name": "columnUnsortedIcon", + "description": "Icon displayed on the side of the column header title when unsorted.", + "default": "GridColumnUnsortedIcon" + }, + { + "class": null, + "name": "columnsPanel", + "description": "GridColumns panel component rendered when clicking the columns button.", + "default": "GridColumnsPanel" + }, + { + "class": null, + "name": "densityComfortableIcon", + "description": "Icon displayed on the "comfortable" density option in the toolbar.", + "default": "GridViewStreamIcon" + }, + { + "class": null, + "name": "densityCompactIcon", + "description": "Icon displayed on the compact density option in the toolbar.", + "default": "GridViewHeadlineIcon" + }, + { + "class": null, + "name": "densityStandardIcon", + "description": "Icon displayed on the standard density option in the toolbar.", + "default": "GridTableRowsIcon" + }, + { + "class": null, + "name": "detailPanelCollapseIcon", + "description": "Icon displayed on the detail panel toggle column when expanded.", + "default": "GridRemoveIcon" + }, + { + "class": null, + "name": "detailPanelExpandIcon", + "description": "Icon displayed on the detail panel toggle column when collapsed.", + "default": "GridAddIcon" + }, + { + "class": null, + "name": "exportIcon", + "description": "Icon displayed on the open export button present in the toolbar by default.", + "default": "GridSaveAltIcon" + }, + { + "class": null, + "name": "filterPanel", + "description": "Filter panel component rendered when clicking the filter button.", + "default": "GridFilterPanel" + }, + { + "class": null, + "name": "filterPanelAddIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridAddIcon" + }, + { + "class": null, + "name": "filterPanelDeleteIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridDeleteIcon" + }, + { + "class": null, + "name": "filterPanelRemoveAllIcon", + "description": "Icon displayed for deleting all the active filters from filter panel.", + "default": "GridDeleteForeverIcon" + }, + { + "class": null, + "name": "footer", + "description": "Footer component rendered at the bottom of the grid viewport.", + "default": "GridFooter" + }, + { + "class": null, + "name": "groupingCriteriaCollapseIcon", + "description": "Icon displayed on the grouping column when the children are expanded", + "default": "GridExpandMoreIcon" + }, + { + "class": null, + "name": "groupingCriteriaExpandIcon", + "description": "Icon displayed on the grouping column when the children are collapsed", + "default": "GridKeyboardArrowRight" + }, + { + "class": null, + "name": "headerFilterCell", + "description": "Component responsible for showing menu adornment in Header filter row", + "default": "GridHeaderFilterCell" + }, + { + "class": null, + "name": "headerFilterMenu", + "description": "Component responsible for showing menu in Header filter row", + "default": "GridHeaderFilterMenu" + }, + { + "class": null, + "name": "loadIcon", + "description": "Icon displayed on the input while processing.", + "default": "GridLoadIcon" + }, + { + "class": null, + "name": "loadingOverlay", + "description": "Loading overlay component rendered when the grid is in a loading state.", + "default": "GridLoadingOverlay" + }, + { + "class": null, + "name": "moreActionsIcon", + "description": "Icon displayed on the actions column type to open the menu.", + "default": "GridMoreVertIcon" + }, + { + "class": null, + "name": "noResultsOverlay", + "description": "No results overlay component rendered when the grid has no results after filtering.", + "default": "GridNoResultsOverlay" + }, + { + "class": null, + "name": "noRowsOverlay", + "description": "No rows overlay component rendered when the grid has no rows.", + "default": "GridNoRowsOverlay" + }, + { + "class": null, + "name": "openFilterButtonIcon", + "description": "Icon displayed on the open filter button present in the toolbar by default.", + "default": "GridFilterListIcon" + }, + { + "class": null, + "name": "pagination", + "description": "Pagination component rendered in the grid footer by default.", + "default": "Pagination" + }, + { + "class": null, + "name": "panel", + "description": "Panel component wrapping the filters and columns panels.", + "default": "GridPanel" + }, + { + "class": null, + "name": "preferencesPanel", + "description": "PreferencesPanel component rendered inside the Header component.", + "default": "GridPreferencesPanel" + }, + { + "class": null, + "name": "quickFilterClearIcon", + "description": "Icon displayed on the quick filter reset input.", + "default": "GridCloseIcon" + }, + { + "class": null, + "name": "quickFilterIcon", + "description": "Icon displayed on the quick filter input.", + "default": "GridSearchIcon" + }, + { + "class": null, + "name": "row", + "description": "Component rendered for each row.", + "default": "GridRow" + }, + { + "class": null, + "name": "rowReorderIcon", + "description": "Icon displayed on the reorder column type to reorder a row.", + "default": "GridDragIcon" + }, + { + "class": null, + "name": "skeletonCell", + "description": "Component rendered for each skeleton cell.", + "default": "GridSkeletonCell" + }, + { + "class": null, + "name": "toolbar", + "description": "Toolbar component rendered inside the Header component.", + "default": "null" + }, + { + "class": null, + "name": "treeDataCollapseIcon", + "description": "Icon displayed on the tree data toggling column when the children are expanded", + "default": "GridExpandMoreIcon" + }, + { + "class": null, + "name": "treeDataExpandIcon", + "description": "Icon displayed on the tree data toggling column when the children are collapsed", + "default": "GridKeyboardArrowRight" + } + ], "name": "DataGridPro", "styles": { "classes": [ diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json index 55eae50e6fd49..5e3b4793b74df 100644 --- a/docs/pages/x/api/data-grid/data-grid.json +++ b/docs/pages/x/api/data-grid/data-grid.json @@ -431,108 +431,392 @@ "default": ": false" } }, - "slots": { - "baseButton": { "default": "Button", "type": { "name": "elementType" } }, - "baseCheckbox": { "default": "Checkbox", "type": { "name": "elementType" } }, - "baseChip": { "default": "Chip", "type": { "name": "elementType" } }, - "baseFormControl": { "default": "FormControl", "type": { "name": "elementType" } }, - "baseIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "baseInputAdornment": { "default": "InputAdornment", "type": { "name": "elementType" } }, - "baseInputLabel": { "default": "InputLabel", "type": { "name": "elementType" } }, - "basePopper": { "default": "Popper", "type": { "name": "elementType" } }, - "baseSelect": { "default": "Select", "type": { "name": "elementType" } }, - "baseSelectOption": { "default": "MenuItem", "type": { "name": "elementType" } }, - "baseSwitch": { "default": "Switch", "type": { "name": "elementType" } }, - "baseTextField": { "default": "TextField", "type": { "name": "elementType" } }, - "baseTooltip": { "default": "Tooltip", "type": { "name": "elementType" } }, - "booleanCellFalseIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, - "booleanCellTrueIcon": { "default": "GridCheckIcon", "type": { "name": "elementType" } }, - "cell": { "default": "GridCell", "type": { "name": "elementType" } }, - "columnFilteredIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, - "columnHeaderFilterIconButton": { - "default": "GridColumnHeaderFilterIconButton", - "type": { "name": "elementType" } - }, - "columnHeaders": { "default": "DataGridColumnHeaders", "type": { "name": "elementType" } }, - "columnMenu": { "default": "GridColumnMenu", "type": { "name": "elementType" } }, - "columnMenuClearIcon": { "default": "GridClearIcon", "type": { "name": "elementType" } }, - "columnMenuFilterIcon": { "default": "GridFilterAltIcon", "type": { "name": "elementType" } }, - "columnMenuHideIcon": { "default": "GridVisibilityOffIcon", "type": { "name": "elementType" } }, - "columnMenuIcon": { - "default": "GridTripleDotsVerticalIcon", - "type": { "name": "elementType" } - }, - "columnMenuManageColumnsIcon": { - "default": "GridViewColumnIcon", - "type": { "name": "elementType" } - }, - "columnMenuSortAscendingIcon": { - "default": "GridArrowUpwardIcon", - "type": { "name": "elementType" } - }, - "columnMenuSortDescendingIcon": { - "default": "GridArrowDownwardIcon", - "type": { "name": "elementType" } - }, - "columnReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } }, - "columnResizeIcon": { "default": "GridSeparatorIcon", "type": { "name": "elementType" } }, - "columnSelectorIcon": { "default": "GridColumnIcon", "type": { "name": "elementType" } }, - "columnSortedAscendingIcon": { - "default": "GridArrowUpwardIcon", - "type": { "name": "elementType | null" } - }, - "columnSortedDescendingIcon": { - "default": "GridArrowDownwardIcon", - "type": { "name": "elementType | null" } - }, - "columnsPanel": { "default": "GridColumnsPanel", "type": { "name": "elementType" } }, - "columnUnsortedIcon": { - "default": "GridColumnUnsortedIcon", - "type": { "name": "elementType | null" } - }, - "densityComfortableIcon": { - "default": "GridViewStreamIcon", - "type": { "name": "elementType" } - }, - "densityCompactIcon": { "default": "GridViewHeadlineIcon", "type": { "name": "elementType" } }, - "densityStandardIcon": { "default": "GridTableRowsIcon", "type": { "name": "elementType" } }, - "detailPanelCollapseIcon": { "default": "GridRemoveIcon", "type": { "name": "elementType" } }, - "detailPanelExpandIcon": { "default": "GridAddIcon", "type": { "name": "elementType" } }, - "exportIcon": { "default": "GridSaveAltIcon", "type": { "name": "elementType" } }, - "filterPanel": { "default": "GridFilterPanel", "type": { "name": "elementType" } }, - "filterPanelAddIcon": { "default": "GridAddIcon", "type": { "name": "elementType" } }, - "filterPanelDeleteIcon": { "default": "GridDeleteIcon", "type": { "name": "elementType" } }, - "filterPanelRemoveAllIcon": { - "default": "GridDeleteForeverIcon", - "type": { "name": "elementType" } - }, - "footer": { "default": "GridFooter", "type": { "name": "elementType" } }, - "groupingCriteriaCollapseIcon": { - "default": "GridExpandMoreIcon", - "type": { "name": "elementType" } - }, - "groupingCriteriaExpandIcon": { - "default": "GridKeyboardArrowRight", - "type": { "name": "elementType" } - }, - "loadIcon": { "default": "GridLoadIcon", "type": { "name": "elementType" } }, - "loadingOverlay": { "default": "GridLoadingOverlay", "type": { "name": "elementType" } }, - "moreActionsIcon": { "default": "GridMoreVertIcon", "type": { "name": "elementType" } }, - "noResultsOverlay": { "default": "GridNoResultsOverlay", "type": { "name": "elementType" } }, - "noRowsOverlay": { "default": "GridNoRowsOverlay", "type": { "name": "elementType" } }, - "openFilterButtonIcon": { "default": "GridFilterListIcon", "type": { "name": "elementType" } }, - "pagination": { "default": "Pagination", "type": { "name": "elementType | null" } }, - "panel": { "default": "GridPanel", "type": { "name": "elementType" } }, - "preferencesPanel": { "default": "GridPreferencesPanel", "type": { "name": "elementType" } }, - "quickFilterClearIcon": { "default": "GridCloseIcon", "type": { "name": "elementType" } }, - "quickFilterIcon": { "default": "GridSearchIcon", "type": { "name": "elementType" } }, - "row": { "default": "GridRow", "type": { "name": "elementType" } }, - "rowReorderIcon": { "default": "GridDragIcon", "type": { "name": "elementType" } }, - "skeletonCell": { "default": "GridSkeletonCell", "type": { "name": "elementType" } }, - "toolbar": { "default": "null", "type": { "name": "elementType | null" } }, - "treeDataCollapseIcon": { "default": "GridExpandMoreIcon", "type": { "name": "elementType" } }, - "treeDataExpandIcon": { "default": "GridKeyboardArrowRight", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "baseButton", + "description": "The custom Button component used in the grid.", + "default": "Button" + }, + { + "class": null, + "name": "baseCheckbox", + "description": "The custom Checkbox component used in the grid for both header and cells.", + "default": "Checkbox" + }, + { + "class": null, + "name": "baseChip", + "description": "The custom Chip component used in the grid.", + "default": "Chip" + }, + { + "class": null, + "name": "baseFormControl", + "description": "The custom FormControl component used in the grid.", + "default": "FormControl" + }, + { + "class": null, + "name": "baseIconButton", + "description": "The custom IconButton component used in the grid.", + "default": "IconButton" + }, + { + "class": null, + "name": "baseInputAdornment", + "description": "The custom InputAdornment component used in the grid.", + "default": "InputAdornment" + }, + { + "class": null, + "name": "baseInputLabel", + "description": "The custom InputLabel component used in the grid.", + "default": "InputLabel" + }, + { + "class": null, + "name": "basePopper", + "description": "The custom Popper component used in the grid.", + "default": "Popper" + }, + { + "class": null, + "name": "baseSelect", + "description": "The custom Select component used in the grid.", + "default": "Select" + }, + { + "class": null, + "name": "baseSelectOption", + "description": "The custom SelectOption component used in the grid.", + "default": "MenuItem" + }, + { + "class": null, + "name": "baseSwitch", + "description": "The custom Switch component used in the grid.", + "default": "Switch" + }, + { + "class": null, + "name": "baseTextField", + "description": "The custom TextField component used in the grid.", + "default": "TextField" + }, + { + "class": null, + "name": "baseTooltip", + "description": "The custom Tooltip component used in the grid.", + "default": "Tooltip" + }, + { + "class": null, + "name": "booleanCellFalseIcon", + "description": "Icon displayed on the boolean cell to represent the false value.", + "default": "GridCloseIcon" + }, + { + "class": null, + "name": "booleanCellTrueIcon", + "description": "Icon displayed on the boolean cell to represent the true value.", + "default": "GridCheckIcon" + }, + { + "class": null, + "name": "cell", + "description": "Component rendered for each cell.", + "default": "GridCell" + }, + { + "class": null, + "name": "columnFilteredIcon", + "description": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "default": "GridFilterAltIcon" + }, + { + "class": null, + "name": "columnHeaderFilterIconButton", + "description": "Filter icon component rendered in each column header.", + "default": "GridColumnHeaderFilterIconButton" + }, + { + "class": null, + "name": "columnHeaders", + "description": "Component responsible for rendering the column headers.", + "default": "DataGridColumnHeaders" + }, + { + "class": null, + "name": "columnMenu", + "description": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "default": "GridColumnMenu" + }, + { + "class": null, + "name": "columnMenuClearIcon", + "description": "Icon displayed in column menu for clearing values", + "default": "GridClearIcon" + }, + { + "class": null, + "name": "columnMenuFilterIcon", + "description": "Icon displayed in column menu for filter", + "default": "GridFilterAltIcon" + }, + { + "class": null, + "name": "columnMenuHideIcon", + "description": "Icon displayed in column menu for hiding column", + "default": "GridVisibilityOffIcon" + }, + { + "class": null, + "name": "columnMenuIcon", + "description": "Icon displayed on the side of the column header title to display the filter input component.", + "default": "GridTripleDotsVerticalIcon" + }, + { + "class": null, + "name": "columnMenuManageColumnsIcon", + "description": "Icon displayed in column menu for showing all columns", + "default": "GridViewColumnIcon" + }, + { + "class": null, + "name": "columnMenuSortAscendingIcon", + "description": "Icon displayed in column menu for ascending sort", + "default": "GridArrowUpwardIcon" + }, + { + "class": null, + "name": "columnMenuSortDescendingIcon", + "description": "Icon displayed in column menu for descending sort", + "default": "GridArrowDownwardIcon" + }, + { + "class": null, + "name": "columnReorderIcon", + "description": "Icon displayed on the column reorder button.", + "default": "GridDragIcon" + }, + { + "class": null, + "name": "columnResizeIcon", + "description": "Icon displayed in between two column headers that allows to resize the column header.", + "default": "GridSeparatorIcon" + }, + { + "class": null, + "name": "columnSelectorIcon", + "description": "Icon displayed on the column menu selector tab.", + "default": "GridColumnIcon" + }, + { + "class": null, + "name": "columnSortedAscendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in ascending order.", + "default": "GridArrowUpwardIcon" + }, + { + "class": null, + "name": "columnSortedDescendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in descending order.", + "default": "GridArrowDownwardIcon" + }, + { + "class": null, + "name": "columnUnsortedIcon", + "description": "Icon displayed on the side of the column header title when unsorted.", + "default": "GridColumnUnsortedIcon" + }, + { + "class": null, + "name": "columnsPanel", + "description": "GridColumns panel component rendered when clicking the columns button.", + "default": "GridColumnsPanel" + }, + { + "class": null, + "name": "densityComfortableIcon", + "description": "Icon displayed on the "comfortable" density option in the toolbar.", + "default": "GridViewStreamIcon" + }, + { + "class": null, + "name": "densityCompactIcon", + "description": "Icon displayed on the compact density option in the toolbar.", + "default": "GridViewHeadlineIcon" + }, + { + "class": null, + "name": "densityStandardIcon", + "description": "Icon displayed on the standard density option in the toolbar.", + "default": "GridTableRowsIcon" + }, + { + "class": null, + "name": "detailPanelCollapseIcon", + "description": "Icon displayed on the detail panel toggle column when expanded.", + "default": "GridRemoveIcon" + }, + { + "class": null, + "name": "detailPanelExpandIcon", + "description": "Icon displayed on the detail panel toggle column when collapsed.", + "default": "GridAddIcon" + }, + { + "class": null, + "name": "exportIcon", + "description": "Icon displayed on the open export button present in the toolbar by default.", + "default": "GridSaveAltIcon" + }, + { + "class": null, + "name": "filterPanel", + "description": "Filter panel component rendered when clicking the filter button.", + "default": "GridFilterPanel" + }, + { + "class": null, + "name": "filterPanelAddIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridAddIcon" + }, + { + "class": null, + "name": "filterPanelDeleteIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridDeleteIcon" + }, + { + "class": null, + "name": "filterPanelRemoveAllIcon", + "description": "Icon displayed for deleting all the active filters from filter panel.", + "default": "GridDeleteForeverIcon" + }, + { + "class": null, + "name": "footer", + "description": "Footer component rendered at the bottom of the grid viewport.", + "default": "GridFooter" + }, + { + "class": null, + "name": "groupingCriteriaCollapseIcon", + "description": "Icon displayed on the grouping column when the children are expanded", + "default": "GridExpandMoreIcon" + }, + { + "class": null, + "name": "groupingCriteriaExpandIcon", + "description": "Icon displayed on the grouping column when the children are collapsed", + "default": "GridKeyboardArrowRight" + }, + { + "class": null, + "name": "loadIcon", + "description": "Icon displayed on the input while processing.", + "default": "GridLoadIcon" + }, + { + "class": null, + "name": "loadingOverlay", + "description": "Loading overlay component rendered when the grid is in a loading state.", + "default": "GridLoadingOverlay" + }, + { + "class": null, + "name": "moreActionsIcon", + "description": "Icon displayed on the actions column type to open the menu.", + "default": "GridMoreVertIcon" + }, + { + "class": null, + "name": "noResultsOverlay", + "description": "No results overlay component rendered when the grid has no results after filtering.", + "default": "GridNoResultsOverlay" + }, + { + "class": null, + "name": "noRowsOverlay", + "description": "No rows overlay component rendered when the grid has no rows.", + "default": "GridNoRowsOverlay" + }, + { + "class": null, + "name": "openFilterButtonIcon", + "description": "Icon displayed on the open filter button present in the toolbar by default.", + "default": "GridFilterListIcon" + }, + { + "class": null, + "name": "pagination", + "description": "Pagination component rendered in the grid footer by default.", + "default": "Pagination" + }, + { + "class": null, + "name": "panel", + "description": "Panel component wrapping the filters and columns panels.", + "default": "GridPanel" + }, + { + "class": null, + "name": "preferencesPanel", + "description": "PreferencesPanel component rendered inside the Header component.", + "default": "GridPreferencesPanel" + }, + { + "class": null, + "name": "quickFilterClearIcon", + "description": "Icon displayed on the quick filter reset input.", + "default": "GridCloseIcon" + }, + { + "class": null, + "name": "quickFilterIcon", + "description": "Icon displayed on the quick filter input.", + "default": "GridSearchIcon" + }, + { + "class": null, + "name": "row", + "description": "Component rendered for each row.", + "default": "GridRow" + }, + { + "class": null, + "name": "rowReorderIcon", + "description": "Icon displayed on the reorder column type to reorder a row.", + "default": "GridDragIcon" + }, + { + "class": null, + "name": "skeletonCell", + "description": "Component rendered for each skeleton cell.", + "default": "GridSkeletonCell" + }, + { + "class": null, + "name": "toolbar", + "description": "Toolbar component rendered inside the Header component.", + "default": "null" + }, + { + "class": null, + "name": "treeDataCollapseIcon", + "description": "Icon displayed on the tree data toggling column when the children are expanded", + "default": "GridExpandMoreIcon" + }, + { + "class": null, + "name": "treeDataExpandIcon", + "description": "Icon displayed on the tree data toggling column when the children are collapsed", + "default": "GridKeyboardArrowRight" + } + ], "name": "DataGrid", "styles": { "classes": [ diff --git a/docs/pages/x/api/data-grid/grid-filter-form.json b/docs/pages/x/api/data-grid/grid-filter-form.json index 9d44441cad60d..eac49fd22323c 100644 --- a/docs/pages/x/api/data-grid/grid-filter-form.json +++ b/docs/pages/x/api/data-grid/grid-filter-form.json @@ -50,7 +50,7 @@ "showMultiFilterOperators": { "type": { "name": "bool" } }, "valueInputProps": { "type": { "name": "any" }, "default": "{}" } }, - "slots": {}, + "slots": [], "name": "GridFilterForm", "styles": { "classes": [], "globalClasses": {}, "name": "MuiDataGrid" }, "forwardsRefTo": "GridRoot", diff --git a/docs/pages/x/api/data-grid/grid-filter-panel.json b/docs/pages/x/api/data-grid/grid-filter-panel.json index 480ee2235022b..b5e455051cebd 100644 --- a/docs/pages/x/api/data-grid/grid-filter-panel.json +++ b/docs/pages/x/api/data-grid/grid-filter-panel.json @@ -28,7 +28,7 @@ "additionalPropsInfo": { "sx": true } } }, - "slots": {}, + "slots": [], "name": "GridFilterPanel", "styles": { "classes": [], "globalClasses": {}, "name": "MuiDataGrid" }, "forwardsRefTo": "GridRoot", diff --git a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json index 063261483711a..318fc2faa26bf 100644 --- a/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json +++ b/docs/pages/x/api/data-grid/grid-toolbar-quick-filter.json @@ -18,7 +18,7 @@ } } }, - "slots": {}, + "slots": [], "name": "GridToolbarQuickFilter", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiDataGrid" }, "forwardsRefTo": "GridRoot", diff --git a/docs/pages/x/api/date-pickers/date-calendar.json b/docs/pages/x/api/date-pickers/date-calendar.json index 5e0a4825ee261..0ab9b721a2e40 100644 --- a/docs/pages/x/api/date-pickers/date-calendar.json +++ b/docs/pages/x/api/date-pickers/date-calendar.json @@ -149,15 +149,50 @@ "default": "3" } }, - "slots": { - "day": { "default": "PickersDay", "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "day", + "description": "Custom component for day.\nCheck the PickersDay component.", + "default": "PickersDay" + }, + { + "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": "DateCalendar", "styles": { "classes": ["root", "viewTransitionContainer"], diff --git a/docs/pages/x/api/date-pickers/date-field.json b/docs/pages/x/api/date-pickers/date-field.json index 6b2cbc7963a97..7aa681d1cffbd 100644 --- a/docs/pages/x/api/date-pickers/date-field.json +++ b/docs/pages/x/api/date-pickers/date-field.json @@ -136,9 +136,14 @@ "default": "'outlined'" } }, - "slots": { - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + } + ], "name": "DateField", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiDateField" }, "spread": true, diff --git a/docs/pages/x/api/date-pickers/date-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-picker-toolbar.json index 919852e3f993e..5d8522c8f6c83 100644 --- a/docs/pages/x/api/date-pickers/date-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-picker-toolbar.json @@ -17,7 +17,7 @@ "toolbarFormat": { "type": { "name": "string" } }, "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" } }, - "slots": {}, + "slots": [], "name": "DatePickerToolbar", "styles": { "classes": ["root", "title"], "globalClasses": {}, "name": "MuiDatePickerToolbar" }, "filename": "/packages/x-date-pickers/src/DatePicker/DatePickerToolbar.tsx", diff --git a/docs/pages/x/api/date-pickers/date-picker.json b/docs/pages/x/api/date-pickers/date-picker.json index 06759137ecfdd..b801cd6bb9c46 100644 --- a/docs/pages/x/api/date-pickers/date-picker.json +++ b/docs/pages/x/api/date-pickers/date-picker.json @@ -184,37 +184,143 @@ "default": "4 on desktop, 3 on mobile" } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "day": { "default": "PickersDay", "type": { "name": "elementType" } }, - "desktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } }, - "desktopTransition": { - "default": "Grow from @mui/material", - "type": { "name": "elementType" } - }, - "desktopTrapFocus": { - "default": "TrapFocus from @mui/material", - "type": { "name": "elementType" } - }, - "dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } }, - "field": { "type": { "name": "elementType" } }, - "inputAdornment": { "default": "InputAdornment", "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "mobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } }, - "mobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "openPickerButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "openPickerIcon": { "type": { "name": "elementType" } }, - "popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } }, - "toolbar": { "default": "DatePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "day", + "description": "Custom component for day.\nCheck the PickersDay component.", + "default": "PickersDay" + }, + { + "class": null, + "name": "desktopPaper", + "description": "Custom component for the paper rendered inside the desktop picker's Popper.", + "default": "PickersPopperPaper" + }, + { + "class": null, + "name": "desktopTransition", + "description": "Custom component for the desktop popper Transition.", + "default": "Grow from @mui/material" + }, + { + "class": null, + "name": "desktopTrapFocus", + "description": "Custom component for trapping the focus inside the views on desktop.", + "default": "TrapFocus from @mui/material" + }, + { + "class": null, + "name": "dialog", + "description": "Custom component for the dialog inside which the views are rendered on mobile.", + "default": "PickersModalDialogRoot" + }, + { + "class": null, + "name": "field", + "description": "Component used to enter the date with the keyboard." + }, + { + "class": null, + "name": "inputAdornment", + "description": "Component displayed on the start or end input adornment used to open the picker on desktop.", + "default": "InputAdornment" + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "class": null, + "name": "leftArrowIcon", + "description": "Icon displayed in the left view switch button.", + "default": "ArrowLeft" + }, + { + "class": null, + "name": "mobilePaper", + "description": "Custom component for the paper rendered inside the mobile picker's Dialog.", + "default": "Paper from @mui/material" + }, + { + "class": null, + "name": "mobileTransition", + "description": "Custom component for the mobile dialog Transition.", + "default": "Fade from @mui/material" + }, + { + "class": null, + "name": "nextIconButton", + "description": "Button allowing to switch to the right view.", + "default": "IconButton" + }, + { + "class": null, + "name": "openPickerButton", + "description": "Button to open the picker on desktop.", + "default": "IconButton" + }, + { + "class": null, + "name": "openPickerIcon", + "description": "Icon displayed in the open picker button on desktop." + }, + { + "class": null, + "name": "popper", + "description": "Custom component for the popper inside which the views are rendered on desktop.", + "default": "Popper from @mui/material" + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "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" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value inside the default field.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "DatePickerToolbar" + } + ], "name": "DatePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiDatePicker" }, "filename": "/packages/x-date-pickers/src/DatePicker/DatePicker.tsx", diff --git a/docs/pages/x/api/date-pickers/date-range-calendar.json b/docs/pages/x/api/date-pickers/date-range-calendar.json index 5691c5b437614..d55c2d1cb0524 100644 --- a/docs/pages/x/api/date-pickers/date-range-calendar.json +++ b/docs/pages/x/api/date-pickers/date-range-calendar.json @@ -104,15 +104,50 @@ }, "value": { "type": { "name": "arrayOf", "description": "Array<any>" } } }, - "slots": { - "day": { "default": "DateRangePickersDay", "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "day", + "description": "Custom component for day in range pickers.\nCheck the DateRangePickersDay component.", + "default": "DateRangePickersDay" + }, + { + "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": "DateRangeCalendar", "styles": { "classes": ["root", "monthContainer", "dayDragging"], diff --git a/docs/pages/x/api/date-pickers/date-range-picker-day.json b/docs/pages/x/api/date-pickers/date-range-picker-day.json index 357d9adab67fa..b6d39cebf5c3a 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker-day.json +++ b/docs/pages/x/api/date-pickers/date-range-picker-day.json @@ -45,7 +45,7 @@ } } }, - "slots": {}, + "slots": [], "name": "DateRangePickerDay", "styles": { "classes": [ diff --git a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json index c2f90e2ec63a5..abe4c3e91fe2e 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-range-picker-toolbar.json @@ -5,7 +5,7 @@ "toolbarFormat": { "type": { "name": "string" } }, "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" } }, - "slots": {}, + "slots": [], "name": "DateRangePickerToolbar", "styles": { "classes": ["root", "container"], diff --git a/docs/pages/x/api/date-pickers/date-range-picker.json b/docs/pages/x/api/date-pickers/date-range-picker.json index c8b80fb49d8c5..72945d9132cdb 100644 --- a/docs/pages/x/api/date-pickers/date-range-picker.json +++ b/docs/pages/x/api/date-pickers/date-range-picker.json @@ -151,36 +151,132 @@ "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, "viewRenderers": { "type": { "name": "shape", "description": "{ day?: func }" } } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "day": { "default": "DateRangePickersDay", "type": { "name": "elementType" } }, - "desktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } }, - "desktopTransition": { - "default": "Grow from @mui/material", - "type": { "name": "elementType" } - }, - "desktopTrapFocus": { - "default": "TrapFocus from @mui/material", - "type": { "name": "elementType" } - }, - "dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } }, - "field": { "type": { "name": "elementType" } }, - "fieldRoot": { "type": { "name": "elementType" } }, - "fieldSeparator": { "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "mobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } }, - "mobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } }, - "toolbar": { "default": "DateTimePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "day", + "description": "Custom component for day in range pickers.\nCheck the DateRangePickersDay component.", + "default": "DateRangePickersDay" + }, + { + "class": null, + "name": "desktopPaper", + "description": "Custom component for the paper rendered inside the desktop picker's Popper.", + "default": "PickersPopperPaper" + }, + { + "class": null, + "name": "desktopTransition", + "description": "Custom component for the desktop popper Transition.", + "default": "Grow from @mui/material" + }, + { + "class": null, + "name": "desktopTrapFocus", + "description": "Custom component for trapping the focus inside the views on desktop.", + "default": "TrapFocus from @mui/material" + }, + { + "class": null, + "name": "dialog", + "description": "Custom component for the dialog inside which the views are rendered on mobile.", + "default": "PickersModalDialogRoot" + }, + { "class": null, "name": "field", "description": "" }, + { + "class": null, + "name": "fieldRoot", + "description": "Element rendered at the root.\nIgnored if the field has only one input." + }, + { + "class": null, + "name": "fieldSeparator", + "description": "Element rendered between the two inputs.\nIgnored if the field has only one input." + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "class": null, + "name": "leftArrowIcon", + "description": "Icon displayed in the left view switch button.", + "default": "ArrowLeft" + }, + { + "class": null, + "name": "mobilePaper", + "description": "Custom component for the paper rendered inside the mobile picker's Dialog.", + "default": "Paper from @mui/material" + }, + { + "class": null, + "name": "mobileTransition", + "description": "Custom component for the mobile dialog Transition.", + "default": "Fade from @mui/material" + }, + { + "class": null, + "name": "nextIconButton", + "description": "Button allowing to switch to the right view.", + "default": "IconButton" + }, + { + "class": null, + "name": "popper", + "description": "Custom component for the popper inside which the views are rendered on desktop.", + "default": "Popper from @mui/material" + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "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" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "DateTimePickerToolbar" + } + ], "name": "DateRangePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiDateRangePicker" }, "spread": false, diff --git a/docs/pages/x/api/date-pickers/date-time-field.json b/docs/pages/x/api/date-pickers/date-time-field.json index 0fe3be4fa37c0..2e58eb927bdde 100644 --- a/docs/pages/x/api/date-pickers/date-time-field.json +++ b/docs/pages/x/api/date-pickers/date-time-field.json @@ -161,9 +161,14 @@ "default": "'outlined'" } }, - "slots": { - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + } + ], "name": "DateTimeField", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiDateTimeField" }, "spread": true, diff --git a/docs/pages/x/api/date-pickers/date-time-picker-tabs.json b/docs/pages/x/api/date-pickers/date-time-picker-tabs.json index 039926bb0e700..d6f5a27729ff0 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker-tabs.json +++ b/docs/pages/x/api/date-pickers/date-time-picker-tabs.json @@ -20,7 +20,7 @@ }, "timeIcon": { "type": { "name": "node" }, "default": "Time" } }, - "slots": {}, + "slots": [], "name": "DateTimePickerTabs", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiDateTimePickerTabs" }, "filename": "/packages/x-date-pickers/src/DateTimePicker/DateTimePickerTabs.tsx", diff --git a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json index 61b8f1ce13b73..7d1070ae85fea 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/date-time-picker-toolbar.json @@ -18,7 +18,7 @@ "toolbarFormat": { "type": { "name": "string" } }, "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" } }, - "slots": {}, + "slots": [], "name": "DateTimePickerToolbar", "styles": { "classes": [ diff --git a/docs/pages/x/api/date-pickers/date-time-picker.json b/docs/pages/x/api/date-pickers/date-time-picker.json index 2a4badf7fbc95..1265e4721415b 100644 --- a/docs/pages/x/api/date-pickers/date-time-picker.json +++ b/docs/pages/x/api/date-pickers/date-time-picker.json @@ -221,42 +221,155 @@ "default": "4 on desktop, 3 on mobile" } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "day": { "default": "PickersDay", "type": { "name": "elementType" } }, - "desktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } }, - "desktopTransition": { - "default": "Grow from @mui/material", - "type": { "name": "elementType" } - }, - "desktopTrapFocus": { - "default": "TrapFocus from @mui/material", - "type": { "name": "elementType" } - }, - "dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } }, - "digitalClockSectionItem": { - "default": "MenuItem from '@mui/material'", - "type": { "name": "elementType" } - }, - "field": { "type": { "name": "elementType" } }, - "inputAdornment": { "default": "InputAdornment", "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "mobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } }, - "mobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "openPickerButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "openPickerIcon": { "type": { "name": "elementType" } }, - "popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } }, - "tabs": { "default": "DateTimePickerTabs", "type": { "name": "elementType" } }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } }, - "toolbar": { "default": "DateTimePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "day", + "description": "Custom component for day.\nCheck the PickersDay component.", + "default": "PickersDay" + }, + { + "class": null, + "name": "desktopPaper", + "description": "Custom component for the paper rendered inside the desktop picker's Popper.", + "default": "PickersPopperPaper" + }, + { + "class": null, + "name": "desktopTransition", + "description": "Custom component for the desktop popper Transition.", + "default": "Grow from @mui/material" + }, + { + "class": null, + "name": "desktopTrapFocus", + "description": "Custom component for trapping the focus inside the views on desktop.", + "default": "TrapFocus from @mui/material" + }, + { + "class": null, + "name": "dialog", + "description": "Custom component for the dialog inside which the views are rendered on mobile.", + "default": "PickersModalDialogRoot" + }, + { + "class": null, + "name": "digitalClockSectionItem", + "description": "Component responsible for rendering a single multi section digital clock section item.", + "default": "MenuItem from '@mui/material'" + }, + { + "class": null, + "name": "field", + "description": "Component used to enter the date with the keyboard." + }, + { + "class": null, + "name": "inputAdornment", + "description": "Component displayed on the start or end input adornment used to open the picker on desktop.", + "default": "InputAdornment" + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "class": null, + "name": "leftArrowIcon", + "description": "Icon displayed in the left view switch button.", + "default": "ArrowLeft" + }, + { + "class": null, + "name": "mobilePaper", + "description": "Custom component for the paper rendered inside the mobile picker's Dialog.", + "default": "Paper from @mui/material" + }, + { + "class": null, + "name": "mobileTransition", + "description": "Custom component for the mobile dialog Transition.", + "default": "Fade from @mui/material" + }, + { + "class": null, + "name": "nextIconButton", + "description": "Button allowing to switch to the right view.", + "default": "IconButton" + }, + { + "class": null, + "name": "openPickerButton", + "description": "Button to open the picker on desktop.", + "default": "IconButton" + }, + { + "class": null, + "name": "openPickerIcon", + "description": "Icon displayed in the open picker button on desktop." + }, + { + "class": null, + "name": "popper", + "description": "Custom component for the popper inside which the views are rendered on desktop.", + "default": "Popper from @mui/material" + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "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" + }, + { + "class": null, + "name": "tabs", + "description": "Tabs enabling toggling between date and time pickers.", + "default": "DateTimePickerTabs" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value inside the default field.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "DateTimePickerToolbar" + } + ], "name": "DateTimePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiDateTimePicker" }, "filename": "/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx", diff --git a/docs/pages/x/api/date-pickers/day-calendar-skeleton.json b/docs/pages/x/api/date-pickers/day-calendar-skeleton.json index 6c4f28a3b4210..1773178bee6e9 100644 --- a/docs/pages/x/api/date-pickers/day-calendar-skeleton.json +++ b/docs/pages/x/api/date-pickers/day-calendar-skeleton.json @@ -9,7 +9,7 @@ "additionalPropsInfo": { "sx": true } } }, - "slots": {}, + "slots": [], "name": "DayCalendarSkeleton", "styles": { "classes": ["root", "week", "daySkeleton"], diff --git a/docs/pages/x/api/date-pickers/desktop-date-picker.json b/docs/pages/x/api/date-pickers/desktop-date-picker.json index a068a903be280..ee88786b84d10 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-picker.json @@ -180,34 +180,125 @@ "default": "4" } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "day": { "default": "PickersDay", "type": { "name": "elementType" } }, - "desktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } }, - "desktopTransition": { - "default": "Grow from @mui/material", - "type": { "name": "elementType" } - }, - "desktopTrapFocus": { - "default": "TrapFocus from @mui/material", - "type": { "name": "elementType" } - }, - "field": { "type": { "name": "elementType" } }, - "inputAdornment": { "default": "InputAdornment", "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "openPickerButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "openPickerIcon": { "type": { "name": "elementType" } }, - "popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } }, - "toolbar": { "default": "DatePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "day", + "description": "Custom component for day.\nCheck the PickersDay component.", + "default": "PickersDay" + }, + { + "class": null, + "name": "desktopPaper", + "description": "Custom component for the paper rendered inside the desktop picker's Popper.", + "default": "PickersPopperPaper" + }, + { + "class": null, + "name": "desktopTransition", + "description": "Custom component for the desktop popper Transition.", + "default": "Grow from @mui/material" + }, + { + "class": null, + "name": "desktopTrapFocus", + "description": "Custom component for trapping the focus inside the views on desktop.", + "default": "TrapFocus from @mui/material" + }, + { + "class": null, + "name": "field", + "description": "Component used to enter the date with the keyboard." + }, + { + "class": null, + "name": "inputAdornment", + "description": "Component displayed on the start or end input adornment used to open the picker on desktop.", + "default": "InputAdornment" + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "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": "openPickerButton", + "description": "Button to open the picker on desktop.", + "default": "IconButton" + }, + { + "class": null, + "name": "openPickerIcon", + "description": "Icon displayed in the open picker button on desktop." + }, + { + "class": null, + "name": "popper", + "description": "Custom component for the popper inside which the views are rendered on desktop.", + "default": "Popper from @mui/material" + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "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" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value inside the default field.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "DatePickerToolbar" + } + ], "name": "DesktopDatePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiDesktopDatePicker" }, "filename": "/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx", diff --git a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json index b58adef2951b7..136b5e4a97869 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-range-picker.json @@ -147,33 +147,114 @@ "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, "viewRenderers": { "type": { "name": "shape", "description": "{ day?: func }" } } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "day": { "default": "DateRangePickersDay", "type": { "name": "elementType" } }, - "desktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } }, - "desktopTransition": { - "default": "Grow from @mui/material", - "type": { "name": "elementType" } - }, - "desktopTrapFocus": { - "default": "TrapFocus from @mui/material", - "type": { "name": "elementType" } - }, - "field": { "type": { "name": "elementType" } }, - "fieldRoot": { "type": { "name": "elementType" } }, - "fieldSeparator": { "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } }, - "toolbar": { "default": "DateTimePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "day", + "description": "Custom component for day in range pickers.\nCheck the DateRangePickersDay component.", + "default": "DateRangePickersDay" + }, + { + "class": null, + "name": "desktopPaper", + "description": "Custom component for the paper rendered inside the desktop picker's Popper.", + "default": "PickersPopperPaper" + }, + { + "class": null, + "name": "desktopTransition", + "description": "Custom component for the desktop popper Transition.", + "default": "Grow from @mui/material" + }, + { + "class": null, + "name": "desktopTrapFocus", + "description": "Custom component for trapping the focus inside the views on desktop.", + "default": "TrapFocus from @mui/material" + }, + { "class": null, "name": "field", "description": "" }, + { + "class": null, + "name": "fieldRoot", + "description": "Element rendered at the root.\nIgnored if the field has only one input." + }, + { + "class": null, + "name": "fieldSeparator", + "description": "Element rendered between the two inputs.\nIgnored if the field has only one input." + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "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": "popper", + "description": "Custom component for the popper inside which the views are rendered on desktop.", + "default": "Popper from @mui/material" + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "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" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "DateTimePickerToolbar" + } + ], "name": "DesktopDateRangePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiDesktopDateRangePicker" }, "spread": false, diff --git a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json index d347f9ddee8c9..c309940284b31 100644 --- a/docs/pages/x/api/date-pickers/desktop-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-date-time-picker.json @@ -217,39 +217,137 @@ "default": "4" } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "day": { "default": "PickersDay", "type": { "name": "elementType" } }, - "desktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } }, - "desktopTransition": { - "default": "Grow from @mui/material", - "type": { "name": "elementType" } - }, - "desktopTrapFocus": { - "default": "TrapFocus from @mui/material", - "type": { "name": "elementType" } - }, - "digitalClockSectionItem": { - "default": "MenuItem from '@mui/material'", - "type": { "name": "elementType" } - }, - "field": { "type": { "name": "elementType" } }, - "inputAdornment": { "default": "InputAdornment", "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "openPickerButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "openPickerIcon": { "type": { "name": "elementType" } }, - "popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } }, - "tabs": { "default": "DateTimePickerTabs", "type": { "name": "elementType" } }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } }, - "toolbar": { "default": "DateTimePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "day", + "description": "Custom component for day.\nCheck the PickersDay component.", + "default": "PickersDay" + }, + { + "class": null, + "name": "desktopPaper", + "description": "Custom component for the paper rendered inside the desktop picker's Popper.", + "default": "PickersPopperPaper" + }, + { + "class": null, + "name": "desktopTransition", + "description": "Custom component for the desktop popper Transition.", + "default": "Grow from @mui/material" + }, + { + "class": null, + "name": "desktopTrapFocus", + "description": "Custom component for trapping the focus inside the views on desktop.", + "default": "TrapFocus from @mui/material" + }, + { + "class": null, + "name": "digitalClockSectionItem", + "description": "Component responsible for rendering a single multi section digital clock section item.", + "default": "MenuItem from '@mui/material'" + }, + { + "class": null, + "name": "field", + "description": "Component used to enter the date with the keyboard." + }, + { + "class": null, + "name": "inputAdornment", + "description": "Component displayed on the start or end input adornment used to open the picker on desktop.", + "default": "InputAdornment" + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "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": "openPickerButton", + "description": "Button to open the picker on desktop.", + "default": "IconButton" + }, + { + "class": null, + "name": "openPickerIcon", + "description": "Icon displayed in the open picker button on desktop." + }, + { + "class": null, + "name": "popper", + "description": "Custom component for the popper inside which the views are rendered on desktop.", + "default": "Popper from @mui/material" + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "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" + }, + { + "class": null, + "name": "tabs", + "description": "Tabs enabling toggling between date and time pickers.", + "default": "DateTimePickerTabs" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value inside the default field.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "DateTimePickerToolbar" + } + ], "name": "DesktopDateTimePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiDesktopDateTimePicker" }, "filename": "/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx", diff --git a/docs/pages/x/api/date-pickers/desktop-time-picker.json b/docs/pages/x/api/date-pickers/desktop-time-picker.json index 4e7f8a4d08b3e..d5afa190c7917 100644 --- a/docs/pages/x/api/date-pickers/desktop-time-picker.json +++ b/docs/pages/x/api/date-pickers/desktop-time-picker.json @@ -146,39 +146,119 @@ } } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "desktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } }, - "desktopTransition": { - "default": "Grow from @mui/material", - "type": { "name": "elementType" } - }, - "desktopTrapFocus": { - "default": "TrapFocus from @mui/material", - "type": { "name": "elementType" } - }, - "digitalClockItem": { - "default": "MenuItem from '@mui/material'", - "type": { "name": "elementType" } - }, - "digitalClockSectionItem": { - "default": "MenuItem from '@mui/material'", - "type": { "name": "elementType" } - }, - "field": { "type": { "name": "elementType" } }, - "inputAdornment": { "default": "InputAdornment", "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "openPickerButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "openPickerIcon": { "type": { "name": "elementType" } }, - "popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } }, - "toolbar": { "default": "TimePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "desktopPaper", + "description": "Custom component for the paper rendered inside the desktop picker's Popper.", + "default": "PickersPopperPaper" + }, + { + "class": null, + "name": "desktopTransition", + "description": "Custom component for the desktop popper Transition.", + "default": "Grow from @mui/material" + }, + { + "class": null, + "name": "desktopTrapFocus", + "description": "Custom component for trapping the focus inside the views on desktop.", + "default": "TrapFocus from @mui/material" + }, + { + "class": null, + "name": "digitalClockItem", + "description": "Component responsible for rendering a single digital clock item.", + "default": "MenuItem from '@mui/material'" + }, + { + "class": null, + "name": "digitalClockSectionItem", + "description": "Component responsible for rendering a single multi section digital clock section item.", + "default": "MenuItem from '@mui/material'" + }, + { + "class": null, + "name": "field", + "description": "Component used to enter the date with the keyboard." + }, + { + "class": null, + "name": "inputAdornment", + "description": "Component displayed on the start or end input adornment used to open the picker on desktop.", + "default": "InputAdornment" + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "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": "openPickerButton", + "description": "Button to open the picker on desktop.", + "default": "IconButton" + }, + { + "class": null, + "name": "openPickerIcon", + "description": "Icon displayed in the open picker button on desktop." + }, + { + "class": null, + "name": "popper", + "description": "Custom component for the popper inside which the views are rendered on desktop.", + "default": "Popper from @mui/material" + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value inside the default field.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "TimePickerToolbar" + } + ], "name": "DesktopTimePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiDesktopTimePicker" }, "spread": false, diff --git a/docs/pages/x/api/date-pickers/digital-clock.json b/docs/pages/x/api/date-pickers/digital-clock.json index b909ce14d5967..3d6da6f828779 100644 --- a/docs/pages/x/api/date-pickers/digital-clock.json +++ b/docs/pages/x/api/date-pickers/digital-clock.json @@ -85,12 +85,14 @@ "view": { "type": { "name": "enum", "description": "'hours'" } }, "views": { "type": { "name": "arrayOf", "description": "Array<'hours'>" } } }, - "slots": { - "digitalClockItem": { - "default": "MenuItem from '@mui/material'", - "type": { "name": "elementType" } + "slots": [ + { + "class": null, + "name": "digitalClockItem", + "description": "Component responsible for rendering a single digital clock item.", + "default": "MenuItem from '@mui/material'" } - }, + ], "name": "DigitalClock", "styles": { "classes": ["root", "list", "item"], "globalClasses": {}, "name": "MuiDigitalClock" }, "spread": false, diff --git a/docs/pages/x/api/date-pickers/localization-provider.json b/docs/pages/x/api/date-pickers/localization-provider.json index 688a338add846..bb403b6c5b96f 100644 --- a/docs/pages/x/api/date-pickers/localization-provider.json +++ b/docs/pages/x/api/date-pickers/localization-provider.json @@ -11,7 +11,7 @@ "dateLibInstance": { "type": { "name": "any" } }, "localeText": { "type": { "name": "object" } } }, - "slots": {}, + "slots": [], "name": "LocalizationProvider", "styles": { "classes": [], "globalClasses": {}, "name": "MuiLocalizationProvider" }, "filename": "/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx", diff --git a/docs/pages/x/api/date-pickers/mobile-date-picker.json b/docs/pages/x/api/date-pickers/mobile-date-picker.json index 9c4c0d4ef6570..43a2b1690bca7 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-picker.json @@ -180,24 +180,102 @@ "default": "3" } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "day": { "default": "PickersDay", "type": { "name": "elementType" } }, - "dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } }, - "field": { "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "mobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } }, - "mobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } }, - "toolbar": { "default": "DatePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "day", + "description": "Custom component for day.\nCheck the PickersDay component.", + "default": "PickersDay" + }, + { + "class": null, + "name": "dialog", + "description": "Custom component for the dialog inside which the views are rendered on mobile.", + "default": "PickersModalDialogRoot" + }, + { + "class": null, + "name": "field", + "description": "Component used to enter the date with the keyboard." + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "class": null, + "name": "leftArrowIcon", + "description": "Icon displayed in the left view switch button.", + "default": "ArrowLeft" + }, + { + "class": null, + "name": "mobilePaper", + "description": "Custom component for the paper rendered inside the mobile picker's Dialog.", + "default": "Paper from @mui/material" + }, + { + "class": null, + "name": "mobileTransition", + "description": "Custom component for the mobile dialog Transition.", + "default": "Fade from @mui/material" + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "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" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value inside the default field.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "DatePickerToolbar" + } + ], "name": "MobileDatePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiMobileDatePicker" }, "filename": "/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx", diff --git a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json index cd36a4e694513..8af92c0faa4fa 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-range-picker.json @@ -147,26 +147,108 @@ "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, "viewRenderers": { "type": { "name": "shape", "description": "{ day?: func }" } } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "day": { "default": "DateRangePickersDay", "type": { "name": "elementType" } }, - "dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } }, - "field": { "type": { "name": "elementType" } }, - "fieldRoot": { "type": { "name": "elementType" } }, - "fieldSeparator": { "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "mobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } }, - "mobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } }, - "toolbar": { "default": "DateTimePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "day", + "description": "Custom component for day in range pickers.\nCheck the DateRangePickersDay component.", + "default": "DateRangePickersDay" + }, + { + "class": null, + "name": "dialog", + "description": "Custom component for the dialog inside which the views are rendered on mobile.", + "default": "PickersModalDialogRoot" + }, + { "class": null, "name": "field", "description": "" }, + { + "class": null, + "name": "fieldRoot", + "description": "Element rendered at the root.\nIgnored if the field has only one input." + }, + { + "class": null, + "name": "fieldSeparator", + "description": "Element rendered between the two inputs.\nIgnored if the field has only one input." + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "class": null, + "name": "leftArrowIcon", + "description": "Icon displayed in the left view switch button.", + "default": "ArrowLeft" + }, + { + "class": null, + "name": "mobilePaper", + "description": "Custom component for the paper rendered inside the mobile picker's Dialog.", + "default": "Paper from @mui/material" + }, + { + "class": null, + "name": "mobileTransition", + "description": "Custom component for the mobile dialog Transition.", + "default": "Fade from @mui/material" + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "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" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render a date or time inside the default field.\nIt is rendered twice: once for the start element and once for the end element.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "DateTimePickerToolbar" + } + ], "name": "MobileDateRangePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiMobileDateRangePicker" }, "spread": false, diff --git a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json index 69de565868bbf..dd4a7603a1ac3 100644 --- a/docs/pages/x/api/date-pickers/mobile-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-date-time-picker.json @@ -209,25 +209,108 @@ "default": "3" } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "day": { "default": "PickersDay", "type": { "name": "elementType" } }, - "dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } }, - "field": { "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "mobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } }, - "mobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } }, - "tabs": { "default": "DateTimePickerTabs", "type": { "name": "elementType" } }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } }, - "toolbar": { "default": "DateTimePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "day", + "description": "Custom component for day.\nCheck the PickersDay component.", + "default": "PickersDay" + }, + { + "class": null, + "name": "dialog", + "description": "Custom component for the dialog inside which the views are rendered on mobile.", + "default": "PickersModalDialogRoot" + }, + { + "class": null, + "name": "field", + "description": "Component used to enter the date with the keyboard." + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "class": null, + "name": "leftArrowIcon", + "description": "Icon displayed in the left view switch button.", + "default": "ArrowLeft" + }, + { + "class": null, + "name": "mobilePaper", + "description": "Custom component for the paper rendered inside the mobile picker's Dialog.", + "default": "Paper from @mui/material" + }, + { + "class": null, + "name": "mobileTransition", + "description": "Custom component for the mobile dialog Transition.", + "default": "Fade from @mui/material" + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "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" + }, + { + "class": null, + "name": "tabs", + "description": "Tabs enabling toggling between date and time pickers.", + "default": "DateTimePickerTabs" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value inside the default field.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "DateTimePickerToolbar" + } + ], "name": "MobileDateTimePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiMobileDateTimePicker" }, "filename": "/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx", diff --git a/docs/pages/x/api/date-pickers/mobile-time-picker.json b/docs/pages/x/api/date-pickers/mobile-time-picker.json index d2d40602d2b33..0b45e1e1ced9f 100644 --- a/docs/pages/x/api/date-pickers/mobile-time-picker.json +++ b/docs/pages/x/api/date-pickers/mobile-time-picker.json @@ -134,21 +134,84 @@ } } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } }, - "field": { "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "mobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } }, - "mobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } }, - "toolbar": { "default": "TimePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "dialog", + "description": "Custom component for the dialog inside which the views are rendered on mobile.", + "default": "PickersModalDialogRoot" + }, + { + "class": null, + "name": "field", + "description": "Component used to enter the date with the keyboard." + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "class": null, + "name": "leftArrowIcon", + "description": "Icon displayed in the left view switch button.", + "default": "ArrowLeft" + }, + { + "class": null, + "name": "mobilePaper", + "description": "Custom component for the paper rendered inside the mobile picker's Dialog.", + "default": "Paper from @mui/material" + }, + { + "class": null, + "name": "mobileTransition", + "description": "Custom component for the mobile dialog Transition.", + "default": "Fade from @mui/material" + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value inside the default field.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "TimePickerToolbar" + } + ], "name": "MobileTimePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiMobileTimePicker" }, "spread": false, diff --git a/docs/pages/x/api/date-pickers/month-calendar.json b/docs/pages/x/api/date-pickers/month-calendar.json index 87f5dae740b13..593b0213bfe41 100644 --- a/docs/pages/x/api/date-pickers/month-calendar.json +++ b/docs/pages/x/api/date-pickers/month-calendar.json @@ -43,7 +43,7 @@ }, "value": { "type": { "name": "any" } } }, - "slots": {}, + "slots": [], "name": "MonthCalendar", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiMonthCalendar" }, "spread": true, diff --git a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json index 493266254e389..414a3ec9e755f 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-date-range-field.json @@ -95,14 +95,26 @@ "useFlexGap": { "type": { "name": "bool" } }, "value": { "type": { "name": "arrayOf", "description": "Array<any>" } } }, - "slots": { - "root": { "default": "MultiInputDateRangeFieldRoot", "type": { "name": "elementType" } }, - "separator": { - "default": "MultiInputDateRangeFieldSeparator", - "type": { "name": "elementType" } + "slots": [ + { + "class": null, + "name": "root", + "description": "Element rendered at the root.", + "default": "MultiInputDateRangeFieldRoot" }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } - }, + { + "class": null, + "name": "separator", + "description": "Element rendered between the two inputs.", + "default": "MultiInputDateRangeFieldSeparator" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render a date.\nIt is rendered twice: once for the start date and once for the end date.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + } + ], "name": "MultiInputDateRangeField", "styles": { "classes": [], "globalClasses": {}, "name": "MuiMultiInputDateRangeField" }, "filename": "/packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx", diff --git a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json index 200446c96c420..79f2eeac3279c 100644 --- a/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-date-time-range-field.json @@ -120,14 +120,26 @@ "useFlexGap": { "type": { "name": "bool" } }, "value": { "type": { "name": "arrayOf", "description": "Array<any>" } } }, - "slots": { - "root": { "default": "MultiInputDateTimeRangeFieldRoot", "type": { "name": "elementType" } }, - "separator": { - "default": "MultiInputDateTimeRangeFieldSeparator", - "type": { "name": "elementType" } - }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "root", + "description": "Element rendered at the root.", + "default": "MultiInputDateTimeRangeFieldRoot" + }, + { + "class": null, + "name": "separator", + "description": "Element rendered between the two inputs.", + "default": "MultiInputDateTimeRangeFieldSeparator" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render a date and time.\nIt is rendered twice: once for the start date time and once for the end date time.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + } + ], "name": "MultiInputDateTimeRangeField", "styles": { "classes": [], "globalClasses": {}, "name": "MuiMultiInputDateTimeRangeField" }, "filename": "/packages/x-date-pickers-pro/src/MultiInputDateTimeRangeField/MultiInputDateTimeRangeField.tsx", diff --git a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json index 4cbafc035ca11..a4807876b6f8d 100644 --- a/docs/pages/x/api/date-pickers/multi-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/multi-input-time-range-field.json @@ -108,14 +108,26 @@ "useFlexGap": { "type": { "name": "bool" } }, "value": { "type": { "name": "arrayOf", "description": "Array<any>" } } }, - "slots": { - "root": { "default": "MultiInputTimeRangeFieldRoot", "type": { "name": "elementType" } }, - "separator": { - "default": "MultiInputTimeRangeFieldSeparator", - "type": { "name": "elementType" } + "slots": [ + { + "class": null, + "name": "root", + "description": "Element rendered at the root.", + "default": "MultiInputTimeRangeFieldRoot" }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } - }, + { + "class": null, + "name": "separator", + "description": "Element rendered between the two inputs.", + "default": "MultiInputTimeRangeFieldSeparator" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render a time.\nIt is rendered twice: once for the start time and once for the end time.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + } + ], "name": "MultiInputTimeRangeField", "styles": { "classes": [], "globalClasses": {}, "name": "MuiMultiInputTimeRangeField" }, "filename": "/packages/x-date-pickers-pro/src/MultiInputTimeRangeField/MultiInputTimeRangeField.tsx", diff --git a/docs/pages/x/api/date-pickers/multi-section-digital-clock.json b/docs/pages/x/api/date-pickers/multi-section-digital-clock.json index c8f97cb52c20d..07b7287e1e75e 100644 --- a/docs/pages/x/api/date-pickers/multi-section-digital-clock.json +++ b/docs/pages/x/api/date-pickers/multi-section-digital-clock.json @@ -111,12 +111,14 @@ } } }, - "slots": { - "digitalClockSectionItem": { - "default": "MenuItem from '@mui/material'", - "type": { "name": "elementType" } + "slots": [ + { + "class": null, + "name": "digitalClockSectionItem", + "description": "Component responsible for rendering a single multi section digital clock section item.", + "default": "MenuItem from '@mui/material'" } - }, + ], "name": "MultiSectionDigitalClock", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiMultiSectionDigitalClock" }, "spread": false, diff --git a/docs/pages/x/api/date-pickers/pickers-action-bar.json b/docs/pages/x/api/date-pickers/pickers-action-bar.json index 20adc76236895..9f96ac8ed3c34 100644 --- a/docs/pages/x/api/date-pickers/pickers-action-bar.json +++ b/docs/pages/x/api/date-pickers/pickers-action-bar.json @@ -16,7 +16,7 @@ "additionalPropsInfo": { "sx": true } } }, - "slots": {}, + "slots": [], "name": "PickersActionBar", "styles": { "classes": ["root", "spacing"], "globalClasses": {}, "name": "MuiPickersActionBar" }, "filename": "/packages/x-date-pickers/src/PickersActionBar/PickersActionBar.tsx", diff --git a/docs/pages/x/api/date-pickers/pickers-day.json b/docs/pages/x/api/date-pickers/pickers-day.json index 0681446bb1350..925331846c5af 100644 --- a/docs/pages/x/api/date-pickers/pickers-day.json +++ b/docs/pages/x/api/date-pickers/pickers-day.json @@ -38,7 +38,7 @@ } } }, - "slots": {}, + "slots": [], "name": "PickersDay", "styles": { "classes": [ diff --git a/docs/pages/x/api/date-pickers/pickers-layout.json b/docs/pages/x/api/date-pickers/pickers-layout.json index 3b47b86c2c9c5..f942653eadd0d 100644 --- a/docs/pages/x/api/date-pickers/pickers-layout.json +++ b/docs/pages/x/api/date-pickers/pickers-layout.json @@ -18,13 +18,31 @@ "slotProps": { "type": { "name": "object" }, "default": "{}" }, "slots": { "type": { "name": "object" }, "default": "{}" } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "tabs": { "type": { "name": "elementType" } }, - "toolbar": { "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "class": null, + "name": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { "class": null, "name": "tabs", "description": "Tabs enabling toggling between views." }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar.\nIt is placed above the picker views." + } + ], "name": "PickersLayout", "styles": { "classes": ["root", "landscape", "contentWrapper", "toolbar", "actionBar", "tabs", "shortcuts"], diff --git a/docs/pages/x/api/date-pickers/pickers-shortcuts.json b/docs/pages/x/api/date-pickers/pickers-shortcuts.json index 689d10bf11074..10ddc1387c74b 100644 --- a/docs/pages/x/api/date-pickers/pickers-shortcuts.json +++ b/docs/pages/x/api/date-pickers/pickers-shortcuts.json @@ -22,7 +22,7 @@ "additionalPropsInfo": { "sx": true } } }, - "slots": {}, + "slots": [], "name": "PickersShortcuts", "styles": { "classes": ["root", "padding", "dense", "subheader"], diff --git a/docs/pages/x/api/date-pickers/single-input-date-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-range-field.json index 13163a87bee80..e330ec1d5b7e1 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-range-field.json @@ -120,9 +120,14 @@ "default": "'outlined'" } }, - "slots": { - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + } + ], "name": "SingleInputDateRangeField", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiSingleInputDateRangeField" }, "spread": true, diff --git a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json index 908ea31e84c04..0afaad2a022a7 100644 --- a/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-date-time-range-field.json @@ -145,9 +145,14 @@ "default": "'outlined'" } }, - "slots": { - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + } + ], "name": "SingleInputDateTimeRangeField", "styles": { "classes": ["root"], diff --git a/docs/pages/x/api/date-pickers/single-input-time-range-field.json b/docs/pages/x/api/date-pickers/single-input-time-range-field.json index bf342186b178f..53496c1061e13 100644 --- a/docs/pages/x/api/date-pickers/single-input-time-range-field.json +++ b/docs/pages/x/api/date-pickers/single-input-time-range-field.json @@ -133,9 +133,14 @@ "default": "'outlined'" } }, - "slots": { - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + } + ], "name": "SingleInputTimeRangeField", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiSingleInputTimeRangeField" }, "spread": true, diff --git a/docs/pages/x/api/date-pickers/static-date-picker.json b/docs/pages/x/api/date-pickers/static-date-picker.json index 5ac61bd3e1b45..19d2b5c2dda71 100644 --- a/docs/pages/x/api/date-pickers/static-date-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-picker.json @@ -159,19 +159,73 @@ "default": "3" } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "day": { "default": "PickersDay", "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } }, - "toolbar": { "default": "DatePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "day", + "description": "Custom component for day.\nCheck the PickersDay component.", + "default": "PickersDay" + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "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" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "DatePickerToolbar" + } + ], "name": "StaticDatePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiStaticDatePicker" }, "filename": "/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx", diff --git a/docs/pages/x/api/date-pickers/static-date-range-picker.json b/docs/pages/x/api/date-pickers/static-date-range-picker.json index 0537f9132edb2..b48191832331a 100644 --- a/docs/pages/x/api/date-pickers/static-date-range-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-range-picker.json @@ -126,19 +126,73 @@ "value": { "type": { "name": "arrayOf", "description": "Array<any>" } }, "viewRenderers": { "type": { "name": "shape", "description": "{ day?: func }" } } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "day": { "default": "DateRangePickersDay", "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } }, - "toolbar": { "default": "DateTimePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "day", + "description": "Custom component for day in range pickers.\nCheck the DateRangePickersDay component.", + "default": "DateRangePickersDay" + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "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" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "DateTimePickerToolbar" + } + ], "name": "StaticDateRangePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiStaticDateRangePicker" }, "spread": false, diff --git a/docs/pages/x/api/date-pickers/static-date-time-picker.json b/docs/pages/x/api/date-pickers/static-date-time-picker.json index 8077cd2808a6e..a880046eba544 100644 --- a/docs/pages/x/api/date-pickers/static-date-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-date-time-picker.json @@ -188,20 +188,79 @@ "default": "3" } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "day": { "default": "PickersDay", "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "switchViewButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "switchViewIcon": { "default": "ArrowDropDown", "type": { "name": "elementType" } }, - "tabs": { "default": "DateTimePickerTabs", "type": { "name": "elementType" } }, - "toolbar": { "default": "DateTimePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "day", + "description": "Custom component for day.\nCheck the PickersDay component.", + "default": "PickersDay" + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "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" + }, + { + "class": null, + "name": "tabs", + "description": "Tabs enabling toggling between date and time pickers.", + "default": "DateTimePickerTabs" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "DateTimePickerToolbar" + } + ], "name": "StaticDateTimePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiStaticDateTimePicker" }, "filename": "/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx", diff --git a/docs/pages/x/api/date-pickers/static-time-picker.json b/docs/pages/x/api/date-pickers/static-time-picker.json index eb24943f64d88..fbe378700064e 100644 --- a/docs/pages/x/api/date-pickers/static-time-picker.json +++ b/docs/pages/x/api/date-pickers/static-time-picker.json @@ -113,16 +113,55 @@ } } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "toolbar": { "default": "TimePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "TimePickerToolbar" + } + ], "name": "StaticTimePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiStaticTimePicker" }, "spread": false, diff --git a/docs/pages/x/api/date-pickers/time-clock.json b/docs/pages/x/api/date-pickers/time-clock.json index 12a7d8c2a845b..f6fa902baeff8 100644 --- a/docs/pages/x/api/date-pickers/time-clock.json +++ b/docs/pages/x/api/date-pickers/time-clock.json @@ -104,12 +104,32 @@ } } }, - "slots": { - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } } - }, + "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" + } + ], "name": "TimeClock", "styles": { "classes": ["root", "arrowSwitcher"], "globalClasses": {}, "name": "MuiTimeClock" }, "spread": true, diff --git a/docs/pages/x/api/date-pickers/time-field.json b/docs/pages/x/api/date-pickers/time-field.json index 2167e2001c1f9..3834ce8c2c52d 100644 --- a/docs/pages/x/api/date-pickers/time-field.json +++ b/docs/pages/x/api/date-pickers/time-field.json @@ -133,9 +133,14 @@ "default": "'outlined'" } }, - "slots": { - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + } + ], "name": "TimeField", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTimeField" }, "filename": "/packages/x-date-pickers/src/TimeField/TimeField.tsx", diff --git a/docs/pages/x/api/date-pickers/time-picker-toolbar.json b/docs/pages/x/api/date-pickers/time-picker-toolbar.json index e0928f6457958..bb35fbc3c4047 100644 --- a/docs/pages/x/api/date-pickers/time-picker-toolbar.json +++ b/docs/pages/x/api/date-pickers/time-picker-toolbar.json @@ -17,7 +17,7 @@ "toolbarFormat": { "type": { "name": "string" } }, "toolbarPlaceholder": { "type": { "name": "node" }, "default": "\"––\"" } }, - "slots": {}, + "slots": [], "name": "TimePickerToolbar", "styles": { "classes": [ diff --git a/docs/pages/x/api/date-pickers/time-picker.json b/docs/pages/x/api/date-pickers/time-picker.json index d1b33f01dca15..92e73001bd7ca 100644 --- a/docs/pages/x/api/date-pickers/time-picker.json +++ b/docs/pages/x/api/date-pickers/time-picker.json @@ -150,42 +150,137 @@ } } }, - "slots": { - "actionBar": { "default": "PickersActionBar", "type": { "name": "elementType" } }, - "desktopPaper": { "default": "PickersPopperPaper", "type": { "name": "elementType" } }, - "desktopTransition": { - "default": "Grow from @mui/material", - "type": { "name": "elementType" } - }, - "desktopTrapFocus": { - "default": "TrapFocus from @mui/material", - "type": { "name": "elementType" } - }, - "dialog": { "default": "PickersModalDialogRoot", "type": { "name": "elementType" } }, - "digitalClockItem": { - "default": "MenuItem from '@mui/material'", - "type": { "name": "elementType" } - }, - "digitalClockSectionItem": { - "default": "MenuItem from '@mui/material'", - "type": { "name": "elementType" } - }, - "field": { "type": { "name": "elementType" } }, - "inputAdornment": { "default": "InputAdornment", "type": { "name": "elementType" } }, - "layout": { "type": { "name": "elementType" } }, - "leftArrowIcon": { "default": "ArrowLeft", "type": { "name": "elementType" } }, - "mobilePaper": { "default": "Paper from @mui/material", "type": { "name": "elementType" } }, - "mobileTransition": { "default": "Fade from @mui/material", "type": { "name": "elementType" } }, - "nextIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "openPickerButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "openPickerIcon": { "type": { "name": "elementType" } }, - "popper": { "default": "Popper from @mui/material", "type": { "name": "elementType" } }, - "previousIconButton": { "default": "IconButton", "type": { "name": "elementType" } }, - "rightArrowIcon": { "default": "ArrowRight", "type": { "name": "elementType" } }, - "shortcuts": { "default": "PickersShortcuts", "type": { "name": "elementType" } }, - "textField": { "default": "TextField from '@mui/material'", "type": { "name": "elementType" } }, - "toolbar": { "default": "TimePickerToolbar", "type": { "name": "elementType" } } - }, + "slots": [ + { + "class": null, + "name": "actionBar", + "description": "Custom component for the action bar, it is placed below the picker views.", + "default": "PickersActionBar" + }, + { + "class": null, + "name": "desktopPaper", + "description": "Custom component for the paper rendered inside the desktop picker's Popper.", + "default": "PickersPopperPaper" + }, + { + "class": null, + "name": "desktopTransition", + "description": "Custom component for the desktop popper Transition.", + "default": "Grow from @mui/material" + }, + { + "class": null, + "name": "desktopTrapFocus", + "description": "Custom component for trapping the focus inside the views on desktop.", + "default": "TrapFocus from @mui/material" + }, + { + "class": null, + "name": "dialog", + "description": "Custom component for the dialog inside which the views are rendered on mobile.", + "default": "PickersModalDialogRoot" + }, + { + "class": null, + "name": "digitalClockItem", + "description": "Component responsible for rendering a single digital clock item.", + "default": "MenuItem from '@mui/material'" + }, + { + "class": null, + "name": "digitalClockSectionItem", + "description": "Component responsible for rendering a single multi section digital clock section item.", + "default": "MenuItem from '@mui/material'" + }, + { + "class": null, + "name": "field", + "description": "Component used to enter the date with the keyboard." + }, + { + "class": null, + "name": "inputAdornment", + "description": "Component displayed on the start or end input adornment used to open the picker on desktop.", + "default": "InputAdornment" + }, + { + "class": null, + "name": "layout", + "description": "Custom component for wrapping the layout.\nIt wraps the toolbar, views, action bar, and shortcuts." + }, + { + "class": null, + "name": "leftArrowIcon", + "description": "Icon displayed in the left view switch button.", + "default": "ArrowLeft" + }, + { + "class": null, + "name": "mobilePaper", + "description": "Custom component for the paper rendered inside the mobile picker's Dialog.", + "default": "Paper from @mui/material" + }, + { + "class": null, + "name": "mobileTransition", + "description": "Custom component for the mobile dialog Transition.", + "default": "Fade from @mui/material" + }, + { + "class": null, + "name": "nextIconButton", + "description": "Button allowing to switch to the right view.", + "default": "IconButton" + }, + { + "class": null, + "name": "openPickerButton", + "description": "Button to open the picker on desktop.", + "default": "IconButton" + }, + { + "class": null, + "name": "openPickerIcon", + "description": "Icon displayed in the open picker button on desktop." + }, + { + "class": null, + "name": "popper", + "description": "Custom component for the popper inside which the views are rendered on desktop.", + "default": "Popper from @mui/material" + }, + { + "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": "shortcuts", + "description": "Custom component for the shortcuts.", + "default": "PickersShortcuts" + }, + { + "class": null, + "name": "textField", + "description": "Form control with an input to render the value inside the default field.\nReceives the same props as @mui/material/TextField.", + "default": "TextField from '@mui/material'" + }, + { + "class": null, + "name": "toolbar", + "description": "Custom component for the toolbar rendered above the views.", + "default": "TimePickerToolbar" + } + ], "name": "TimePicker", "styles": { "classes": [], "globalClasses": {}, "name": "MuiTimePicker" }, "filename": "/packages/x-date-pickers/src/TimePicker/TimePicker.tsx", diff --git a/docs/pages/x/api/date-pickers/year-calendar.json b/docs/pages/x/api/date-pickers/year-calendar.json index 566bf1a41e6f1..cf5b8ffd7123f 100644 --- a/docs/pages/x/api/date-pickers/year-calendar.json +++ b/docs/pages/x/api/date-pickers/year-calendar.json @@ -43,7 +43,7 @@ "default": "3" } }, - "slots": {}, + "slots": [], "name": "YearCalendar", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiYearCalendar" }, "spread": true, diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json index 64b645fe9bb38..18b0e3c66b993 100644 --- a/docs/pages/x/api/tree-view/tree-item.json +++ b/docs/pages/x/api/tree-view/tree-item.json @@ -26,7 +26,7 @@ "TransitionComponent": { "type": { "name": "elementType" }, "default": "Collapse" }, "TransitionProps": { "type": { "name": "object" } } }, - "slots": {}, + "slots": [], "name": "TreeItem", "styles": { "classes": [ diff --git a/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json index 393706856f759..62c64122d5026 100644 --- a/docs/pages/x/api/tree-view/tree-view.json +++ b/docs/pages/x/api/tree-view/tree-view.json @@ -52,7 +52,7 @@ "additionalPropsInfo": { "sx": true } } }, - "slots": {}, + "slots": [], "name": "TreeView", "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTreeView" }, "spread": true, diff --git a/docs/scripts/api/buildComponentsDocumentation.ts b/docs/scripts/api/buildComponentsDocumentation.ts index 682d6f8c04b15..b92d7e2a4db02 100644 --- a/docs/scripts/api/buildComponentsDocumentation.ts +++ b/docs/scripts/api/buildComponentsDocumentation.ts @@ -2,7 +2,7 @@ import * as ttp from '@mui/monorepo/packages/typescript-to-proptypes/src/index'; import * as fse from 'fs-extra'; import fs from 'fs'; import path from 'path'; -import parseStyles, { Styles } from '@mui/monorepo/packages/api-docs-builder/utils/parseStyles'; +import parseStyles from '@mui/monorepo/packages/api-docs-builder/utils/parseStyles'; import fromPairs from 'lodash/fromPairs'; import createDescribeableProp, { DescribeablePropDescriptor, @@ -17,7 +17,7 @@ import kebabCase from 'lodash/kebabCase'; import camelCase from 'lodash/camelCase'; import { LANGUAGES } from 'docs/config'; import findPagesMarkdownNew from '@mui/monorepo/packages/api-docs-builder/utils/findPagesMarkdown'; -import { defaultHandlers, parse as docgenParse, ReactDocgenApi } from 'react-docgen'; +import { defaultHandlers, parse as docgenParse } from 'react-docgen'; import { renderInline as renderMarkdownInline, getHeaders, @@ -38,22 +38,8 @@ import saveApiDocPages, { ApiPageType, getPlan } from './saveApiDocPages'; type CoreReactApiProps = CoreReactApi['propsTable'][string]; -export interface ReactApi extends ReactDocgenApi { - /** - * list of page pathnames - * @example ['/components/Accordion'] - */ - demos: Array<{ name: string; demoPathname: string }>; - EOL: string; - filename: string; - forwardsRefTo: string | undefined; - inheritance: { component: string; pathname: string } | null; - name: string; - spread: boolean | undefined; - src: string; - styles: Styles; +export interface ReactApi extends Omit { displayName: string; - slots: Record; packages: { packageName: string; componentName: string }[]; } @@ -196,14 +182,17 @@ function findXDemos( if (componentName.startsWith('Grid') || componentName.startsWith('DataGrid')) { const demos: ReactApi['demos'] = []; if (componentName === 'DataGrid' || componentName.startsWith('Grid')) { - demos.push({ name: 'DataGrid', demoPathname: '/x/react-data-grid/#mit-version' }); + demos.push({ demoPageTitle: 'DataGrid', demoPathname: '/x/react-data-grid/#mit-version' }); } if (componentName === 'DataGridPro' || componentName.startsWith('Grid')) { - demos.push({ name: 'DataGridPro', demoPathname: '/x/react-data-grid/#commercial-version' }); + demos.push({ + demoPageTitle: 'DataGridPro', + demoPathname: '/x/react-data-grid/#commercial-version', + }); } if (componentName === 'DataGridPremium' || componentName.startsWith('Grid')) { demos.push({ - name: 'DataGridPremium', + demoPageTitle: 'DataGridPremium', demoPathname: '/x/react-data-grid/#commercial-version', }); } @@ -215,13 +204,13 @@ function findXDemos( .filter((page) => page.components.includes(componentName)) .map((page) => { if (page.pathname.includes('date-pickers')) { - let name = /^Date and Time Pickers - (.*)$/.exec(page.title)?.[1] ?? page.title; - name = name.replace(/\[(.*)]\((.*)\)/g, ''); + let demoPageTitle = /^Date and Time Pickers - (.*)$/.exec(page.title)?.[1] ?? page.title; + demoPageTitle = demoPageTitle.replace(/\[(.*)]\((.*)\)/g, ''); const pathnameMatches = /\/date-pickers\/([^/]+)\/([^/]+)/.exec(page.pathname); return { - name, + demoPageTitle, demoPathname: `/x/react-date-pickers/${pathnameMatches![1]}/`, }; } @@ -231,7 +220,7 @@ function findXDemos( const pageId = pathnameMatches![1] === 'overview' ? '' : `${pathnameMatches![1]}/`; return { - name: page.title, + demoPageTitle: page.title, demoPathname: `/x/react-tree-view/${pageId}`, }; } @@ -256,7 +245,7 @@ const buildComponentDocumentation = async (options: { reactApi.filename = filename; // Some components don't have props reactApi.name = path.parse(filename).name; reactApi.EOL = getLineFeed(src); - reactApi.slots = {}; + reactApi.slots = []; try { const testInfo = await parseTest(reactApi.filename); @@ -469,7 +458,12 @@ const buildComponentDocumentation = async (options: { Object.entries(slots).forEach(([slot, descriptor]) => { componentApi.slotDescriptions![slot] = descriptor.description; - reactApi.slots[slot] = { default: descriptor.default, type: { name: descriptor.type } }; + reactApi.slots?.push({ + class: null, + name: slot, + description: descriptor.description, + default: descriptor.default, + }); }); } @@ -522,11 +516,7 @@ const buildComponentDocumentation = async (options: { return 1; }), ), - slots: fromPairs( - Object.entries(reactApi.slots).sort(([aName], [bName]) => { - return aName.localeCompare(bName); - }), - ), + slots: reactApi.slots.sort((slotA, slotB) => (slotA.name > slotB.name ? 1 : -1)), name: reactApi.name, styles: { classes: reactApi.styles.classes, @@ -543,7 +533,7 @@ const buildComponentDocumentation = async (options: { filename: toGithubPath(reactApi.filename, project.workspaceRoot), inheritance: reactApi.inheritance, demos: ``, packages: reactApi.packages, };