@mui/x-data-grid 7.20.0 → 7.22.0

package/modern/joy/joySlots.js

@@ -1,14 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
-  _excluded2 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
-  _excluded3 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
-  _excluded4 = ["color", "size", "sx", "touchRippleRef"],
-  _excluded5 = ["open", "onOpen", "value", "onChange", "size", "color", "variant", "inputProps", "MenuProps", "inputRef", "error", "native", "fullWidth", "labelId"],
-  _excluded6 = ["native"],
-  _excluded7 = ["shrink", "variant", "sx"];
+const _excluded = ["slotProps", "variant", "color", "sx"],
+  _excluded2 = ["touchRippleRef", "inputProps", "onChange", "color", "size", "checked", "sx", "value", "inputRef"],
+  _excluded3 = ["onChange", "label", "placeholder", "value", "inputRef", "type", "size", "variant"],
+  _excluded4 = ["startIcon", "color", "endIcon", "size", "sx", "variant"],
+  _excluded5 = ["color", "size", "sx", "touchRippleRef"],
+  _excluded6 = ["open", "onOpen", "value", "onChange", "size", "color", "variant", "inputProps", "MenuProps", "inputRef", "error", "native", "fullWidth", "labelId"],
+  _excluded7 = ["native"],
+  _excluded8 = ["shrink", "variant", "sx"];
 import * as React from 'react';
+import JoyBadge from '@mui/joy/Badge';
 import JoyCheckbox from '@mui/joy/Checkbox';
+import JoyDivider from '@mui/joy/Divider';
 import JoyInput from '@mui/joy/Input';
 import JoyFormControl from '@mui/joy/FormControl';
 import JoyFormLabel from '@mui/joy/FormLabel';
@@ -58,14 +61,27 @@ function convertVariant(variant, defaultVariant = 'plain') {
     filled: 'soft'
   }[variant] || defaultVariant;
 }
-const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      color,
+      sx
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/_jsx(JoyBadge, _extends({}, props, {
+    color: convertColor(color),
+    variant: "plain",
+    sx: sx,
+    ref: ref
+  }));
+});
+const Checkbox = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
       inputProps,
       onChange,
       checked,
       inputRef
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   return /*#__PURE__*/_jsx(JoyCheckbox, _extends({}, props, {
     slotProps: {
       input: _extends({}, inputProps, {
@@ -77,7 +93,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange: onChange
   }));
 });
-const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const TextField = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
       onChange,
       label,
@@ -87,8 +103,8 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       type,
       size,
       variant
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
   const rootRef = useForkRef(ref, props.InputProps?.ref);
   const inputForkRef = useForkRef(inputRef, props?.inputProps?.ref);
   const {
@@ -116,7 +132,7 @@ const TextField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     })]
   });
 });
-const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
+const Button = /*#__PURE__*/React.forwardRef(function Button(_ref4, ref) {
   let {
       startIcon,
       color,
@@ -124,8 +140,8 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
       size,
       sx,
       variant
-    } = _ref3,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
+    } = _ref4,
+    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   return /*#__PURE__*/_jsx(JoyButton, _extends({}, props, {
     size: convertSize(size),
     color: convertColor(color),
@@ -136,13 +152,13 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(_ref3, ref) {
     sx: sx
   }));
 });
-const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref) {
+const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref5, ref) {
   let {
       color,
       size,
       sx
-    } = _ref4,
-    props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
+    } = _ref5,
+    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
   return /*#__PURE__*/_jsx(JoyIconButton, _extends({}, props, {
     size: convertSize(size),
     color: convertColor(color) ?? 'neutral',
@@ -151,7 +167,7 @@ const IconButton = /*#__PURE__*/React.forwardRef(function IconButton(_ref4, ref)
     sx: sx
   }));
 });
-const Select = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
+const Select = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
       open,
       onOpen,
@@ -163,8 +179,8 @@ const Select = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
       MenuProps,
       inputRef,
       labelId
-    } = _ref5,
-    props = _objectWithoutPropertiesLoose(_ref5, _excluded5);
+    } = _ref6,
+    props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
   const handleChange = (event, newValue) => {
     if (event && onChange) {
       // Same as in https://github.com/mui/material-ui/blob/e5558282a8f36856aef1299f3a36f3235e92e770/packages/mui-material/src/Select/SelectInput.js#L288-L300
@@ -215,17 +231,17 @@ const Select = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
     }
   }));
 });
-const Option = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref6, _excluded6);
+const Option = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+  let props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
   return /*#__PURE__*/_jsx(JoyOption, _extends({}, props, {
     ref: ref
   }));
 });
