Merge branch 'master' into enabledAccessibleFieldDOMStructure

docs/data/data-grid/localization/data.json

@@ -67,7 +67,7 @@
     "languageTag": "da-DK",
     "importName": "daDK",
     "localeName": "Danish",
-    "missingKeysCount": 5,
+    "missingKeysCount": 0,
     "totalKeysCount": 122,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/daDK.ts"
   },
@@ -139,7 +139,7 @@
     "languageTag": "it-IT",
     "importName": "itIT",
     "localeName": "Italian",
-    "missingKeysCount": 8,
+    "missingKeysCount": 0,
     "totalKeysCount": 122,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/itIT.ts"
   },
@@ -203,7 +203,7 @@
     "languageTag": "pt-BR",
     "importName": "ptBR",
     "localeName": "Portuguese (Brazil)",
-    "missingKeysCount": 4,
+    "missingKeysCount": 0,
     "totalKeysCount": 122,
     "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-data-grid/src/locales/ptBR.ts"
   },

docs/data/data-grid/pagination/PageSizeCustomOptions.js

@@ -17,7 +17,7 @@ export default function PageSizeCustomOptions() {
           ...data.initialState,
           pagination: { paginationModel: { pageSize: 5 } },
         }}
-        pageSizeOptions={[5, 10, 25]}
+        pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]}
       />
     </div>
   );

docs/data/data-grid/pagination/PageSizeCustomOptions.tsx

@@ -17,7 +17,7 @@ export default function PageSizeCustomOptions() {
           ...data.initialState,
           pagination: { paginationModel: { pageSize: 5 } },
         }}
-        pageSizeOptions={[5, 10, 25]}
+        pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]}
       />
     </div>
   );

docs/data/data-grid/pagination/PageSizeCustomOptions.tsx.preview

@@ -4,5 +4,5 @@
     ...data.initialState,
     pagination: { paginationModel: { pageSize: 5 } },
   }}
-  pageSizeOptions={[5, 10, 25]}
+  pageSizeOptions={[5, 10, 25, { value: -1, label: 'All' }]}
 />

docs/data/data-grid/pagination/pagination.md

@@ -41,10 +41,10 @@ You should provide an array of items, each item should be one of these types:
   <DataGrid pageSizeOptions={[5, 10, 25]}>
   ```
 
-- **object**, the `value` and `label` keys will be used respectively for the value and label of the option.
+- **object**, the `value` and `label` keys will be used respectively for the value and label of the option. Define `value` as `-1` to display all results.
 
   ```jsx