-const InputLabel = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+const InputLabel = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
   let {
       sx
-    } = _ref7,
-    props = _objectWithoutPropertiesLoose(_ref7, _excluded7);
+    } = _ref8,
+    props = _objectWithoutPropertiesLoose(_ref8, _excluded8);
   return /*#__PURE__*/_jsx(JoyFormLabel, _extends({}, props, {
     ref: ref,
     sx: sx
@@ -351,7 +367,9 @@ const LoadingOverlay = /*#__PURE__*/React.forwardRef((props, ref) => {
   }));
 });
 const joySlots = _extends({}, joyIconSlots, {
+  baseBadge: Badge,
   baseCheckbox: Checkbox,
+  baseDivider: JoyDivider,
   baseTextField: TextField,
   baseButton: Button,
   baseIconButton: IconButton,

package/modern/locales/daDK.js

@@ -33,8 +33,7 @@ const daDKGrid = {
   columnsManagementSearchTitle: 'Søg',
   columnsManagementNoColumns: 'Ingen søjler',
   columnsManagementShowHideAllText: 'Vis/Skjul Alle',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementReset: 'Nulstil',
   // Filter panel text
   filterPanelAddFilter: 'Tilføj filter',
   filterPanelRemoveAll: 'Fjern alle',
@@ -48,9 +47,9 @@ const daDKGrid = {
   filterPanelInputPlaceholder: 'Filterværdi',
   // Filter operators text
   filterOperatorContains: 'indeholder',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'indeholder ikke',
   filterOperatorEquals: 'lig med',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'ikke lig med',
   filterOperatorStartsWith: 'begynder med',
   filterOperatorEndsWith: 'ender med',
   filterOperatorIs: 'er lig med',
@@ -70,9 +69,9 @@ const daDKGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Indeholder',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Indeholder ikke',
   headerFilterOperatorEquals: 'Lig med',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Ikke lig med',
   headerFilterOperatorStartsWith: 'Begynder med',
   headerFilterOperatorEndsWith: 'Ender med',
   headerFilterOperatorIs: 'Er lig med',

package/modern/locales/itIT.js

@@ -30,11 +30,10 @@ const itITGrid = {
   toolbarExportPrint: 'Stampa',
   toolbarExportExcel: 'Scarica come Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-  // columnsManagementReset: 'Reset',
-
+  columnsManagementSearchTitle: 'Cerca',
+  columnsManagementNoColumns: 'Nessuna colonna',
+  columnsManagementShowHideAllText: 'Mostra/Nascondi Tutto',
+  columnsManagementReset: 'Resetta',
   // Filter panel text
   filterPanelAddFilter: 'Aggiungi un filtro',
   filterPanelRemoveAll: 'Rimuovi filtri',
@@ -48,13 +47,13 @@ const itITGrid = {
   filterPanelInputPlaceholder: 'Filtra il valore',
   // Filter operators text
   filterOperatorContains: 'contiene',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'non contiene',
   filterOperatorEquals: 'uguale a',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'diverso da',
   filterOperatorStartsWith: 'comincia per',
   filterOperatorEndsWith: 'termina per',
   filterOperatorIs: 'uguale a',
-  filterOperatorNot: 'diversa da',
+  filterOperatorNot: 'diverso da',
   filterOperatorAfter: 'dopo il',
   filterOperatorOnOrAfter: 'a partire dal',
   filterOperatorBefore: 'prima del',
@@ -70,26 +69,26 @@ const itITGrid = {
   'filterOperator<=': '<=',
   // Header filter operators text
   headerFilterOperatorContains: 'Contiene',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
-  headerFilterOperatorEquals: 'uguale a',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
-  headerFilterOperatorStartsWith: 'comincia per',
-  headerFilterOperatorEndsWith: 'termina per',
-  headerFilterOperatorIs: 'uguale a',
-  headerFilterOperatorNot: 'diversa da',
-  headerFilterOperatorAfter: 'dopo il',
-  headerFilterOperatorOnOrAfter: 'a partire dal',
-  headerFilterOperatorBefore: 'prima del',
-  headerFilterOperatorOnOrBefore: 'fino al',
-  headerFilterOperatorIsEmpty: 'è vuoto',
-  headerFilterOperatorIsNotEmpty: 'non è vuoto',
-  headerFilterOperatorIsAnyOf: 'è uno tra',
-  'headerFilterOperator=': 'uguale a',
-  'headerFilterOperator!=': 'diverso da',
-  'headerFilterOperator>': 'maggiore di',
-  'headerFilterOperator>=': 'maggiore o uguale a',
-  'headerFilterOperator<': 'minore di',
-  'headerFilterOperator<=': 'minore o uguale a',
+  headerFilterOperatorDoesNotContain: 'Non contiene',
+  headerFilterOperatorEquals: 'Uguale a',
+  headerFilterOperatorDoesNotEqual: 'Diverso da',
+  headerFilterOperatorStartsWith: 'Comincia per',
+  headerFilterOperatorEndsWith: 'Termina per',
+  headerFilterOperatorIs: 'Uguale a',
+  headerFilterOperatorNot: 'Diverso da',
+  headerFilterOperatorAfter: 'Dopo il',
+  headerFilterOperatorOnOrAfter: 'A partire dal',
+  headerFilterOperatorBefore: 'Prima del',
+  headerFilterOperatorOnOrBefore: 'Fino al',
+  headerFilterOperatorIsEmpty: 'È vuoto',
+  headerFilterOperatorIsNotEmpty: 'Non è vuoto',
+  headerFilterOperatorIsAnyOf: 'È uno tra',
+  'headerFilterOperator=': 'Uguale a',
+  'headerFilterOperator!=': 'Diverso da',
+  'headerFilterOperator>': 'Maggiore di',
+  'headerFilterOperator>=': 'Maggiore o uguale a',
+  'headerFilterOperator<': 'Minore di',
+  'headerFilterOperator<=': 'Minore o uguale a',
   // Filter values text
   filterValueAny: 'qualunque',
   filterValueTrue: 'vero',

package/modern/locales/ptBR.js

@@ -47,9 +47,9 @@ const ptBRGrid = {
   filterPanelInputPlaceholder: 'Filtrar valor',
   // Filter operators text
   filterOperatorContains: 'contém',
-  // filterOperatorDoesNotContain: 'does not contain',
+  filterOperatorDoesNotContain: 'não contém',
   filterOperatorEquals: 'é igual a',
-  // filterOperatorDoesNotEqual: 'does not equal',
+  filterOperatorDoesNotEqual: 'não é igual a',
   filterOperatorStartsWith: 'começa com',
   filterOperatorEndsWith: 'termina com',
   filterOperatorIs: 'é',
@@ -69,9 +69,9 @@ const ptBRGrid = {
   'filterOperator<=': 'menor ou igual que',
   // Header filter operators text
   headerFilterOperatorContains: 'Contém',
-  // headerFilterOperatorDoesNotContain: 'Does not contain',
+  headerFilterOperatorDoesNotContain: 'Não contém',
   headerFilterOperatorEquals: 'Igual',
-  // headerFilterOperatorDoesNotEqual: 'Does not equal',
+  headerFilterOperatorDoesNotEqual: 'Não é igual a',
   headerFilterOperatorStartsWith: 'Começa com',
   headerFilterOperatorEndsWith: 'Termina com',
   headerFilterOperatorIs: 'É',

package/modern/material/index.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import MUIBadge from '@mui/material/Badge';
 import MUICheckbox from '@mui/material/Checkbox';
+import MUIDivider from '@mui/material/Divider';
 import MUITextField from '@mui/material/TextField';
 import MUIFormControl from '@mui/material/FormControl';
 import MUISelect from '@mui/material/Select';
@@ -51,7 +53,9 @@ const iconSlots = {
   columnReorderIcon: GridDragIcon
 };
 const materialSlots = _extends({}, iconSlots, {
+  baseBadge: MUIBadge,
   baseCheckbox: MUICheckbox,
+  baseDivider: MUIDivider,
   baseTextField: MUITextField,
   baseFormControl: MUIFormControl,
   baseSelect: MUISelect,

package/modern/utils/ResizeObserver.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+
+/**
+ * HACK: Minimal shim to get jsdom to work.
+ */
+export const ResizeObserver = typeof globalThis.ResizeObserver !== 'undefined' ? globalThis.ResizeObserver : class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};

package/modern/utils/keyboardUtils.js

@@ -22,8 +22,16 @@ export const isHideMenuKey = key => key === 'Tab' || key === 'Escape';
 // In theory, on macOS, ctrl + v doesn't trigger a paste, so the function should return false.
 // However, maybe it's overkill to fix, so let's be lazy.
 export function isPasteShortcut(event) {
-  if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'v' && !event.shiftKey && !event.altKey) {
-    return true;
-  }
-  return false;
+  return (event.ctrlKey || event.metaKey) &&
+  // We can't use event.code === 'KeyV' as event.code assumes a QWERTY keyboard layout,
+  // for example, it would be another letter on a Dvorak physical keyboard.
+  // We can't use event.key === 'v' as event.key is not stable with key modifiers and keyboard layouts,
+  // for example, it would be ה on a Hebrew keyboard layout.
+  // https://github.com/w3c/uievents/issues/377 could be a long-term solution
+  String.fromCharCode(event.keyCode) === 'V' && !event.shiftKey && !event.altKey;
+}
+
+// Checks if the keyboard event corresponds to the copy shortcut (CTRL+C or CMD+C) across different localization keyboards.
+export function isCopyShortcut(event) {
+  return (event.ctrlKey || event.metaKey) && String.fromCharCode(event.keyCode) === 'C' && !event.shiftKey && !event.altKey;
 }

package/node/DataGrid/DataGrid.js

@@ -702,6 +702,7 @@ DataGridRaw.propTypes = {
    * Setting it to a lower value could be useful when using dynamic row height,
    * but might reduce performance when displaying a large number of rows.
    * @default 166
+   * @deprecated
    */
   rowPositionsDebounceMs: _propTypes.default.number,
   /**

package/node/DataGrid/index.js

@@ -3,19 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _exportNames = {
-  DATA_GRID_PROPS_DEFAULT_VALUES: true
-};
-Object.defineProperty(exports, "DATA_GRID_PROPS_DEFAULT_VALUES", {
-  enumerable: true,
-  get: function () {
-    return _useDataGridProps.DATA_GRID_PROPS_DEFAULT_VALUES;
-  }
-});
 var _DataGrid = require("./DataGrid");
 Object.keys(_DataGrid).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _DataGrid[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -23,5 +13,4 @@ Object.keys(_DataGrid).forEach(function (key) {
       return _DataGrid[key];
     }
   });
-});
-var _useDataGridProps = require("./useDataGridProps");
+});

package/node/DataGrid/useDataGridComponent.js

@@ -34,6 +34,7 @@ var _useGridColumnGrouping = require("../hooks/features/columnGrouping/useGridCo
 var _virtualization = require("../hooks/features/virtualization");
 var _useGridColumnResize = require("../hooks/features/columnResize/useGridColumnResize");
 var _useGridRowSpanning = require("../hooks/features/rows/useGridRowSpanning");
+var _useGridListView = require("../hooks/features/listView/useGridListView");
 const useDataGridComponent = (inputApiRef, props) => {
   const apiRef = (0, _useGridInitialization.useGridInitialization)(inputApiRef, props);
 
@@ -63,12 +64,13 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnMenu.columnMenuStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_useGridColumnGrouping.columnGroupsStateInitializer, apiRef, props);
   (0, _useGridInitializeState.useGridInitializeState)(_virtualization.virtualizationStateInitializer, apiRef, props);
+  (0, _useGridInitializeState.useGridInitializeState)(_useGridListView.listViewStateInitializer, apiRef, props);
   (0, _useGridKeyboardNavigation.useGridKeyboardNavigation)(apiRef, props);
   (0, _useGridRowSelection.useGridRowSelection)(apiRef, props);
   (0, _useGridColumns.useGridColumns)(apiRef, props);
   (0, _useGridRows.useGridRows)(apiRef, props);
   (0, _useGridRowSpanning.useGridRowSpanning)(apiRef, props);
-  (0, _useGridParamsApi.useGridParamsApi)(apiRef);
+  (0, _useGridParamsApi.useGridParamsApi)(apiRef, props);
   (0, _useGridColumnSpanning.useGridColumnSpanning)(apiRef);
   (0, _useGridColumnGrouping.useGridColumnGrouping)(apiRef, props);
   (0, _useGridEditing.useGridEditing)(apiRef, props);
@@ -89,6 +91,7 @@ const useDataGridComponent = (inputApiRef, props) => {
   (0, _useGridEvents.useGridEvents)(apiRef, props);
   (0, _useGridStatePersistence.useGridStatePersistence)(apiRef);
   (0, _virtualization.useGridVirtualization)(apiRef, props);
+  (0, _useGridListView.useGridListView)(apiRef, props);
   return apiRef;
 };
 exports.useDataGridComponent = useDataGridComponent;

package/node/DataGrid/useDataGridProps.js

@@ -5,14 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useDataGridProps = exports.DATA_GRID_PROPS_DEFAULT_VALUES = void 0;
+exports.useDataGridProps = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/material/styles");
 var _constants = require("../constants");
 var _defaultGridSlotsComponents = require("../constants/defaultGridSlotsComponents");
-var _models = require("../models");
 var _utils = require("../internals/utils");
+var _dataGridPropsDefaultValues = require("../constants/dataGridPropsDefaultValues");
 const DATA_GRID_FORCED_PROPS = {
   disableMultipleColumnsFiltering: true,
   disableMultipleColumnsSorting: true,
@@ -22,67 +22,8 @@ const DATA_GRID_FORCED_PROPS = {
   checkboxSelectionVisibleOnly: false,
   disableColumnReorder: true,
   keepColumnPositionIfDraggedOutside: false,
-  signature: 'DataGrid'
-};
-
-/**
- * The default values of `DataGridPropsWithDefaultValues` to inject in the props of DataGrid.
- */
-const DATA_GRID_PROPS_DEFAULT_VALUES = exports.DATA_GRID_PROPS_DEFAULT_VALUES = {
-  autoHeight: false,
-  autoPageSize: false,
-  autosizeOnMount: false,
-  checkboxSelection: false,
-  checkboxSelectionVisibleOnly: false,
-  clipboardCopyCellDelimiter: '\t',
-  columnBufferPx: 150,
-  columnHeaderHeight: 56,
-  disableAutosize: false,
-  disableColumnFilter: false,
-  disableColumnMenu: false,
-  disableColumnReorder: false,
-  disableColumnResize: false,
-  disableColumnSelector: false,
-  disableColumnSorting: false,
-  disableDensitySelector: false,
-  disableEval: false,
-  disableMultipleColumnsFiltering: false,
-  disableMultipleColumnsSorting: false,
-  disableMultipleRowSelection: false,
-  disableRowSelectionOnClick: false,
-  disableVirtualization: false,
-  editMode: _models.GridEditModes.Cell,
-  filterDebounceMs: 150,
-  filterMode: 'client',
-  hideFooter: false,
-  hideFooterPagination: false,
-  hideFooterRowCount: false,
-  hideFooterSelectedRowCount: false,
-  ignoreDiacritics: false,
-  ignoreValueFormatterDuringExport: false,
-  // TODO v8: Update to 'select'
-  indeterminateCheckboxAction: 'deselect',
-  keepColumnPositionIfDraggedOutside: false,
-  keepNonExistentRowsSelected: false,
-  loading: false,
-  logger: console,
-  logLevel: process.env.NODE_ENV === 'production' ? 'error' : 'warn',
-  pageSizeOptions: [25, 50, 100],
-  pagination: false,
-  paginationMode: 'client',
-  resizeThrottleMs: 60,
-  rowBufferPx: 150,
-  rowHeight: 52,
-  rowPositionsDebounceMs: 166,
-  rows: [],
-  rowSelection: true,
-  rowSpacingType: 'margin',
-  showCellVerticalBorder: false,
-  showColumnVerticalBorder: false,
-  sortingMode: 'client',
-  sortingOrder: ['asc', 'desc', null],
-  throttleRowsMs: 0,
-  unstable_rowSpanning: false
+  signature: 'DataGrid',
+  unstable_listView: false
 };
 const defaultSlots = _defaultGridSlotsComponents.DATA_GRID_DEFAULT_SLOTS_COMPONENTS;
 const useDataGridProps = inProps => {
@@ -98,9 +39,9 @@ const useDataGridProps = inProps => {
     slots: themedProps.slots
   }), [themedProps.slots]);
   const injectDefaultProps = React.useMemo(() => {
-    return Object.keys(DATA_GRID_PROPS_DEFAULT_VALUES).reduce((acc, key) => {
+    return Object.keys(_dataGridPropsDefaultValues.DATA_GRID_PROPS_DEFAULT_VALUES).reduce((acc, key) => {
       // @ts-ignore
-      acc[key] = themedProps[key] ?? DATA_GRID_PROPS_DEFAULT_VALUES[key];
+      acc[key] = themedProps[key] ?? _dataGridPropsDefaultValues.DATA_GRID_PROPS_DEFAULT_VALUES[key];
       return acc;
     }, {});
   }, [themedProps]);

package/node/components/GridPagination.js

@@ -21,6 +21,7 @@ const GridPaginationRoot = (0, _styles.styled)(_TablePagination.default)(({
 }) => ({
   maxHeight: 'calc(100% + 1px)',
   // border width
+  flexGrow: 1,
   [`& .${_TablePagination.tablePaginationClasses.selectLabel}`]: {
     display: 'none',
     [theme.breakpoints.up('sm')]: {