-  <DataGrid pageSizeOptions={[10, 100, { value: 1000, label: '1,000' }]}>
+  <DataGrid pageSizeOptions={[10, 100, { value: 1000, label: '1,000' }, { value: -1, label: 'All' }]}>
   ```
 
 {{"demo": "PageSizeCustomOptions.js", "bg": "inline"}}

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -796,12 +796,24 @@
       "default": "GridRow",
       "class": "MuiDataGridPremium-row"
     },
+    {
+      "name": "baseBadge",
+      "description": "The custom Badge component used in the grid for both header and cells.",
+      "default": "Badge",
+      "class": null
+    },
     {
       "name": "baseCheckbox",
       "description": "The custom Checkbox component used in the grid for both header and cells.",
       "default": "Checkbox",
       "class": null
     },
+    {
+      "name": "baseDivider",
+      "description": "The custom Divider component used in the grid.",
+      "default": "Divider",
+      "class": null
+    },
     {
       "name": "baseInputAdornment",
       "description": "The custom InputAdornment component used in the grid.",

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -728,12 +728,24 @@
       "default": "GridRow",
       "class": "MuiDataGridPro-row"
     },
+    {
+      "name": "baseBadge",
+      "description": "The custom Badge component used in the grid for both header and cells.",
+      "default": "Badge",
+      "class": null
+    },
     {
       "name": "baseCheckbox",
       "description": "The custom Checkbox component used in the grid for both header and cells.",
       "default": "Checkbox",
       "class": null
     },
+    {
+      "name": "baseDivider",
+      "description": "The custom Divider component used in the grid.",
+      "default": "Divider",
+      "class": null
+    },
     {
       "name": "baseInputAdornment",
       "description": "The custom InputAdornment component used in the grid.",

docs/pages/x/api/data-grid/data-grid.json

@@ -615,12 +615,24 @@
       "default": "GridRow",
       "class": "MuiDataGrid-row"
     },
+    {
+      "name": "baseBadge",
+      "description": "The custom Badge component used in the grid for both header and cells.",
+      "default": "Badge",
+      "class": null
+    },
     {
       "name": "baseCheckbox",
       "description": "The custom Checkbox component used in the grid for both header and cells.",
       "default": "Checkbox",
       "class": null
     },
+    {
+      "name": "baseDivider",
+      "description": "The custom Divider component used in the grid.",
+      "default": "Divider",
+      "class": null
+    },
     {
       "name": "baseInputAdornment",
       "description": "The custom InputAdornment component used in the grid.",

docs/pages/x/api/data-grid/grid-print-export-options.json

@@ -18,6 +18,6 @@
     "hideFooter": { "type": { "description": "boolean" }, "default": "false" },
     "hideToolbar": { "type": { "description": "boolean" }, "default": "false" },
     "includeCheckboxes": { "type": { "description": "boolean" }, "default": "false" },
-    "pageStyle": { "type": { "description": "string | Function" } }
+    "pageStyle": { "type": { "description": "string | (() => string)" } }
   }
 }

docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json

@@ -1230,9 +1230,11 @@
     }
   },
   "slotDescriptions": {
+    "baseBadge": "The custom Badge component used in the grid for both header and cells.",
     "baseButton": "The custom Button component used in the grid.",
     "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
     "baseChip": "The custom Chip component used in the grid.",
+    "baseDivider": "The custom Divider component used in the grid.",
     "baseFormControl": "The custom FormControl component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInputAdornment": "The custom InputAdornment component used in the grid.",

docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json

@@ -1168,9 +1168,11 @@
     }
   },
   "slotDescriptions": {
+    "baseBadge": "The custom Badge component used in the grid for both header and cells.",
     "baseButton": "The custom Button component used in the grid.",
     "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
     "baseChip": "The custom Chip component used in the grid.",
+    "baseDivider": "The custom Divider component used in the grid.",
     "baseFormControl": "The custom FormControl component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInputAdornment": "The custom InputAdornment component used in the grid.",

docs/translations/api-docs/data-grid/data-grid/data-grid.json

@@ -1048,9 +1048,11 @@
     }
   },
   "slotDescriptions": {
+    "baseBadge": "The custom Badge component used in the grid for both header and cells.",
     "baseButton": "The custom Button component used in the grid.",
     "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.",
     "baseChip": "The custom Chip component used in the grid.",
+    "baseDivider": "The custom Divider component used in the grid.",
     "baseFormControl": "The custom FormControl component used in the grid.",
     "baseIconButton": "The custom IconButton component used in the grid.",
     "baseInputAdornment": "The custom InputAdornment component used in the grid.",

packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import composeClasses from '@mui/utils/composeClasses';
 import Box from '@mui/material/Box';
-import Badge from '@mui/material/Badge';
 import {
   getDataGridUtilityClass,
   GridRenderCellParams,
@@ -93,9 +92,9 @@ function GridTreeDataGroupingCellIcon(props: GridTreeDataGroupingCellIconProps)
       {...rootProps?.slotProps?.baseIconButton}
     >
       <rootProps.slots.baseTooltip title={error?.message ?? null}>
-        <Badge variant="dot" color="error" invisible={!error}>
+        <rootProps.slots.baseBadge variant="dot" color="error" invisible={!error}>
           <Icon fontSize="inherit" />
-        </Badge>
+        </rootProps.slots.baseBadge>
       </rootProps.slots.baseTooltip>
     </rootProps.slots.baseIconButton>
   ) : null;

packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderFilterIconButton.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
-import Badge from '@mui/material/Badge';
 import { useGridSelector } from '../../hooks';
 import { gridPreferencePanelStateSelector } from '../../hooks/features/preferencesPanel/gridPreferencePanelSelector';
 import { GridPreferencePanelsValue } from '../../hooks/features/preferencesPanel/gridPreferencePanelsValue';
@@ -97,9 +96,9 @@ function GridColumnHeaderFilterIconButton(props: ColumnHeaderFilterIconButtonPro
     >
       <GridIconButtonContainer>
         {counter > 1 && (
-          <Badge badgeContent={counter} color="default">
+          <rootProps.slots.baseBadge badgeContent={counter} color="default">
             {iconButton}
-          </Badge>
+          </rootProps.slots.baseBadge>
         )}
 
         {counter === 1 && iconButton}

packages/x-data-grid/src/components/columnHeaders/GridColumnHeaderSortIcon.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import composeClasses from '@mui/utils/composeClasses';
-import Badge from '@mui/material/Badge';
 import { GridSlotsComponent } from '../../models/gridSlotsComponent';
 import { GridSortDirection } from '../../models/gridSortModel';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
@@ -80,9 +79,9 @@ function GridColumnHeaderSortIconRaw(props: GridColumnHeaderSortIconProps) {
   return (
     <GridIconButtonContainer>
       {index != null && (
-        <Badge badgeContent={index} color="default" overlap="circular">
+        <rootProps.slots.baseBadge badgeContent={index} color="default" overlap="circular">
           {iconButton}
-        </Badge>
+        </rootProps.slots.baseBadge>
       )}
 
       {index == null && iconButton}

packages/x-data-grid/src/components/toolbar/GridToolbar.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import Box from '@mui/material/Box';
 import {
   GridToolbarContainer,
   GridToolbarContainerProps,
@@ -61,7 +60,7 @@ const GridToolbar = React.forwardRef<HTMLDivElement, GridToolbarProps>(
           // TODO: remove the reference to excelOptions in community package
           excelOptions={excelOptions}
         />
-        <Box sx={{ flex: 1 }} />
+        <div style={{ flex: 1 }} />
         {showQuickFilter && <GridToolbarQuickFilter {...quickFilterProps} />}
       </GridToolbarContainer>
     );

packages/x-data-grid/src/components/toolbar/GridToolbarExport.tsx

@@ -107,22 +107,7 @@ GridPrintExportMenuItem.propTypes = {
     hideFooter: PropTypes.bool,
     hideToolbar: PropTypes.bool,
     includeCheckboxes: PropTypes.bool,
-    pageStyle: PropTypes.oneOfType([
-      PropTypes.shape({
-        '__@hasInstance@646': PropTypes.func.isRequired,
-        '__@metadata@648': PropTypes.any,
-        apply: PropTypes.func.isRequired,
-        arguments: PropTypes.any.isRequired,
-        bind: PropTypes.func.isRequired,
-        call: PropTypes.func.isRequired,
-        caller: PropTypes.object.isRequired,
-        length: PropTypes.number.isRequired,
-        name: PropTypes.string.isRequired,
-        prototype: PropTypes.any.isRequired,
-        toString: PropTypes.func.isRequired,
-      }),
-      PropTypes.string,
-    ]),
+    pageStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   }),
 } as any;
 

packages/x-data-grid/src/components/toolbar/GridToolbarFilterButton.tsx

@@ -6,7 +6,6 @@ import {
   unstable_capitalize as capitalize,
   unstable_useId as useId,
 } from '@mui/utils';
-import Badge from '@mui/material/Badge';
 import { ButtonProps } from '@mui/material/Button';
 import { TooltipProps } from '@mui/material/Tooltip';
 import { gridColumnLookupSelector } from '../../hooks/features/columns/gridColumnsSelector';
@@ -144,9 +143,9 @@ const GridToolbarFilterButton = React.forwardRef<HTMLButtonElement, GridToolbarF
           aria-expanded={isOpen}
           aria-haspopup
           startIcon={
-            <Badge badgeContent={activeFilters.length} color="primary">
+            <rootProps.slots.baseBadge badgeContent={activeFilters.length} color="primary">
               <rootProps.slots.openFilterButtonIcon />
-            </Badge>
+            </rootProps.slots.baseBadge>
           }
           {...buttonProps}
           onClick={toggleFilter}

packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenuSlots.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import Divider from '@mui/material/Divider';
 import { GridColumnMenuRootProps } from './columnMenuInterfaces';
 import { GridColDef } from '../../../models/colDef/gridColDef';
+import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 
 interface UseGridColumnMenuSlotsProps extends GridColumnMenuRootProps {
@@ -16,6 +16,7 @@ type UseGridColumnMenuSlotsResponse = Array<
 
 const useGridColumnMenuSlots = (props: UseGridColumnMenuSlotsProps) => {
   const apiRef = useGridPrivateApiContext();
+  const rootProps = useGridRootProps();
   const {
     defaultSlots,
     defaultSlotProps,
@@ -71,7 +72,7 @@ const useGridColumnMenuSlots = (props: UseGridColumnMenuSlotsProps) => {
         itemProps = { ...itemProps, ...customProps };
       }
       return addDividers && index !== sorted.length - 1
-        ? [...acc, [processedComponents[key]!, itemProps], [Divider, {}]]
+        ? [...acc, [processedComponents[key]!, itemProps], [rootProps.slots.baseDivider, {}]]
         : [...acc, [processedComponents[key]!, itemProps]];
     }, []);
   }, [
@@ -82,6 +83,7 @@ const useGridColumnMenuSlots = (props: UseGridColumnMenuSlotsProps) => {
     processedComponents,
     processedSlotProps,
     userItems,
+    rootProps.slots.baseDivider,
   ]);
 };
 

packages/x-data-grid/src/hooks/features/pagination/gridPaginationSelector.ts

@@ -8,6 +8,8 @@ import {
 import { gridRowMaximumTreeDepthSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 import { getPageCount } from './gridPaginationUtils';
 
+const ALL_RESULTS_PAGE_VALUE = -1;
+
 /**
  * @category Pagination
  * @ignore - do not document.
@@ -92,10 +94,13 @@ export const gridPaginationRowRangeSelector = createSelectorMemoized(
       paginationModel.pageSize * paginationModel.page,
       visibleTopLevelRowCount - 1,
     );
-    const topLevelLastRowIndex = Math.min(
-      topLevelFirstRowIndex + paginationModel.pageSize - 1,
-      visibleTopLevelRowCount - 1,
-    );
+    const topLevelLastRowIndex =
+      paginationModel.pageSize === ALL_RESULTS_PAGE_VALUE
+        ? visibleTopLevelRowCount - 1
+        : Math.min(
+            topLevelFirstRowIndex + paginationModel.pageSize - 1,
+            visibleTopLevelRowCount - 1,
+          );
 
     // The range contains no element
     if (topLevelFirstRowIndex === -1 || topLevelLastRowIndex === -1) {